The following code works:
#if ( Model.document.usesNumericRevision )
{
<tr>
<th>Major Revision</th>
<td>#Html.TextBoxFor( m => m.document.documentStatus.documentRevision.MajorRevision )</td>
</tr>
<tr>
<th>Minor Revision</th>
<td>#Html.TextBoxFor( m => m.document.documentStatus.documentRevision.MinorRevision )</td>
</tr>
}
else
{
<tr>
<th>Alphanumeric Revision</th>
<td>#Html.TextBoxFor( m => m.document.documentStatus.documentRevision.Revision )</td>
</tr>
}
Depending on the value of usesNumericRevision the appropriate HTML will display. But if the user checks / unchecks the checkbox, the view will not update. Is there a way to update the view without going back to the server?
The condition statement in the view is executed on the server and sent to the client. You need to use JavaScript to do it client side without going back to the sever.
Yes... but you need some jQuery to do the client side stuff.
<div id="NumericRevision">
<tr>
<th>Major Revision</th>
<td>#Html.TextBoxFor(m => m.document.documentStatus.documentRevision.MajorRevision)</td>
</tr>
<tr>
<th>Minor Revision</th>
<td>#Html.TextBoxFor(m => m.document.documentStatus.documentRevision.MinorRevision)</td>
</tr>
</div>
<div id="AlphanumRevision">
<tr>
<th>Alphanumeric Revision</th>
<td>#Html.TextBoxFor( m => m.document.documentStatus.documentRevision.Revision )</td>
</tr>
</div>
...
<script>
$(document).ready(function() {
//Initial state of the form
$("#AlphanumRevision").css("display","none");
// Add onclick handler to checkbox w/id "checkme"
$("#checkme").click(function(){
// If checked
if ($("#checkme").is(":checked")){
$("#AlphanumRevision").show("fast");
$("#NumericRevision").hide("fast");
}
else {
$("#AlphanumRevision").hide("fast");
$("#NumericRevision").show("fast");
}
});
});
</script>
Related
I was working on this json data with react-table, it displays yet horizontally in a single <td></td>, your inputs are highly appreciated.
export const COLUMNS = [
{
Header: 'mId',
accessor: (row) => {return row.skus.map(sku => sku.mId); }
}]
Please note that I can access the data and print but it looks weird.
Expected Output:
<td>sku2620222 </td>
<td>sku2620220</td>
<td>sku2680407 </td>
<td>sku2680408 </td>
<td>sku10980349 </td>
<td>sku2680406</td>
Real output:
<td> sku2620222sku2620220sku2680407sku2680408sku2680405sku10980349sku2680406</td>
Basically I want it to display in every row. Thanks a lot
Each item you map through needs to be in its own row. Then you can add as many table downs as you need. That way each time you map through it, it will render a new table row. Here is an extremely simple table you can follow.
export default function App() {
let data = [
{sku: "sku2620222"},
{sku: "sku2620220"},
{sku: "sku2680407"},
{sku: "sku2620222"},
{sku: "sku2680408"},
]
let tabledata = data.map(i => {
return (
<tr>
<td>
{i.sku}
</td>
</tr>
)
})
return (
<>
<table>
<thead>
<tr>
<th>
SKU
</th>
</tr>
</thead>
<tbody>
{tabledata}
</tbody>
</table>
</>
)
}
In my MVC 5 Web App I use footable. In a table I have fields radio buttons for example that are built the form.
here is the code:
<thead>
<tr>
<th></th>
#foreach (var labelfreqdep in ViewBag.rbFreqDep)
{
<th style="text-align:center;" data-breakpoints="xs sm">
<label for="FrequencyID">#labelfreqdep.FrequencyDescription</label>
</th>
}
<th data-breakpoints="xs sm"></th>
</tr>
</thead>
<tbody>
<tr>
<td>First Chooses</td>
#foreach (var freqdep in ViewBag.rbFreqDep)
{
<td class="rd">
<input type="radio" name="A3_1" id="A3_1" value="#freqdep.FrequencyDescription" data-val="true" data-val-required="Please select">
</td>
}
<td class="rd">#Html.ValidationMessageFor(model => model.A3_1, "", new { #class = "text-danger" })</td>
</tr>
</tbody>
</table>
I also use validation for empty fields with data-val="true". The problem is that doesn't display the "Please select" message in mobile view. It works ok for desktop view. When I have expanded the tr with the plus icon the message appears. Can we just expand the rows on submit so the message to be displayed?
Any idea?
Edited
I used
$("#survey_form").submit(function (event) {
$('.surveytable').footable({
"expandAll": true
});
});`
It expands the rows on submit but it doesn't show the validation errors
For anyone who has the same issue, I solved it by giving an id to the button and then handle it through jquery
<script type="text/javascript">
jQuery(function($){
$('.surveytable').footable()
$("#survey_btn").click(function (event) {
$('.surveytable').footable({
"expandAll": true
});
});
});
</script>
this is driving me mad and hope someone might be able to help.
I have this React.Component:
var Vehicle = React.createClass({
ondragend: function(e) {
e.preventDefault();
// Logic here
console.log('onDragOver');
},
ondragstart: function(e){
e.preventDefault();
console.log('ondragstart');
},
render: function() {
that = this
var loads = this.props.truck.map(function(load , i){
load.truckid = i
return (
<tr key={i} draggable="true" dragstart={that.ondragstart} dragend={that.ondragend}>
<td>
{load.load_number}
</td>
<td>
{load.stops[0].location_name}
</td>
<td>
{load.stops[1].location_name}
</td>
</tr>
)
})
return (
<div className="panel panel-primary" draggable="true">
<VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
<div className="panel-body" >
<table className="table">
<tbody>
{loads}
</tbody>
</table>
</div>
</div>
)
}
});
As you can see, I am trying to make the s draggable. Unfortunetly, this won't work, even if I use the Chrome dev tools to manually add this into the html in the browser.
I have tried removing my link to Bootstrap incase this is something to do with the CSS rules, and also tried to render just a html table with no dynamic values.
I can't see how the code in this fiddle:
jsFiddle
Works by setting the draggable=true in the render function, but mine won't.
Thanks in advance for any help.
Edit
Added the dropEnd/Start handlers but no change.
Curiously, if I add draggable=true to the div.panel container, this is draggable whilst the containing s remain not.
Update
If I create a quick .html page with this table:
<table className="table">
<thead>
<tr>
<td>Name</td>
<td>Tangyness</td>
</tr>
</thead>
<tbody>
<tr draggable="true">
<td>Apple</td>
<td>4</td>
</tr>
<tr draggable="true">
<td>Orange</td>
<td>7</td>
</tr>
</tbody>
</table>
Then the desired draggble = true works on the table rows. However, if I paste this into the React render function:
return (
<div className="panel panel-primary" >
<VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
<div className="panel-body" >
<table className="table">
<thead>
<tr>
<td>Name</td>
<td>Tangyness</td>
</tr>
</thead>
<tbody>
<tr draggable="true">
<td>Apple</td>
<td>4</td>
</tr>
<tr draggable="true">
<td>Orange</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
)
Then suddenly, the 'draggability' is lost.
It should work, but you probably want to implement onDragOver event(s) too. Otherwise it will look like it doesn't work because you can drag your component, but don't have any legal place to drop it. onDragOver lets you specify if an element accepts dropping and which elements it accepts.
As you can see in the fiddle you linked there are onDragOver events which look something like this
onDragOver: function(e) {
e.preventDefault();
// Logic here
}
Calling e.preventDefault(); tells the browser that dropping is possible here. You can put the onDragOver event on any of your parent elements, or on the tr itself. You can read more about drop targets here. If you remove the onDragOver event from the jsFiddle you linked the code in the fiddle stops functioning too.
If you implement onDragOver you will be able to implement an onDrop event on your table that handles dropped tr elements.
Here is your code with the events implemented:
var Vehicle = React.createClass({
onDragOver: function(e) {
e.preventDefault();
// Logic here
console.log('onDragOver');
},
onDragStart: function(e){
e.dataTransfer.setData('id', 'setTheId');
console.log('onDragStart');
},
onDrop: function(e) {
console.log('onDrop');
var id = event.dataTransfer.getData('id');
console.log('Dropped with id:', id);
},
render: function() {
that = this;
var loads = this.props.truck.map(function(load , i){
load.truckid = i
return (
<tr key={i} draggable="true" onDragOver={that.onDragOver} onDragStart={that.onDragStart}>
<td>
{load.load_number}
</td>
<td>
{load.stops[0].location_name}
</td>
<td>
{load.stops[1].location_name}
</td>
</tr>
)
})
return (
<div>
<div className="panel-body" >
<table className="table" onDrop={this.onDrop}>
<tbody>
{loads}
</tbody>
</table>
</div>
</div>
)
}
});
Here is a jsFiddle of this: http://jsfiddle.net/kb3gN/10761/
The reason that the item doesn't seem to drag is you have e.preventDefault(); inside onDragStart function, which prevents it from showing the default dragging movement. Just remove that line, so it would look like this and it should work:
var Vehicle = React.createClass({
...
onDragStart: function(e){
// REMOVED THIS LINE
//e.preventDefault();
console.log('ondragstart');
},
...
I am using the HTML Table Class of CodeIgniter, and attempting to create a table template. The example given in the documentation is the following:
$tmpl = array (
'table_open' => '<table border="0" cellpadding="4" cellspacing="0">',
'heading_row_start' => '<tr>',
'heading_row_end' => '</tr>',
'heading_cell_start' => '<th>',
'heading_cell_end' => '</th>',
'row_start' => '<tr>',
'row_end' => '</tr>',
'cell_start' => '<td>',
'cell_end' => '</td>',
'row_alt_start' => '<tr>',
'row_alt_end' => '</tr>',
'cell_alt_start' => '<td>',
'cell_alt_end' => '</td>',
'table_close' => '</table>'
);
$this->table->set_template($tmpl);
When I apply this template to my query, this is the resulting HTML:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<td>2008</td><td>48</td></tr>
<tr>
<td>2009</td><td>32</td></tr>
<tr>
<td>2010</td><td>32</td></tr>
<tr>
<td>2011</td><td>32</td></tr>
<tr>
<td>2012</td><td>40</td></tr>
<tr>
<td>2013</td><td>41</td></tr>
</tbody>
</table>
The problem with this example is that each row contains two data elements (<td></td><td></td>), instead of one header element and one data element (<th></th><td></td>).
How can I change the template so that my resulting table will have one header element and one data element (<th></th><td></td>) on each row like this:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<th>2008</th><td>48</td></tr>
<tr>
<th>2009</th><td>32</td></tr>
<tr>
<th>2010</th><td>32</td></tr>
<tr>
<th>2011</th><td>32</td></tr>
<tr>
<th>2012</th><td>40</td></tr>
<tr>
<th>2013</th><td>41</td></tr>
</tbody>
</table>
Thanks.
The answer is no you can't change template like this but yes you can somewhere achieve this kind of functionality
If you see the http://ellislab.com/codeigniter/user-guide/libraries/table.html there is a option to add a callable function so I suggest you are creating a table make some flag if you are using that table is generating than create a helper function and add that to the table function than before generating table set a flag to determine the first cell may be using cookie. Than from helper for every 1, 3....(2n+1) add some custom html tag or style. Than after generating the table remove all the flags.
I want to perform navigate to other screen when I touch a table row. To do so I did the following :
<table>
<tr>
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
But nothing happened. I also tried to apply in td. Still no success. Finally I tried with unordered lists. Still nothing happened.
How can we navigate to other screen on table row touch?
You need to specify an action in your anchor tag, not just a controller. You can try something like the following:
<table>
<tr onclick="rowClick();">
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function rowClick() {
window.location = "<%= url_for :controller => :Products, :action => :show, :params => { :item_id => 1234 } %>";
}
</script>