JavaScript functions give errors when loaded via Ajax

Question

EDIT: OK, I believe I've found a way around the issue using the info posted by @ManseUK along with @Johan's comment. As a n00b I can't answer my own question but I've added an explanation below the question in case it helps anyone else out.

I am re-writing part of an e-commerce solution which was written by another development team some years ago. In the new version, we are experimenting with shortening the user journey using Ajax but doing so gives JavaScript errors and causes some functions to fail. Dev URL is here:

http://cognition.thelightbulb.co.uk/type-18/general-purpose-lamps-and-bulbs/craftlight-daylight

The errors appear once the dropdowns have been selected and the product displays.

The errors are displaying most notably in IE7:

 Error: 'frm.qty' is null or not an object Error: 'qty.value' is null or not an object

I believe this is where the problem is coming from:

 var frm = document.frmOrder; var qty = frm.qty;

In the lines above, frmOrder is the name of the form and qty is the name of the input for product quantity.

Compare that to http://cognition.thelightbulb.co.uk/product-54 where the product loads without the Ajax selection process and you'll see that the functions work correctly.

I suspect that the problem is to do with the fact that var frm = document.frmOrder; is not working due to the way it relates to the DOM when loaded with Ajax.

I am using innerHTML=xmlhttp.responseText as the Ajax method. Is there an alternative way to define var frm so that it will function properly when loaded with Ajax?

EDIT: Using the info posted by @ManseUK along with @Johan's comment, I added another argument to CheckMinQty(minorder) so that it now looks like this...

function CheckMinQty(minorder,qty)

...where qty is passed to the function on an onclick event as document.forms['frmOrder'].qty.value

I then moved the whole function out into a separate.js file. It's maybe not the best approach but it still feels tidier for the Ajax call to just return workable HTML which CheckMinQty can use rather than bringing in a whole load of <script> and then trying to run it.

Thanks for all the suggestions and I'd welcome any comments about the approach/solution outlined above.

Answer 1

Change this

var frm = document.frmOrder; 

to this

var frm = document.forms['frmOrder']; 

That will give you a handle to the form

Answer 2

document.frmOrder refers to the element with id frmOrder on the page, which happens to be the form on this page. Just try to get the correct form-element as the variable there.

Answer 3

Though the Manse's solution might work, use a more sensible way and assign an id to the form and since you're using jQuery anyway, retrieve the form with var frm = $(#formid);Not only is it easier to write, it's much more easier to read by you and everybody else.

Answer 4

When loading script via AJAX, you don't have DOMReady event anymore. In other words, when you want to execute your script on AJAX load, you should use self-invoked functions . Wrap your ajax-loaded script inside a function like this:

(function(){
    // Do what you want to do here.
})();

See if that solves the problem?