Ajax request quoting

Question

I am trying to send an Ajax request using the prototype framework that adds a new row to my table (existing) on success. I have already made successful requests with other functions but i can't get this one to work. I am sure it has something to do with my quoting in the insert html (the nested quotes).

this question helped me out for my previous function but in this one the quoting is still more complex.

this is a thread on inserting the html

new Ajax.Request('switch.php', {
    method: 'post',
    postBody: 'action=addHour&addday=' + addday + '&addhour=' + addhour + '&addminute=' + addminute + '',
    onSuccess: ($('tbl_' + addday + '').down('tr').insert({
        Bottom: "<TR ALIGN=LEFT VALIGN=TOP><TD id='var_" + adday + "" + addhour + "" + addminute + "' value='" + addhour ":" + addminute + "'></TD><TD id='del_" + adday + "" + addhour + "" + addminute + "'><input type='button' value='Del' onClick='deleteHour(" + addhour + "" + addminute + ", " + addday + ")'></TD></TR>"
    }))
});

I am quite new to web development, if someone could point me in the right direction (some explanation about the quoting order) that would help a lot,

thx,

M.

Answer 1

Pumbaa was right about the onSuccess callback; it needs to be a function. Its a good practice to wrap your input fields in a form element. I saw what you were trying to do with the 'add' variables by putting a blank string between them, but if you make them strings first, you won't have to do that. That simplifies your code a bit. I rewrote your code to make it more readable.

new Ajax.Request('switch.php', {
    method: 'post',
    parameters: {
        action: "addHour",
        addday: addday,
        addhour: addhour,
        addminute: addminute
    },
    onSuccess: function(e) {
        addday = addday.toString();
        addhour = addhour.toString();
        addminute = addminute.toString();

        $('tbl_' + addday).down('tr').insert({bottom: '<TR ALIGN=LEFT VALIGN=TOP>\
          <TD id="var_"' + addday + addhour + addminute + '" value="' + addhour + ":" + addminute + '"></TD>\
          <TD id="del_"' + addday + addhour + addminute + '">\
            <form>\
              <input type="button" value="Del" onClick="deleteHour(' + addhour + addminute + ', ' + addday + ')">\
            </form>\
          </TD>\
        </TR>'});
    }
});

Answer 2

Your onSuccess value should be a function. You're actually passing the result of a function invocation here. Your code is equivalent to

var os = ($('tbl_' + addday + '').down('tr').insert({
    Bottom: "<TR ALIGN=LEFT VALIGN=TOP><TD id='var_" + adday + "" + addhour + "" + addminute + "' value='" + addhour ":" + addminute + "'></TD><TD id='del_" + adday + "" + addhour + "" + addminute + "'><input type='button' value='Del' onClick='deleteHour(" + addhour + "" + addminute + ", " + addday + ")'></TD></TR>"
}));
new Ajax.Request('switch.php', {
    method: 'post',
    postBody: 'action=addHour&addday=' + addday + '&addhour=' + addhour + '&addminute=' + addminute + '',
    onSuccess: os
});

That's not what you want. You probably want this:

var os = function () {
    $('tbl_' + addday + '').down('tr').insert({
        Bottom: "<TR ALIGN=LEFT VALIGN=TOP><TD id='var_" + adday + "" + addhour + "" + addminute + "' value='" + addhour ":" + addminute + "'></TD><TD id='del_" + adday + "" + addhour + "" + addminute + "'><input type='button' value='Del' onClick='deleteHour(" + addhour + "" + addminute + ", " + addday + ")'></TD></TR>"
    });
};
new Ajax.Request('switch.php', {
    method: 'post',
    postBody: 'action=addHour&addday=' + addday + '&addhour=' + addhour + '&addminute=' + addminute + '',
    onSuccess: os
});

or directly:

new Ajax.Request('switch.php', {
    method: 'post',
    postBody: 'action=addHour&addday=' + addday + '&addhour=' + addhour + '&addminute=' + addminute + '',
    onSuccess: function () {
       $( // etc...
    }
});