jquery - Select all fields of wich name starts with, only first field is affected

Vote count:

0

I'm trying to implement a simple autocomplete feature in my web app, wich is based on xataface.

I have this grid widget wich gives me rows of input fields, like a table, and on completing the first one, it ceates another row via javascript "onChange".

I managed to implement my autocomplete feature wich is using Mysql, jquery, but for some reason it only works for the first field in the first row. I guess is has to do with how xataface creates the additional rows using "onchange", my autocomplete function doesn't sees these additional rows.

I created my function to select all fields of wich name starts with "Product_name", the first field in the first row is Product_name[0], the second one wich appears after I write something has its name Product_name[1] and so on. The autocomplete function doesn't seem to work on additional fields created, I guess because the additional fields are created after the page loads, my function doesn't sees them. Is there a way to bypass this ? Maybe make my function "refresh itself" after completing first row ?

Here is my autocomplete script

jQuery(document).ready(function($) {

$("[name^='Product_name']").autocomplete(
{
     source:'autocomplete/getfromDB.php',
})

});

Here is field's HTML code

<input class="default ui-autocomplete-input" id="Product_in_0" name="Product_name[2][nam]" type="text" size="30" data-xf-field="name" value="" onchange="dataGridFieldFunctions.addRowOnChange(this);" style="width:100%;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

You can see the "addRowOnChange(this)"

Here is the addRowOnChange(this)

    dataGridFieldFunctions.addRowOnChange = function(e,insert) {
        /* Add a new row when changing the last row */
        if ( typeof(insert) == 'undefined' ) insert = null;
    // XXX: Generalize window.event for windows
    // Grab current node, replicate, remove listener, append
    var currnode = e;
    //var currnode = window.event ? window.event.srcElement : e.currentTarget;

    // XXX Should add/remove event listeners via JS, but IE has
    // non-standard methods.  Not hard, but for now, just check 
    // if we are the last row.  If not, bail.
    //alert(currnode.tagName);
    var tbody = this.getParentElement(currnode, "TBODY");
    var tr = this.getParentElement(currnode, "TR");
    var tfoot = this.getParentElement(currnode, "TABLE")
        //.getElementsByTagName("TFOOT")[0];
        //.getElementsByTagName("TR")[0];

        var templateTr = this.templates[tfoot.getAttribute('id')];
        //alert('Template: '+templateTr);
    var rows = tbody.getElementsByTagName("TR");

    if(insert || (rows.length ==(tr.rowIndex))) {
        // Create a new row
        //var newtr = tr.cloneNode(true);
        var newtr = this.cloneNode(templateTr);
        jQuery(newtr).removeClass('xf-disable-decorate');
        var row_id = tr.getAttribute('row_id');
        if ( !row_id ) row_id = tr.getAttribute('df:row_id');

        row_id = rows.length; //parseInt(row_id)+1;
        newtr.setAttribute('df:row_id', row_id);

        /*
        var scripts = templateTr.getElementsByTagName('SCRIPT');
        var scriptTexts = [];
        for ( var i=0,imax=scripts.length; i<imax; i++){
                scriptTexts[scriptTexts.length] = this.getScriptText(scripts[i]);
        }
        alert('['+scriptTexts.join('/')+']');
        scripts = scriptTexts;
        */
        var scripts = [jQuery(tfoot).attr('data-script-text')];
        //alert(scripts);

        // Turn on hidden button images for current node
        var imgs = tr.getElementsByTagName("img");
        for(var i=0; i<imgs.length; i++)
            imgs[i].style.display = "block";

        // Clear content of newly created cells that were duplicated from 
        // current cell
        var cells = newtr.getElementsByTagName("td");
        for(var i=0; i<cells.length; i++) {

            td = cells[i];

            inputs = this.getInputOrSelect(td, true /*multi*/);
            if(inputs == null) 
                continue;
                        for ( var j=0; j<inputs.length; j++){
                                var input = inputs[j];
                                if ( !input.getAttribute('name') ) continue;
                                if ( !input.getAttribute('name').match(/\[__id__\]/) ){
                                        input.value = "";
                                        if ( jQuery(td).attr('data-xf-grid-default-value') ){
                                                jQuery(input).val(jQuery(td).attr('data-xf-grid-default-value'));
                                        }
                                } else {
                                        input.value = 'new';
                                }
                                var inputname = input.getAttribute('name');
                                inputname = inputname.replace(/^([^\]]+)\[[0-9]+\]/, '$1['+row_id+']');
                                input.setAttribute('name', inputname);
                        }


        }
        newtr = this.cloneTag(newtr, row_id, scripts);
        jQuery(newtr).attr('data-xf-record-id', 'new');

        if ( tr.nextSibling ){
                tr.parentNode.insertBefore(newtr,tr.nextSibling);
        } else {
                tr.parentNode.appendChild(newtr);
        }
        this.updateOrderIndex(tbody);
        for (var i=0; i<newtr.copiedScripts.length; i++){
                if ( !newtr.copiedScripts[i].src ){
                        //alert(jQuery(newtr.copiedScripts[i]).html());
                        jQuery('td',newtr).get(0).appendChild(newtr.copiedScripts[i]);
                }
        }

        decorateXatafaceNode(newtr);


    }
}

I'm new to jquery, sorry if my script looks ancient.

asked 7 mins ago

Roberto C

83

jquery - Select all fields of wich name starts with, only first field is affected