jQuery dialog won't close (with .load data)

Question

jQuery dialog won't close (with .load data)

824 Views Asked by ZoFem At 18 September 2015 at 13:46

On my page (let's call it page A) I have a jQuery dialog with the id customOrderEdit. Within the dialog I load another page (let's call it page B) using $("#customOrderEdit").load("/url/to/page.php").

Now I want to close the dialog using a custom button, but it won't close. I've tried so many things (found on google, stackoverflow, etc.) but none of them seem to work. It doesn't matter if the code to close the dialog are on page A or B, as long as it closes I'm happy.

Code I tried on page A:

$("body").on('click', '.cancelUpdateOrder', function(){
    console.log("Test"); //it displays the test console log, but it doesn't close
    $("#customOrderEdit).dialog( "close" );
    return false;
});

Code I tried on page B:

$(".cancelUpdateOrder").on('click', function(){
        $('#customOrderEdit').dialog('close');
        return false;
});

I've also tried to call the click function differently:

$(".cancelUpdateOrder").click(function(){ }});
$(".cancelUpdateOrder").live('click', function(){ }});
$(".cancelUpdateOrder").on('click', function(){ }});.

And the closing part:

$(".ui-dialog").dialog( "close" );
window.parent.$('#customOrderEdit').dialog('close');
$('#customOrderEdit', window.parent).dialog("close");

And probably some more I can't remember.

Does anyone know what I'm doing wrong and can provide me the right code?

Original Q&A

There are 2 best solutions below

**Ricardo Pontual** · Answer 1 · 2015-09-18T14:13:31.133000

The class selector can return a list of objects, then you can try to iterate with them using each:

$('.cancelUpdateOrder').each( function () {
    $(this).on('click', function () {
        $('#customOrderEdit').dialog('close');
        return false;
    })
});

If doesn't work, you can try to put a console.log to track if you are reaching the right elements.

Hope it helps

**rob** · Answer 2 · 2017-05-22T17:44:04.790000

I had this problem and commented out the jquery.js included in the file being loaded (file B) even though it was the exact same jquery.js file that had been included in the calling file (file A). The following example will NOT work unless you comment out the <script src...> tag in the test.php file that is loaded into the dialog.

test.html (I am using jquery-3.2.1 and jquery-ui 1.12.1)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="../js/test.js" type="text/javascript"></script>
    <script src="../js/jquery-ui.js" type="text/javascript"></script>

</head>
<body>
<div id="contentsContainer">
    <button id="btnAddClient" name="btnAddClient">Add</button>
</div>
</body>
</html>

test.js

$( document ).ready(function() {

    $("#contentsContainer").on('click', '#btnAddClient', function () {
        var dlg = $("<div id=\"btnAddClientDlg\"/>").dialog({
            title: 'Add New Client',
            modal: true,
            autoOpen: false,
            width: 720,
            height: 420,
            buttons: {
                Save: function () {
                    $.post("../php/test.php");
                    $('#btnAddClientDlg').dialog('destroy').remove();

                },
                Close: function () {
                    $('#btnAddClientDlg').dialog('close');
                }
            }
        });
        dlg.load("../php/test.php");
        dlg.dialog('open');
    });
});

test.php

<!DOCTYPE html>
<header>
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script>
</header>
<?php
    echo "hello";
?>

jQuery dialog won't close (with .load data)

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in DIALOG

Related Questions in JQUERY-DIALOG

Trending Questions

Popular # Hahtags

Popular Questions