CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
umefarooq
umefarooq

Reputation: 4574

jquery ui dialog box not loading form tags in first ajax request

Hi i am using Jquery UI dialog for editing a content also adding jquery ui tabs in dialog, when you click on edit button it sends an ajax request get form with data filled in it.

But in first ajax request when dialog open it not adding form tags its just showing form elements i can not submit form at all. i have to close dialog and open it again it works proper html has form tags in too.

in console output first request showing form tags are there. but in dialog box nothing.

here is my code

$(".edit-media").on('click', function () {
    var url = $(this).data('url') + '?' + Math.random();
    // $("#media_edit_dialog").load(url);
    $.post(url, function (data) {
        $("#media_edit_dialog").html('').html(data)
            .dialog({
            modal: true,
            width: 'auto',
            autoOpen: false,
            resizable: false,
            open: function () {
                console.log('i will open');
                $('#tabs, .tabs').tabs();
                Admin.dateTimePicker();
            },
            buttons: {
                "Save": function () {
                    $("#media_edit_form").submit();
                },
                    "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        })
            .dialog('open');
    });
});

Upvotes: 0

Views: 364

Answers (1)

invinciblejai
invinciblejai

Reputation: 1293

Instantiate it before, and on ajax just call

jQuery('#media_edit_dialog').dialog('open');

Keep property auto open set to false

Upvotes: 1

Related Questions