CODEWITHSUNDEEP
jquery
Mosaic
Mosaic

Reputation: 348

Dialog only opens once

How do I set the 'autoOpen' and 'open' for this Dialog. Please help!

<body>
<img class="image" src="css/images/0101-s.png">
<img src="css/images/0101.png" style="display: none;"class="dialog">

<img class="image" src="css/images/0102-s.png">
<img src="css/images/0102.png" style="display: none;"class="dialog">

<script>
$('.image').click  (function(){
        $(this).next('.dialog').dialog({ show: 'slide', minWidth: 400 });
    });
</script>

Upvotes: 1

Views: 216

Answers (3)

j08691
j08691

Reputation: 207901

Don't waste resources creating a dialog on every click. Do it like this:

$('.dialog').dialog({
    autoOpen: false,
    show: 'slide',
    minWidth: 400
});
$('.image').click(function() {
    $('.dialog').eq($(this).index('.image')).dialog('open');
})​

jsFiddle example.

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You are trying to initialize the dialog every time the image is clicked. You should call $('.dialog').dialog("open") after the initialization to open the dialog.

DEMO

Try below code,

//initialize the dialogs
$('.image').each(function(index) {
    var dialogID = 'dlg-' + index;
    $(this).next('.dialog').dialog({
        show: 'slide',
        minWidth: 400,
        create: function(event, ui) { 
            $(this).addClass(dialogID);
        },
        autoOpen: false
    });

    $(this).data('dlgID', dialogID);
});

$('.image').click(function() {
    var dialogID = $(this).data('dlgID');
    $('.' + dialogID ).dialog("open");
});

You code doesn't work because the dialog is no more in .next() of the .image. The jQuery dialog widget appends the dialog to the body tag and so $(this).next('.dialog') in your code is empty. See below snapshots,

Before Dialog Initialization,

enter image description here

After Dialog Initialization,

enter image description here

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You should do

$('.image').click  (function(){
    $(this).next('.dialog').dialog({ show: 'slide', minWidth: 400, autoOpen: true });
});

in this way when you click the image you open the dialog. If you want you can define an open function that does something when the dialog opens.

$('.image').click(function() {
    $(this).next('.dialog').dialog({
        show: 'slide',
        minWidth: 400,
        autoOpen: true,
        open: function(){
            alert('hi');
        }

    });
});

Upvotes: 1

Related Questions