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>'});
    }
});