CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Tom R.
Tom R.

Reputation: 13

Jquery not responding inside AJAX form results display

I've just started to really work in jquery and AJAX and for the most part I've seem to have the hang of it but this one little bit of code is not working.

I have a page that displays a summary of articles. When you click on the article name a popup window displays and the article information is show along with a X icon in the upper right hand corner that is to close the article window.

I'm handling the form processing via AJAX and it works great. The window pops up, all the proper information is displayed. The issue I am running into is the Close button function.

When you click on the close button, nothing happens. The jquery I have for it doesn't seem to respond. If I just use pure jquery/css the window appears and the close button works. If I handle the form with HTML/PHP it displays the window and the close button works.

Only when I handle the call via AJAX does the close button not respond and I am at a loss why this is.

Here is the simple jquery code for the close button:

$('.newsClose').click(function(){
        $('#newsWindow').hide();
    });

This is the AJAX call:

$(document).ready(function() {
    $('#agentNewsForm').submit(function(e) {  
    e.preventDefault();
    $.ajax({
            type  : 'POST',
            data : $('#agentNewsForm').serialize(),
            url  : '/search/customer/agentNewsView.inc.php',
            beforeSend : function() {
                $('#processing').show();
            },
            error : function() {
                $('#processing').hide();
                $('#ajaxFormError').show();
            },
            // success callback
            success : function (response) {
                $('#processing').hide();
                $('#newsWindow').html(response).show();

            },
            complete : function() {
                $('#processing').hide();
            },
            timeout : 3000,
        });  
    return false;
    });

});

I'm sure it's something very simple that I am missing. Any thoughts?

Upvotes: 1

Views: 265

Answers (3)

E. S.
E. S.

Reputation: 2919

Try this:

(function($){


var $newsWindow  = $('#newsWindow');

$('body').on('click','.newsClose',function(e){
    e.preventDefault();

    $newsWindow.hide();
});


$('body').on('submit','#agentNewsForm',function(e){

    e.preventDefault();

    var $el      = $(this);
    var $process = $('#processing');
    var $error   = $('#ajaxFormError');

    var _data = $el.serialize();

    $.ajax({
        type  : 'POST',
        data :  _data,
        url  : '/search/customer/agentNewsView.inc.php',
        beforeSend : function() {
            $process.show();
        },
        error : function() {
            $error.show();
        },
        success : function (response) {
            $newsWindow.html(response).show();

        },
        complete : function() {
            $process.hide();
        }
    });  

});
})(jQuery);

Upvotes: 0

cmorrissey
cmorrissey

Reputation: 8583

Your code to close the window is only firing on document load, and your close button is inside #newsWindow, you can resolve this in one of two ways ...

$('#newsWindow>.content').html(response).show(); and keep your close button outside of the .content area.

or you can use the on method which will bind your close click on all new dom added to the document.

$(body).on('click', '.newsClose', function(e){ e.preventDefault; $('#newsWindow').hide(); });

Upvotes: 0

Eisa Adil
Eisa Adil

Reputation: 1733

$(document.body).on('click', '.newsClose' ,function(){
        $('#newsWindow').hide();
});

See this SO: Jquery event handler not working on dynamic content

Upvotes: 5

Related Questions