Home/ Questions/Q 6771637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:27:20+00:00

i’m new into JS. I have done 2 simple functions to change value and

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    1. 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.

    2. 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.

    • 0