Dropdown for each cell in tabular data - javascript

I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?

This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.

Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});​
jsFiddle Example

Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.

Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
​
Updated jsFiddle Example

Related

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

jquery splash screen for editing page information

I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)
You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.
Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}

appendChild not in right place

I want to apend a child ( <tr> ) to a table, after a specific row. because the rows get added by while mysqli_fetch_array()
I made a fiddle to show the problem. When you clic on add the text "abc" gets adedd. but behind the table, not as a new <tr> under the original row.
Fiddle
How can this be solved.
jsFiddle Demo
You are inserting a child of the table row with append Child. That is why the placement seems to be "not in the right place". It is however, right where you asked it to be placed. Instead, you can use insertBeforeMDN like this:
ct.parentNode.insertBefore(tr,ct.nextSibling);
This will look at the parent of the row (<tbody>) and then insert the new row before the next row of the selected button. Essentially this is "insertAfter", but that feature was never implemented for whatever reason.
As to the claim that insertBefore is somehow slow and should be avoided or that appendChild is preferred, it would seem that is not the case.

HTML- Altering Input Value

I recently posted a similar question, but after some discussion, the question turned out to be quite a bit different than it was originally stated, so I thought it best to post this as a new question. I am trying to use an input field to show a total (I would consider using another element type, but I need to do the same thing in other places where an input field is actually required, so I may as well fix the problem now). The problem is that the HTML of the table containing these fields needs to be reloaded on occasion, i.e. in table creation, I use the Jquery $('#table1').html($('#table1').html() + <next_table_line>);. This causes the input field to revert to the value displayed in its value attribute, which doesn't change when I use the $('#input1').val(<some_value>); setter or when I enter data manually. Does anyone know of a solution to my problem? I need to be able to add rows to the table without loosing my data, but I can't figure out how to do this.
You're reloading your entire table with the line $('#table1').html($('#table1').html() + <next_table_line>);. You should be appending to your table instead. Take the following sample small table:
<table id="test">
<tr><td>test</td></tr>
</table>
Now, to add a new row, dont re-write the entire table HTML, just append!
$("#test").append("<tr><td>See im new!</td></tr>");
Demo: http://jsfiddle.net/uB2Rq/1/

Selected value in dropdown won't clear jQuery

I've attached a vertical screen shot of some crazy stuff going on. Am I right to expect j$('[id$=Model_List]').children().remove(); to remove all items in a select list? For some reason the list is still holding on to the old selected value while clearing out the rest of the items.
I'm using the <Apex:selectlist in the html block, just not in the jQuery.
VG930M should be V243H as seen in hte console log...
Hopefully the screenshot gives you a better idea of what I'm talking about...
Any assistance would be greatly appreciated!
You need to remove all values from the drop down and reset the selected value.
j$("select[id$=Model_List] > option").remove();
j$("select[id$=Model_List]").val('');
You also need to clear the selected value:
$('[id$=Model_List]').val('');
I think, that salesforce selectList can not be filled out or cleared with jQuery (sure, you can do it but controller will not take the value).
Try to make it like in this example, with a hidden field:
Command button in Visualforce can't read selected item from dynamic drop down list

Categories

Resources