JS works in FF but not in IE

Question

i'm new into JS. I have done 2 simple functions to change value and onclick-event for an input-button.

function doAjaxRequest(url, divID, buttonID) {
  $(divID).html('<img src="images/loader.gif" />');
  setTimeout(function(){ $(divID).load(url); }, 600);
  setTimeout(function(){ $(buttonID).attr({
      value: 'Schliessen',
      onClick: 'clear_div(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });}, 600);
};

function clear_div(url, divID, buttonID) {
    $(divID).empty();
    $(buttonID).attr({
      value: 'Mehr...',
      onClick: 'doAjaxRequest(\''+url+'\', '+divID.id+', '+buttonID.id+')'
    });
};

functions call is

<div id="div1"></div>
<input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/>

the doctype i'm using for my homepage is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the functions both work correctly in IE but in FF they only work if i set the doctype to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

i also tryed the "loose.dtd" with no effect.

What am i doing wrong with JS? Hope someone can help me.

Greets Joe

Answer 1

The problem is probably that onClick should be onclick (case is significant in attributes in XHTML). But there are a couple of problems.

In your markup here:
```
 <input type="button" id="button1" onClick="doAjaxRequest('test.html', div1, button1);" value="More..."/> 
```
You haven't put quotes around div1 or button1 , which means you're relying on the browser dumping those symbols in the global namespace because they're the IDs of your elements. That's fairly common (IE and some others do it), but it's not universal. Instead, I'd pass strings and then look them up properly.

Since you're using jQuery, there's no reason to (and several reasons not to) use onclick attributes.

So:

 function doAjaxRequest(url, divID, buttonID) { $('#' + divID).html('<img src="images/loader.gif" />'); setTimeout(function(){ $('#' + divID).load(url); }, 600); setTimeout(function(){ $('#' + buttonID) .attr({value: 'Schliessen'}) .click(function() { clear_div(url, divID, buttonID); }); }, 600); } function clear_div(url, divID, buttonID) { $('#' + divID).empty(); $('#' + buttonID) .attr({value: 'Mehr...'}) .unbind('click') .click(function() { doAjaxRequest(url, divID, buttonID); }); }

And similarly, your button hookup originally should be:

 $("#button1").click(function() { doAjaxRequest('test.html', 'div1', 'button1'); });

...rather than using the onclick in the HTML. That code needs to appear after the button in the HTML (it's fairly common to recommend putting script tags at the bottom of the document, just before the closing </body> tag), or you can wrap it in a jQuery ready handler:

 jQuery(function($) { $("#button1").click(function() { doAjaxRequest('test.html', 'div1', 'button1'); }); });

...so it runs only when the DOM has loaded.

Notes:

Now we're using real functions for the event handlers, and hooking them up in a modern way.
We're using the IDs of the elements, not the global instances of them (which aren't entirely reliable).
We're using unbind to remove all previous click handlers before adding our new one.
There's no need for a semicolon after a function declaration. Semicolons terminate statements. Function declarations aren't statements (they're declarations). That said, putting a semicolon there is harmless. :-)

And finally: Rather than removing the old click handler and putting in a new one, I think I'd probably just have the click handler change its behavior based on some flag.

Answer 2

I'm not sure if this is the cause of your problem, but your parameters to doAjaxRequest look funny to me, in the following way: I'm not sure all browsers expose an element as a global variable named after the id of the element. I'd be more sure that your code was correct if you did it like this:

onClick="doAjaxRequest('test.html', '#div1', '#button1');"

JS works in FF but not in IE

Question

2 answers

solution1
6 ACCPTED 2011-11-03 08:17:02

solution2
0 2011-11-03 08:28:26

JS works in FF but not in IE

Question

2 answers

solution1 6 ACCPTED 2011-11-03 08:17:02

solution2 0 2011-11-03 08:28:26

solution1
6 ACCPTED 2011-11-03 08:17:02

solution2
0 2011-11-03 08:28:26