CODEWITHSUNDEEP
jqueryhtmlajaxdialogreload
zeka
zeka

Reputation: 31

after loading a div, dialog box jquery ui wont open again

I have a list of survey results in a table. Each entry has an EDIT button, which opens a dialog box with the survey results loaded from the database, when clicked. After editing the answers, I want to click on the SAVE button in the dialog box, then save the edited answers in the database and only refresh the survey results table on my site.

When I reload the whole page, everything works fine, but when I try to refresh only the table, I can't open the dialog boxes any more by clicking the EDIT button.

Here's my code so far:

jQuery(document).ready(function($) {
$('body').on('click', '.edit_button', function () {
$("#dialog").dialog({

    autoOpen: false,
    width: 'auto',        
    buttons: {
        SAVE: function () {

            $.ajax({
                type: "POST",
                url: "admin/ajaxMethod/" + id,
                data: $('form.cForma1').serialize(),
                success: function () {                        
                    alert("success");

                    $("#tabela").load(location.href + " #tabela");
                    $("#dialog").dialog("close");
                },
                error: function () {
                    alert("failure");
                },                    
            });
        },
        CANCEL: function () {
            $(this).dialog("close");                
        },            
    }
});
});
});

When I put location.reload(); instead of $("#tabela").load(location.href + " #tabela"); $("#dialog").dialog( "close" ); then everything works, but I need only one div to reload-table div.

Upvotes: 1

Views: 1238

Answers (2)

Robin
Robin

Reputation: 1216

You're binding your event to your button via $('yourEDITbutton').click(..) in your page.

Your javascript code does not work any longer, because your buttons are dynamically created and .click(..) doesn't work for dynamically created elements. The solution here would be the following:

$('body').on('click', '.yourEDITbuttonClass', function () {
    // Open your dialog box here
});

For a longer explanation see jQuery documentation for .on().

Upvotes: 1

Raidri
Raidri

Reputation: 17560

This sounds like a classic jQuery event binding error:

You bind the dialog to a click on the "Edit" buttons. Then you reload the table and the former event binding is gone. You either need to bind the click events again or bind the event to a element on the page which is not reloaded, something like:

$(document).on('click', '.edit_button', function() {
    $('#dialog').dialog({ ... });
});

Upvotes: 2

Related Questions