Need help populating dynamically-created fields

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

hackwriter - 31 Jan 2008 21:34 GMT

I have a form which uses Javascript to create table rows on the fly so as to
add items to a list dynamically. The table consists of two fields -- an ID and
let's call the other one Attribute A. The user clicks "Add another one" and
another row of data entry fields pops up. My action page works fine to get the
value of these rows using the evaluate() function (I always wondered what that
did), but I want it to go back to the calling page, have the calling page
create the correct number of rows, and populate them with the changed or
inserted data that was just saved -- the same way that an ordinary action page
might save data and then return you to the calling page.

The first row of this table is created through HTML and only additional rows
are created dynamically.

I have it all working up to and including the creation of the correct number
of fields as an "onload=(loadTheData)" in the <body> tag, but how the heck and
where do I populate them with the data returned from the query?

Below is the Javascript and how it's called. I changed some variable names to
protect the innocent, but that's basically how it works. So the Javascript is
creating the fields -- one for each record returned by the query -- but how can
I assign the record values in turn? Do I need WDDX? If so, how would that be
written?

function loadSamples(recordCount) {
    var tbody = document.getElementById("sampleTable");

    //When it loads the page, only one row will exist so that you don't
    //have to go through to find the next sample ID
    var sample_id = 2;

    while (sample_id <= recordCount) {


        var nextrow = document.getElementById("sample"+sample_id);

        //Create the row
    var tr = document.createElement("tr");
    tr.setAttribute("id", "sample"+sample_id);

        // SET UP 3 TABLE CELLS
    var td_label = document.createElement("td");
    td_label.appendChild(document.createTextNode("Sample "+sample_id+":"));
    td_label.setAttribute("class", "left");
    td_label.setAttribute("className", "left");

    var td_Sample = document.createElement("td");
    td_Sample.setAttribute("class", "IDNum");
    td_Sample.setAttribute("className", "IDNum");

    var td_Otherstuff = document.createElement("td");
    td_Otherstuff .setAttribute("class", "Samplestuff");
    td_Otherstuff .setAttribute("className", "SampleIstuff);

    var td_del_link = document.createElement("td");
    var a_del_link = document.createElement("a");
    a_del_link.setAttribute("id", "del_sample"+sample_id);
    a_del_link.setAttribute("href", "javascript:deleteSample("+sample_id+")");
    a_del_link.appendChild(document.createTextNode("Remove"));
    td_del_link.appendChild(a_del_link);

        // SET UP THE INPUT CONTROLS
    var input_sample = document.createElement("input");
    input_sample.setAttribute("type", "text");
    input_sample.setAttribute("name", "IDNumber"+sample_id);
    input_sample.setAttribute("id", "IDNumber"+sample_id);

    var input_Otherstuff = document.createElement("input");
    input_Otherstuff.setAttribute("type", "text");
    input_Otherstuff.setAttribute("name", "Tube"+sample_id);
    input_Otherstuff.setAttribute("id", "Otherstuff"+sample_id);


    td_Sample.appendChild(input_IDNum);
    td_TubeID.appendChild(input_Otherstuff);
    //td_TubeID.appendChild(input_deleteRow);

    tr.appendChild(td_label);
    tr.appendChild(td_IDNum);
    tr.appendChild(td_Otherstuff);
    tr.appendChild(td_del_link);

    tbody.appendChild(tr);

    sample_id++;
    }

}

</SCRIPT>

</HEAD>
<CFOUTPUT>
<CFIF #variables.recordCount# GT 0>
    <BODY onload="loadSamples(#variables.recordcount#);">
<CFELSE>
    <BODY>
</CFIF>

Reply to this Message

Dan Bracuk - 31 Jan 2008 22:16 GMT

Won't it work if you simply re-run the query? Or does the action page not add more records?

Reply to this Message

Ian Skinner - 31 Jan 2008 22:30 GMT

If you are going to use JavaScript to dynamically create the list, then
look into the <cfwddx...> tag that is very useful for translating
ColdFusion data structures into JavaScript data structures. You can
then use the JavaScript data to populate your table.

But I would think it would be simplier to use the ColdFusion data to
build the default table with existing data. Instead of just creating
one row with ColdFusion create rows for the existing data then just use
the JavaScript to add more rows on the client, just as you are doing now.

P.S. evaluate() is usually an awkward choice to access dynamical form
variables. I presume you are using something like

<cfset something = evaluate("form.aField_#aVar#")>

This can be easier with the use of array notation.
<cfset something = form['aField_' & aVar]>

OR

<cfset something = form['aField_#aVar#']>

To each his own, but knowing array notation is a very powerful technique.

Reply to this Message

Webmaster Forum / ColdFusion / General CF Topics / January 2008

Need help populating dynamically-created fields