[thelist] Re: XMLhttpRequest, javascript arrays? [SOLVED]

Courtenay court3nay at gmail.com
Fri Mar 18 04:35:52 CST 2005


Well, I solved the problem, with a little help from callbacks, and a
kickstart from
 http://www.cabezal.com/blog/archives/000607.shtml

Here's the code, which enables you to queue up ajax requests.  I'm
still open to neater solutions.. the ajax code is a little hacked-up,
and its untested in everything except ffx1

function xmlLoad(url, obj, func)
{	
	if (!url) return false;
	if (window.XMLHttpRequest)
		var http = new XMLHttpRequest();
	else if (window.ActiveXObject)
	try {	http = new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (!http) return false;
	if (func) 
		http.onreadystatechange = function() {
			if (http.readyState != 4) return;
			func(obj, http.responseText);
		};
	http.open('GET', url, true);	
	http.send(null); // probably wants to be http.send() in IE
	if (func) {} else return http.responseText;
	return false;
}


Then to call it from the form submitter, you go

function formsubmit(frm)  {

	url = frm.action; // also, you can convert POSTs to GET here.
	thetable = getParent(frm, 'table'); // navigate up the foodchain
	lastrow = thetable.rows[thetable.rows.length-1]; // get last row
	.. // add form data to last row here

	xmlLoad(url, lastrow.cells[0],	function(ob,tx) { ob.innerHTML = tx; });
	// set the first cell as the response from the server (in this case an image)
}


---------- Forwarded message ----------
Hi all,

I'm (bravely) building a data-entry app (in Rails, heh) that uses
xmlHttpRequest to send the form data asynchronously to the server (it
also degrades without javascript).

The code works something like this:

 -Data is in a table with 3 columns
- User enters data in a form field at the end of the table
- Javascript intercepts form.onsubmit, appends a new row to the
existing data with the text from the form.
- Javascript sends xmlHttpRequest to a controller, which adds it to the db.

So the process is quite fast for the user (immediate in fact) and
there's no waiting around for the database (inserts being quite slow).
 If there's an error, it uses a css popup to alert the user.  If the
insert is successful, it changes a little icon next to the item.

[x] [   Item name               ] [ $4.50 ]
[x] [  Other  Item name      ] [ $3.25 ]
[  ] [  New item name         ] [ $2.50 ]

     [  (form field                 ] [ (form field) ]   [Submit]

Here's the problem: I store the 'current row' as a global var (eek).
If the user adds a few rows quickly, it can't keep up with the icon
changes.

javascript:

var req;
var cur;
function XMLreq(url, target) {
  cur = target;
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  ... etc.
}

function processReqChange() {
  if (req.readyState == 4 && req.status == 200) {
   cur.innerHTML += req.responseText;
 }
}

So maybe if I use associative arrays like
 cur[url] = target;

then on processReqChange use
 cur[url].innerHTML = req.responseText

However, there's no way of retrieving the URL from the xmlHTTPrequest
data... or is there?

Any other suggestions?  Another list to post to?

TIA

court3nay


More information about the thelist mailing list