Question

In bottom of my index.php I have a Javascript function between paired <script> tags. I have a click handler that calls the function that makes a Prototype.js Ajax request.

This version does not work (no request is made), although the myFunction itself is called.

function myFunction(fr, fw) {
    new Ajax.Request('/ascript', {
        method: 'post',
        parameters: { a: fr, b: fw }, 
        onSuccess: function(transport) { }, 
        onFailure: function(request) { }
    });
}

However when I add the alert(“something”); line the ascript php script is called.

function myFunction(fr, fw) {
    new Ajax.Request('/ascript', {
        method: 'post',
        parameters: { a: fr, b: fw }, 
        onSuccess: function(transport) { alert("here"); }, 
        onFailure: function(request) { }
    });
}

Might it be some weird whitespace problem? Is there an error in my syntax?

Answer 1

So I’ve found the problem. The problem was in how I added the eventhandler to my “button”

Initially (on both examples given in my question) I had:

echo "<a href='' ><p id='button' onclick='myFunction(" .$a .", " .$b.");'>Click</p></a>";

The surrounding <p> with a link tag was ofcourse a bad idea …

This works:

echo "<a href='' onClick='Event.stop(event);'><p id='button' onclick='myFunction(" .$a .", " .$b .");'>Click</p></a>";

Thanks to all for your answers. I guess the moral of the story is, look eaven farther from the Javascript itself, look where it gets called and what could be broken there.