jQuery UI dialog does not call function on second load

Question

I'm loading another jquery load() method after showing a jQuery ui dialog on click of a product:

$(".productCode").on('click', function() {
    var productCode = $(this).text();
    var userId = jQ( '#field_user_id option:selected' ).val();
    var accountParam = $('#accCode').val();
    var branchParam = $('#branchCode').val();
    var getUrl = "http://admin.myapp.com/inventory_mgmt_uploads/product_details/" + productCode + "/" + userId + "/" + accountParam + "/" + branchParam;
    console.log( getUrl );
    showUrlInDialog( getUrl );
});

Now here's how I show the jQuery UI dialog:

function showUrlInDialog( url ) {
    var tag = $("<div></div>");
    $('#imgLoader').show();
    $.ajax({
        url: url,
        success: function( data ) {
        tag.html(data).dialog({
            modal: true,
            title: "Product Inventory Details",
            width: 600,
            height: 600
        }).dialog('open');

        $('#imgLoader').hide();
        showBeginningInventories();
        }
    });
}

...and here's the function that executes the load method.

function showBeginningInventories(){
    console.log('computing beginning inventories.');
    var selectedText = $('#selectUom').find('option:selected').text();
    var productCode = $('#pDetailsProdCode').text();
    var userId = $('#pDetailsUserId').text();
    var url_to_load = "http://admin.myapp.com/inventory_mgmt_uploads/compute_inventories/" + productCode + "/" + userId + "/acc-mer3249/br-1/" + selectedText;
    console.log(url_to_load);

    $( "#begInv" ).html("<i>Loading...</i>");
    $( "#begInv" ).load(url_to_load, function() {
        console.log('done loading.');
    });
}

please note that this is just a sample code, and i know i should be using jQuery on() method instead of live().

the code above works on first click of a product code, but on the second click/reload, it does does not do showBeginningInventories() properly.

on my console, it says showBeginningInventories() was executed, but the loaded html is not showing...

any ideas? thanks for any help!

whether elements like pDetailsProdCode are inside the dialog — Arun P Johny
– Arun P Johny, Commented Oct 15, 2013 at 2:39
that could be the reason..... because when the second click happens there are multiple elements with the same id — Arun P Johny
– Arun P Johny, Commented Oct 15, 2013 at 2:49
thanks for the tip @ArunPJohny, but isn't the element removed when the user close the dialog? — Mico
– Mico, Commented Oct 15, 2013 at 2:54

Arun P Johny · Accepted Answer · 2013-10-15 03:12:14Z

1

The problem seems to be that since the element begInv is from the dialog, each time the dialog element is loaded a new element with id begInv is created.... which means there are now multiple elements with that id which is wrong since id of an element must be unique. One easy fix is to destroy the dialog once it is closed.

var tag = $('<div></div>');
....
tag.html(data).dialog({
    modal: true,
    title: "Product Inventory Details",
    width: 600,
    height: 600,
    close: function(){
        setTimeout(function(){
            tag.dialog('destroy').remove()
        })
    }
}).dialog('open');

Demo: Problem, Solution

answered Oct 15, 2013 at 3:12

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI dialog does not call function on second load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related