I have a table with a dynamic number of rows. Within each row I have two cells. When the row is in the initial state, only the first cell is showing. When the row is clicked, both cells will show. I know how to do this with a static element and using state, but I am not sure how best to structure this table.
<tbody>
{invAdd.map(add =>
<tr key={add.itemName} className="bckgr-white border-1b add-items disp-flex" onClick={this.handleAddClick}>
<td className="point-none">{add.itemName}</td>
{if parentNode has class "selected"
?
<td>
<input className="addit-input" type="text" />
<select className="select">
<option value="ABC" />
<option value="DEF" />
</select>
</td>
:
null
}
</tr>
)}
</tbody>
I am not sure how to make this comparison without using state. I tried dynamically generating variables but this did not work either.
Related
In Aurelia (latest beta version), has anyone tried binding a select element inside of a table where the rows are bound to an array? I don't think it works on the initial load (activate() event).
Here's the example code:
<tbody>
<tr repeat.for="item of variations">
<td>
<input type="text" class="form-control input-sm" value.bind="item.name" />
</td>
<td>
<select class="form-control input-sm" value.bind="item.controlId">
<option>Select...</option>
<option value="1">DropdownList</option>
<option value="2">RadioList</option>
<option value="3">Checkboxes</option>
</select>
</td>
</tr>
</tbody>
In the viewmodel, the list of variations is built something like this in the activate() event:
this.variations.forEach(v => {
let variation = new Variation();
variation.value = v.value;
variation.text = v.text;
variation.control = v.displayType;
self.variations.push(variation);
});
The rest of the properties, ie. text input, show up fine on load. And the same view has regular selects outside of this table and they all bind correctly on load (ie. show the proper select option based on the value that is set programatically).
Is item.controlId a number? If so, what's probably happening is the number value is being compared using === with the string values of the option elements. You'll need to make sure the option values are numbers:
Instead of <option value="1"> use <option model.bind="1">
i'm having a list of attribute name like this
phonelist1, phonelist2, ect.
I want to render some rows, each row has different phone list
I'm trying to get them from my jsp file like this. It's working fine
<td align=left>
<select value="${phonelist1}"/>
</select>
<select value="${phonelist2}"/>
</select>
<select value="${phonelist3}"/>
</select>
</td>
</c:forEach>
However, when I try this. It doesn't work
<c:forEach begin="0" end="${phone_no}" step="1" var="i">
<select value="${phonelist${i}}"/> --%>
</select>
</c:forEach>
What can I do to dynamic name the phonelist here?
When you are between {} your expression will be evaluated, no need to add an extra set of {}. So just use:
<select value="${phonelist[i]}"/>
Im trying to get text from a product table in order to sAVE them to a shopping cart and put them into a database at a later date.I also want a confirm alert box to appear for the user to confirm before it gets written to a database table. However im having trouble getting the java script to read my html, as i only need to read the fields that have had the drop down list selected.
Any help or guidance would be great!!
<script type="text/javascript">
function myFunction()
{
alert(document.getElementById("musicStore").rows[0,1,2,3,4].cells.namedItem(number1,+ "price",+ "album",+ "type").innerHTML);
}
</script>
<form name= "musicStore" Action="" Method="get">
<tr>
<th>Artist</td>
<th>Title</td>
<th>Duration</td>
<th>Price</td>
<th>Album</td>
<th>Format</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Song never leaves</td>
<td>04:34</td>
<td id="price" value="8.99">£8.99</td>
<td id="album" value="freshprince">Fresh Prince</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Go Home</td>
<td>06:24</td>
<td id="price" value="10.99">£10.99</td>
<td id="album" value="Coffee">Coffee</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<div style ="float: right";>
<button onclick="myFunction()">Add to Cart</button>
</div>
</form>
Several problems:
You have multiple elements with the same ID. For example you have 2 elements with id='type'. ID's are supposed to be unique and won't function properly if there are repeats.
Use class instead:
<td class="price" value="8.99">£8.99</td>
Your javascript code isn't going to loop through properly.
You can't use innerHTML in all of your instances because the 'type' is select list. You'd have to get the value of that element as opposed to the innerHTML.
Here is a JSFiddle of the working code.
I would change the 2nd to this: <select name="format" id="type2">
Something different.
I think you then want:
document.querySelector('#type').value
document.querySelector('#type2').value
I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.
That is, when I click a row, jQuery should
Read the item name in the TD
Load the drop down list into the TD
Select the active value as the previous text value
On row exit, reverse the process
The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to accomplish step 2 and 3
Edit
Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.
<table>
<tr>
<td>Item Name</td>
<td>Item Value</td>
</tr>
<tr>
<td>Product A</td>
<td>166.22</td>
</tr>
<tr>
<td>Product B</td>
<td>166.22</td>
</tr>
</table>
<select id="itemname" style="display:none;">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
Edit 2- Probable Solution
Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD
function addItem(e) {
if ($(e).find('select').length) {
var input = $(e).find('select').eq(0);
$(e).text($(input).val());
$(input).appendTo($('.promotion-header'));
}
else {
var text = $(e).text();
$(e).text('');
$('#itemname').appendTo(e).val(text).show();
};
}
Try copying all elements of the main div to all other div using by setting and getting html from .html() method. Here in the demo, all elements in myDropDownListDiv is copied to anotherDiv.
HTML :
<div id="myDropDownListDiv"><select id="itemname">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
</div>
<div id="anotherDiv">
</div>
jQuery :
$(document).ready(function(){
//copies all contents of myDropDownListDiv into anotherDiv
$("#anotherDiv").html($("#myDropDownListDiv").html());
});
Demo
I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf
Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)