SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript in Firefox cannot access DOM elements loaded via Ajax

    Hi,

    I'm having a bit of an issue with Javascript in Firefox (This is not a problem in IE or Chrome and works fine in those).

    I have a small function that loops form elements and returns a formatted string for use with AJAX Post requests:
    Code:
    function parseForm(form) {
    	var loadString="";
    	var x=document.getElementById(form);
    	for (var i=0;i<x.length-1;i++)
    	{
    		if (x.elements[i].value) {
    			if (x.elements[i].name=="limit") {
    				if (x.elements[i].value>5000) {
    					js_die("Record limit cannot be greater than 5000");
    				}
    			}
    			loadString=loadString+x.elements[i].name+"="+x.elements[i].value+"&";
    		}
    	}
    	return loadString;
    }
    This code works as expected on forms that were in the initial page load (DOM), but in Firefox, getElementById() picks up nothing if the form was not in the original page (ie, loaded with Ajax).
    Is this a restriction in Firefox? A feature yet to be implemented? A bug?
    I've googled, but all I find is jquery stuff which I'm not using.

    Hope someone can help me.
    Thanks
    David

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Me01273 View Post
    Hope someone can help me.
    Ajax requests occur asynchronously, so after performing an ajax request, you cannot expect to run commands that do anything with that content.

    An example of what not to do:

    Code javascript:
    $('#content').load('domain.com/testform.html');
    var loadString = parseForm('register');

    Instead, you need to use a callback so that after the ajax content has been successfully received, that callback will then be run.

    For example:

    Code javascript:
    $('#content').load('domain.com/testform.html', function () {
        var loadString = parseForm('register');
        ...
    });

    For when using vanilla javascript, you can use code from the Bulletproof Ajax book which provides code and examples that provide useful demonstrations of how things are done.

    For example:

    Code javascript:
    function getHTTPObject() {
        ...
    }
    function grabFile(file) {
      var request = getHTTPObject();
      if (request) {
        request.onreadystatechange = function() {
          displayResponse(request);
        };
        request.open("GET", file, true);
        request.send(null);
      }
    }
     
    function displayResponse(request) {
      if (request.readyState == 4) {
        if (request.status == 200 || request.status == 304) {
          // do stuff with the requested data here
        }
      }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •