Dmitry
Dmitry

Reputation: 845

Variables doesnt refresh after AJAX request completed

I have a grid of the 'objects' in the page. For example:

obj1, obj2, obj3, ...

Every object has an option 'Edit', which opens the modal window (ui.dialog) and loads (.load()) the template, where are some inputs, textareas, etc. to edit the information about the object. There is a button 'Finish editing', which sends POST request to the PHP file via AJAX .post(). After that information about the object must be edited.

There aren't problems with PHP or MySQL, the problem is only in JS. After the first update everything seems to be fine, but when i click on the 'obj2' to edit it and press 'Finish editing', variables, in which i wrote the input values - are from the previous operation.

obj1. var1 = 'text1'; var2 = 'text2';

obj2. var1 = 'text3'; var2 = 'text4';

For example in 'obj1' i have sent the next data: 'v1' : var1, 'v2' : var2. Its ok. But in 'obj2' it sent the 'text1' and 'text2' too, not the 'text3' and 'text4'.

I have done the var1.val(''), but it didnt helped, second time it had sent the empty value :)

The code:

$(".edit").click(function(){
    var modal = $('<div class="dialog" id="dialog-new-message"><div></div></div>');
    modal.dialog({
        modal: true,
        width: 300,
        height: 300,
        autoOpen: true
    });

    modal.find(">div").load('someurl', function(){
        modal.dialog('open');
        modal.find("#finish-button").click(function() {
            var var1 = $('#someid1').val();
            var var2 = $('#someid2').val();
            $.ajax({
                url: 'someurl',
                type: 'post',
                data: {
                    'v1' : var1,
                    'v2' : var2
                },
                success: function(data) {
                    modal.dialog('close');
                    // here is some refresh code to refresh the edited info in the page ... nothing serious
                }
            });
        });
    });
});

Upvotes: 0

Views: 912

Answers (1)

I think the problem is that you're recreating the dialog, but you're not destroying the old one. It's probably getting the values from the first one you create. Try adding a close callback to the modal.dialog() function which removes the div like so:

modal.dialog({
    modal: true,
    width: 300,
    height: 300,
    autoOpen: true
    close: function() { modal.remove(); } //$(this).remove(); Might also work.
});

This should remove your original div so that next time the modal dialog is opened the IDs within it are still unique.

You can verify that this is happening by using your browser's tools and checking to see what the DOM looks like after the second one is run.

Edit
You're other option is to save the dialog in a global variable, and then check if it has been defined yet. If it hasn't do what you're doing. If it has, set a variable to tell it what the ID is of the item you're editing and reset all the text boxes to blank before running .dialog("open"); again.

Upvotes: 0

Related Questions