...

View Full Version : Adding action to dynamic field



nick2price
09-26-2012, 11:13 AM
Hi guys. This follows on from my question yesterday, but I cant find any examples of this online, only for the datepicker. Basically, one of the fields in my row is


<td><input type="text" placeholder="Getting" class="getting_selector" name="popupGetting[]" autocomplete="off"/></td>

I then have some javascript code


$("input.getting_selector").autocomplete({
source: 'http://www.example.com/form_ajax.php?function=getting_selector',
minLength: 2
});

What this basically does is call a case from my php file which searches my database and then returns all the values. These values are then shown to the user as they are typing into the field.

If you have seen my last post, you would have seen that in my form, I have an add button, and this button adds rows to my table and one of the fields in the row is the one shown above. As I found out, the dynamically added fields dont show the results to the user, because the javascript is executed before the new rows are added. I know with the datepicker field, I can use something like JQuerys on function, but would could I use for the above?

Any advise appreciated as usual.

Cheers

Nick

devnull69
09-26-2012, 11:54 AM
You just need to call


$("NEWELEMENTSELECTOR").autocomplete({
source: 'http://www.example.com/form_ajax.php?function=getting_selector',
minLength: 2
});

for every new element you insert (after you inserted it).

nick2price
09-26-2012, 02:21 PM
Kool. I have taken your advice on board, and changed my row adding function to

var stdContent = "<td class='tabletitle'>xx:</td>\n" +
"<td><input type='text' placeholder='Giving' class='getting_selector' name='popupgiving1[]' autocomplete='off'/></td>\n" +
"<td><input type='text' placeholder='Getting' class='getting_selector' name='popupgetting1[]' autocomplete='off'/></td>\n"
var newno = 5;
function addTableRow() {
var newrow = document.createElement('tr');
var theTable = document.getElementById('table1');
var tbody = theTable.getElementsByTagName("tbody")[0];

tbody.appendChild(newrow);
var newcontent = stdContent.replace('xx', newno);
newrow.innerHTML = newcontent;
newno++;
$("input.getting_selector").autocomplete({
source: 'http://www.example.com/form_ajax.php?function=getting_selector',
minLength: 2
});
}

This seems to work, but is this the best way to do this? By this, I mean that every new row will get the input with the class getting_selector, which is the same as in the original table. So instead of calling up the function everytime when adding a new row, wouldnt it be better to somehow refresh the page or something so the original function knows about these new fields?

Nick

devnull69
09-26-2012, 03:15 PM
With this line


$("input.getting_selector").autocomplete({

inside your addTableRow() function you are indeed re-creating the autocomplete for EVERY field with the class "getting_selector" with every added row. This is certainly not the best way of doing it.

You could still add the class "getting_selector" to the new rows, but additionally you might also add an id attribute and then use the #ID selector to execute .autocomplete() only on the new row.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum