javascriptphpjqueryajaxjquery-forms-plugin

Ajax form not working with jquery append


This code form is working, but it doesn't call the ajax form chat_process.php. I need to call the ajax form and alert a message.

var html = "";

for(...) {
    html += '<form class="form_deletechatmessage" action="chat_process.php" method="post">';
    html += '<button type="submit" class="trashchat">Delete</button>'   
    html += '<input type="hidden" name="task" value="chatdelete">';
    html += '<input type="hidden" name="token" value="80a86781f1ab0200c17e4a39f42588e5">';
    html += '<input type="hidden" name="id" value="1">';
    html += '</form>';
}

$('#discussion').append(html);

$(".form_deletechatmessage").ajaxForm({ 
    success     : function(result) {        
        var result = trim(result);

        if(result == 'success') {
            alert("Success");
        } else {
            alert(result);
        }
    }       
}); 

The whole code:

function getChatText(){
    $.ajax({
        dataType: 'json',
        url: "chat_process.php?task=refresh&token=" + token + "&lastTimeID=" + lastTimeID,
        success: function(data) {
                var jsonData = JSON.parse(data);
                var jsonLength = jsonData.results.length;
                var html = "";
                for (var i = 0; i < jsonLength; i++) {
                    var result = jsonData.results[i];

                    var ida = $("#ida").val();

                    var you = "";

                    html += '<form class="form_deletechatmessage" action="chat_process.php" method="post">';
                    if(ida == result.aid) {
                        html += '<li class="self">';
                        you = " (ti)"
                    } else {
                        html += '<li class="other">';
                    }
                    html += '<div class="avatar"><img src="http://localhost/project/images/avatars/' + result.aid + '/' + result.avatar + '" /></div>';
                    html += '<div class="messages">';
                    html += '<button type="submit" class="trashchat" title="Izbriši poruku"><i class="fa fa-trash-o"></i></button>'                 
                    html += '<p><font style="font-weight: 600; color: ' + result.color + '">' + result.name + you + '</font> kaže:</p>';
                    html += '<p>' + result.chattext + '</p>';
                    html += '</div>';
                    html += '</li>';
                    html += '<input type="hidden" name="task" value="chatdelete">';
                    html += '<input type="hidden" name="token" value="' + token + '">';
                    html += '<input type="hidden" name="id" value="' + result.id + '">';
                    html += '</form>';

                    lastAdminID = result.aid;
                    lastTimeID = result.id;
                }
                if(html != "" && lastTimeID != 0) {
                    $('.discussion').append(html);

                    var objDiv = $(".discussion");
                    objDiv.scrollTop = objDiv.scrollHeight; 

                    if(ida != result.aid) {
                        audioElement.play();

                        $.titleAlert("Imate novu poruku!", {
                            requireBlur:        false,
                            stopOnFocus:        true,
                            stopOnMouseMove:    true,
                            interval:           700
                        }); 
                    }                                   
                }
        },
    });
}

Solution

  • Probably your ajax call fails and it seems that you expect error in your success block by:

    if(result == 'success') {
        alert("Success");
    } else {
        alert(result);
    }
    

    You should expect error in error block not in success block:

      $(".form_deletechatmessage").ajaxForm({ 
                success     : function(result) {        
                    alert(result)
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                    alert(textStatus + errorThrown); 
            }       
        });