User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 457,440 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,995 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 6029 | Replies: 22 | Solved
Reply
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Help Pass a 2D-array with AJAX

  #1  
Dec 12th, 2007
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)
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 25
Solved Threads: 368
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Lazy, Useless & Apathetic

Re: Pass a 2D-array with AJAX

  #2  
Dec 12th, 2007
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.
I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.
Reply With Quote  
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Re: Pass a 2D-array with AJAX

  #3  
Dec 13th, 2007
I'll look into it. Thanks.
Reply With Quote  
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Re: Pass a 2D-array with AJAX

  #4  
Dec 13th, 2007
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)
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 25
Solved Threads: 368
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Lazy, Useless & Apathetic

Re: Pass a 2D-array with AJAX

  #5  
Dec 13th, 2007
> 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.
I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.
Reply With Quote  
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Re: Pass a 2D-array with AJAX

  #6  
Dec 14th, 2007
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?
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 25
Solved Threads: 368
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Lazy, Useless & Apathetic

Re: Pass a 2D-array with AJAX

  #7  
Dec 14th, 2007
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.
I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.
Reply With Quote  
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Re: Pass a 2D-array with AJAX

  #8  
Dec 17th, 2007
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?
Last edited by Oxiegen : Dec 17th, 2007 at 7:21 am.
Reply With Quote  
Join Date: Jun 2006
Location: India
Posts: 7,012
Reputation: ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold ~s.o.s~ is a splendid one to behold 
Rep Power: 25
Solved Threads: 368
Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Lazy, Useless & Apathetic

Re: Pass a 2D-array with AJAX

  #9  
Dec 17th, 2007
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>
I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.
Reply With Quote  
Join Date: Jun 2006
Location: Sweden
Posts: 45
Reputation: Oxiegen is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 2
Oxiegen Oxiegen is offline Offline
Light Poster

Re: Pass a 2D-array with AJAX

  #10  
Dec 18th, 2007
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.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb JavaScript / DHTML / AJAX Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 10:13 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC