Pass a 2D-array with AJAX
 

Hi, all!

Here's another one that's starting to boggle my mind.

I have a form that, with a button, adds a bunch of text-fields in a tablerow.
For every press of the button another row is added. This works in both IE and FF. No probs.

When pressing another button, Register, the information in the form is to be stored in a db.
In the javascript funktion assigned to this button I have a loop that goes through the dynamically created rows of text-fields, and stores the values in variables.
These vars is then passed to an ajax-function.

I have tried with calling the function once in every iteration of the loop. But if you have a bunch or rows, 9 or more, only a few rows of information is stored, 3 or less. Like this:

for (i = 0; i < nrapps; i++) {                        

   var appnr = document.Form1.elements['txtAppNr' + id].value;

   var floor = document.Form1.elements['txtFloor' + id].value;

   var unitplac = document.Form1.elements['txtUnitPlac' + id].value;

   var consid = document.Form1.elements['txtConsID' + id].value;

   var unitnr = document.Form1.elements['txtUnitNr' + id].value;

   var unitset = document.Form1.elements['txtUnitSet' + id].value;

   var fuse = document.Form1.elements['txtFuse' + id].value;

   var customer = document.Form1.elements['txtCustomer' + id].value;

   var dob = document.Form1.elements['txtDOB' + id].value;

   <ajaxcode>.CB_Function(regid,appnr,floor,unitplac,consid,unitnr,unitset,fuse,customer,dob,ServerSide_Callback2);

   if (On_Error == true) { return; }

   id++;

}

So my thought was to store the information in a 2D-array and then pass that array to the ajax-function in order to let that function in turn store the information to the db in it's own loop.

for (i = 0; i < arrSize ; i++) {                        

   arrApps[i][0] = document.Form1.elements['txtAppNr' + id].value;

   arrApps[i][1] = document.Form1.elements['txtFloor' + id].value;

   arrApps[i][2] = document.Form1.elements['txtUnitPlac' + id].value;

   arrApps[i][3] = document.Form1.elements['txtConsID' + id].value;

   arrApps[i][4] = document.Form1.elements['txtUnitNr' + id].value;

   arrApps[i][5] = document.Form1.elements['txtUnitSet' + id].value;

   arrApps[i][6] = document.Form1.elements['txtFuse' + id].value;

   arrApps[i][7] = document.Form1.elements['txtCustomer' + id].value;

   arrApps[i][8] = document.Form1.elements['txtDOB' + id].value;

   if (On_Error == true) { return; }

   id++;

}

<ajaxcode>.CB_Function(arrApps,nrapps,ServerSide_Callback2);

I've read that you can pass an array in the form of an object. But how do I turn this 2D-array into an object that can be passed? (I'm using AjaxPro by Michael Schwarz)

Re: Pass a 2D-array with AJAX
 

Look into JSON for shipping data back and forth between your server and Javascript. It has become a de-facto standard like XML for shipping data in a platform / language agnostic manner.

Re: Pass a 2D-array with AJAX
 

I'll look into it. Thanks.

Re: Pass a 2D-array with AJAX
 

JSON look promising. I like the fact that it can contain an array.
But how to create a dynamic JSON object containing multiples.

My guess would be that the object needs to have the form:

var myJSONObject = {"bindings1": [

        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},

        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},

        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}

    ],"bindings2": [

        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},

        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},

        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}

    ], <and so on>

};

Am I right?
And how would I go about to access these values from codebehind? (ASP.NET)

Re: Pass a 2D-array with AJAX
 

> Am I right?
Yes, you can have nesting of arbitrary depths as long as it follows the key-value pair format where key is always a string and value can be either a string, number, array, another object, true, false or null.

> And how would I go about to access these values from codebehind? (ASP.NET)
Take a look at the .NET binding for JSON.

Re: Pass a 2D-array with AJAX
 

Everything about JSON looks interesting and workable.
But I'm new to JSON and used to passing information between functions using arguments. So, I'm gonna need a little hand-holding and guidance here. :)

On server-side i'm using AjaxPro by Michael Schwartz, which has built-in features for parsing JSON. And on client-side i've just added the json.js script found on json.org.

This is what I would like to do:
Build a JSON object on client-side filled with information from a dynamically created form (already working) that is then passed to server-side.
All examples i've read so far has been about creating the object/string on server-side and passing it to client-side.

The number of "sections" in the object is dependent on the number of dynamically created "form-rows", but each section will contain an array with a fixed size of 9 key/value pairs. As indicated on my first post.

Could you help me with a code-snippet on how to create that object in this manner?

Re: Pass a 2D-array with AJAX
 

Here is a crude snippet:

<html>

<head>

        <title>Forms</title>



        <script type="text/javascript">

        function objectify() {

                var o = {};

                var frms = document.forms;



                /* loop through all the form objects */

                for(var i = 0, maxI = frms.length; i < maxI; ++i) {

                        var frm = frms[i];

                        var elms = frm.elements;

                        var tmp = {};

                        /* loop through all the form elements of each form */

                        for(var j = 0, maxJ = elms.length; j < maxJ; ++j) {

                                var el = elms[j];

                                switch(el.type) {

                                        case "textarea":

                                        case "text":

                                                tmp[el.name] = el.value;

                                                break;

                                        default:

                                                /* add custom behavior for other form elements */

                                                break;

                                }

                        }

                        o[frm.name] = tmp;

                }

                return(o);

        }

        </script>

</head>

<body id="bdy">

        <form name="frmOne" action="#">

                <input name = "txtOne" value = "Text box one" />

                <input name = "txtTwo" value = "Text box two" />

                <input name = "txtThree" value = "Text box three" />

        </form>



        <form name="frmTwo" action="#">

                <input name = "txtOne" value = "Text box one" />

                <input name = "txtTwo" value = "Text box two" />

                <input name = "txtThree" value = "Text box three" />

        </form>



        <form name="frmThree" action="#">

                <input name = "txtOne" value = "Text box one" />

                <input name = "txtTwo" value = "Text box two" />

                <input name = "txtThree" value = "Text box three" />

        </form>

</body>

</html>

Just pass the object returned by objectify function to a function which returns the json string representation of a javascript object.

Re: Pass a 2D-array with AJAX
 

Ok. So i managed to use the code snippet you gave me which resulted in a javascript object. It gave me a happy.

This is what i came up with:

function somename() {

                var o = objectify();

                var jsonString = JSON.stringify(o); // This line gets halted and displays a 'Undefined' error

                <ajaxcode>.CB_Function(jsonString,ServerSide_Callback2);

}



function objectify() {

        var o = {};

        var frms = document.forms;

        var formID = 1;

        var id = 1;

 

for (i = 0, maxI = frms.length; i < maxI ; i++) {

        if (frms[i].name == 'form' + formID) {

                var frm = frms[i];

                var elms = frm.elements;

                var tmp = {};

      

                for (var j = 0, maxJ = elms.length; j < maxJ; j++) {

                        var el = elms[j];

                        tmp[el.name] = el.value;

                }

                o[frm.name] = tmp;

                formID++;

        }

}

return (o);

}

I'm now trying to use the json script from json.org in order to create a json string.
The script has the function stringify that's supposed to return a json string from a javascript object.
But everytime I get to that line all I get is undefined and my script just dies.

See anything wrong?

Re: Pass a 2D-array with AJAX
 

Did you include the 'json2.js' script at the top of your page? It must be the only reason or it has got something to do with your HTML file since stringify() works for me.

<html>

<head>

<title>Forms</title>

<script type="text/javascript" src="json2.js"></script>

<script type="text/javascript">

function somename() {

    var o = objectify();

    var jsonString = JSON.stringify(o);

    alert(jsonString);

}



function objectify() {

    var o = {};

    var frms = document.forms;

    var formID = 1;

    var id = 1;

    

    for (i = 0, maxI = frms.length; i < maxI ; i++) {

        if (frms[i].name == 'form' + formID) {

            var frm = frms[i];

            var elms = frm.elements;

            var tmp = {};

            

            for (var j = 0, maxJ = elms.length; j < maxJ; j++) {

                var el = elms[j];

                tmp[el.name] = el.value;

            }

            o[frm.name] = tmp;

            formID++;

        }

    }

    return (o);

}

</script>

</head>

<body id="bdy">

    <form name="form1" action="#">

    <input name = "txtOne" value = "Text box one" />

    <input name = "txtTwo" value = "Text box two" />

    <input name = "txtThree" value = "Text box three" />

    </form>



    <form name="form2" action="#">

    <input name = "txtOne" value = "Text box one" />

    <input name = "txtTwo" value = "Text box two" />

    <input name = "txtThree" value = "Text box three" />

    </form>



    <form name="form3" action="#">

    <input name = "txtOne" value = "Text box one" />

    <input name = "txtTwo" value = "Text box two" />

    <input name = "txtThree" value = "Text box three" />

    </form>

<script>somename();</script>

</body>

</html>

Re: Pass a 2D-array with AJAX
 

Yes, actually I did. But I'll have to look it over again.

The weird part is that when I debug using Firebug you can choose what js-script to debug and step through and I can clearly see the file and path. But in Firebug, the code of 'json2.js' doesn't contain any javascript code.