Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    165
    Thanks
    77
    Thanked 1 Time in 1 Post

    Adding action to dynamic field

    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
    Code:
    <td><input type="text" placeholder="Getting" class="getting_selector" name="popupGetting[]" autocomplete="off"/></td>
    I then have some javascript code
    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You just need to call
    Code:
    $("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).

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    165
    Thanks
    77
    Thanked 1 Time in 1 Post
    Kool. I have taken your advice on board, and changed my row adding function to
    Code:
    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

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    With this line
    Code:
    $("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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •