Question

I have a script that runs continuously on my page, and it detects if a new item has been submitted to my database, at which point it adds additional html to my page:

var count_cases = -1;

setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "new_lead_alerts_process.php",
        dataType: 'json',
        cache: false,
        success : function(response){
            $.getJSON("new_lead_alerts_process.php", function(data) {
                if (count_cases != -1 && count_cases != data.count) {
                    //add new HTML element to page
                    $('#content').prepend("<div class=\"reportRow\"><div id=\"reportRowLeft\" style=\"width: 63px;\">"+dayOfMonth+"</div><div id=\"reportRowCenter\">"+timeSubmitted+"</div><div id=\"reportRowRight\" style=\"width: 126px;\"><div id=\"claimButton"+data.id+"\"><form action=\"\" method=\"post\" name=\""+data.id+"\"><input type=\"hidden\" id=\"lead_id"+data.id+"\" name=\"lead_id\" value=\""+data.id+"\" /><input type=\"hidden\" id=\"client_id"+data.id+"\" name=\"client_id\" value=\""+data.client_id+"\" /><input type=\"hidden\" id=\"user_id"+data.id+"\" name=\"user_id\" value=\"1\" /><input type=\"image\" name=\"submit\" class=\"claimButton\" onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\" src=\"images/claim.gif\" id=\""+data.id+"\" style=\"width: 126px; height: 29px; margin: 0; border: 0px; padding: 0; background: none;\"></form></div><img id=\"claimed"+data.id+"\" style=\"display: none;\" src=\"images/claimed.gif\" /></div><div id=\"clear\"></div></div>");
                }
            count_cases = data.count;
            });
        }
    });
},1000);

I have another script that submits an update to the database via AJAX when a user clicks a button in the newly created element. It looks like this:

//update db when lead is claimed
$(document).ready(function(){
    $(".claimButton").click(function(){
        var element = $(this);
        var Id = element.attr("id");
        var client_id = $("#client_id"+Id).val();
        var user_id = $("#user_id"+Id).val();
        var lead_id = $("#lead_id"+Id).val();
        var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;
        
        $.ajax({
            type: "POST",
            url: "new_lead_alerts_update.php",
            data: dataString,
            cache: false
        });
    return false;});
    });

My issue, is that the second AJAX submit doesn’t appear to be working. I think this is due to the fact that the $(document).ready command only fires when the page first loads, and due to the fact that I’m updating the page content dynamically via AJAX, any new elements added to the page can’t be submitted.

I’ve tried .delegate and .live, as opposed to .ready and neither appeared to work.

Any help would be greatly appreciated.

Answer 1

Make the functionality from document.ready into a callback, and then do that every time you append a new element to the page from ajax like this:

$(document).ready(function(){ MakeClaim(); });

function MakeClaim(){
 $(".claimButton").click(function(){
    var element = $(this);
    var Id = element.attr("id");
    var client_id = $("#client_id"+Id).val();
    var user_id = $("#user_id"+Id).val();
    var lead_id = $("#lead_id"+Id).val();
    var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;

    $.ajax({
        type: "POST",
        url: "new_lead_alerts_update.php",
        data: dataString,
        cache: false
    });
 return false;});
}

success : function(response){
        $.getJSON("new_lead_alerts_process.php", function(data) {
            if (count_cases != -1 && count_cases != data.count) {
             //that huge string
             MakeClaim();
            }
            count_cases = data.count;
        });
}

EDIT

try changing this:

onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\"

to

onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');return false;\"