JQuery UI Dialog dialog.('close'); not working

Question

I have a page with multiple modal jQuery UI dialogs, I am trying to make a link on one dialog (faq) that will close that dialog and open another one (warranty). Below is the relevant code:

var $faqIframe = $('<iframe />', {
                name: 'myFrame',
                id:   'myFrame',
                src: "modal_faq.html",
                width:"100%",
                height:"100%",
                align:"left",
                scrolling:"auto",
                frameborder:"0"
            }); 

var $warrantiesIframe = $('<iframe />', {
                name: 'myFrame1',
                id:   'myFrame1',
                src: "modal_warranties.html",
                width:"100%",
                height:"100%",
                align:"left",
                scrolling:"auto",
                frameborder:"0"
            });

and then, to open the faq iFrame

$(function(){
    $('#faqDialog').dialog({
        autoOpen: false,
        width: 780,
        height: 460,
        modal: true
    });

    $('#faqDialog').append($faqIframe.clone());

    // Dialog Link
    $('#faq_link, #faq_link1').click(function(){
        $('#faqDialog').dialog('open');


        return false;
    });

This works fine, opens the dialog as expected. I have similar code for the warranty dialog as well. This is the code that is currently not working. #warranty_link2 is a link on the faq dialog that, when clicked, I would like to trigger the closing of the faq dialog.

    $('#warranty_link2').on("click", function(event){
        $('#faqDialog').dialog('close');
    });
}

I have tried

$('#faqDialog').dialog('close');
$('#faqDialog').dialog('hide');
$('#faqDialog').dialog('destroy');

I have also tried with 'live' instead of 'on', and without either of those two as well Also tried referencing it with the var $faqIframe, as in

$faqIframe.dialog('close')

with no results.

I know the click event is firing because I put in a console.log which worked.

What am I doing wrong and how can I get this dialog to close?

See it in action at http://www.solarkit2go.com - click the faq link

Why are you using iframes? Looks like you are simply cloning them to your current html page. Why not include the iframe contents as hidden divs? — jrummell
– jrummell, Commented Apr 13, 2012 at 13:16
Maybe the $('#faqDialog') does not exist or they are more than one divs. Create an example here jsfiddle.net — radu florescu
– radu florescu, Commented Apr 13, 2012 at 13:16
@Floradu88 it does exist and it is only one div, check out solarkit2go.com , click on the faq link — Mike
– Mike, Commented Apr 13, 2012 at 13:45
@jrummell the contents for the iframes are separate html files, hence the iframe — Mike
– Mike, Commented Apr 13, 2012 at 13:45
@Mike Precisely ... move your iframe html into your current html file. You could load it via ajax or move it server side. — jrummell
– jrummell, Commented Apr 13, 2012 at 14:36

Dan Atkinson · Accepted Answer · 2014-10-30 22:52:47Z

2

You have to bind the onclick event after you fire the dialog. See below

$(function(){
   $('#faqDialog').dialog({
    autoOpen: false,
    width: 780,
    height: 460,
    modal: true
});

$('#faqDialog').append($faqIframe.clone());

// Dialog Link
$('#faq_link, #faq_link1').click(function(){
    $('#faqDialog').dialog('open');

    $('#warranty_link2').click(function(event){
        $('#faqDialog').dialog('close');
    });

    return false;
});

edited Oct 30, 2014 at 22:52

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Apr 13, 2012 at 13:21

Carlos Paulino

7966 silver badges11 bronze badges

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

4 Comments

Mike Over a year ago

I tried that: $('#faq_link, #faq_link1').click(function(){ $('#faqDialog').dialog('open'); $('#warranty_link2').on("click", function(event){ $('#faqDialog').dialog('close'); }); return false; }); - but now the click event doesn't fire

Mike Over a year ago

I've also tried $(".ui-dialog-titlebar-close").trigger('click'); but this is also not working

Carlos Paulino Over a year ago

Strange. Use Chrome's console and see if there are any errors, if so, paste them here

Mike Over a year ago

no errors in the console generated by this. I have another modal which generates an error but it hasn't affected anything thus far

Collectives™ on Stack Overflow

JQuery UI Dialog dialog.('close'); not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related