CODEWITHSUNDEEP
jqueryjquery-ui
buri kuri
buri kuri

Reputation: 429

jQueryUI Dialog window malfunction

Here is jQuery code:

<script>
    $(document).ready(function() {

        $('.class112').click(function() {
           var msg = $(this).attr('id');
           $('#'+msg).dialog({
                autoOpen:false,
                width:100,
                height:200,
                position:[250,50]
           });

           $('#'+msg).load('classSource/'+msg+'.html');
           $('#'+msg).dialog('open');
       });
   });
</script>

and HTML code:

<p class="class112" id="class1">open it dude! </p>

<p class="class112" id="class2">open2 dude!</p>

my purpose is whenever user clicks one of paragraphs mentioned above, a jQuery user interface dialog window shows up with the related HTML filed loaded inside. It works fine but the think is when I click to the paragraphs, they disappear after clicking. Where I am doing wrong?

Upvotes: 0

Views: 142

Answers (1)

mu is too short
mu is too short

Reputation: 434665

You're turning your paragraphs into dialogs right here:

$('#'+msg).dialog({
    // ...
});

As soon as you do that, jQuery-UI will hide your paragraph until you open the dialog with this:

$('#'+msg').dialog('open');

and then it'll get hidden again when you close the dialog.

You probably want a dedicated element for the dialog. Create an HTML element for the dialog and start it off hidden:

<div id="dialog" style="display: none;"></div>

And then use that as the dialog:

$('#dialog').dialog({
    autoOpen: false,
    width: 100,
    height: 200,
    position: [250,50]
});

$('.class112').click(function() { 
    var msg = $(this).attr('id');
    $('#dialog').load('classSource/' + msg + '.html', function() {
        $('#dialog').dialog('open');
    });
});

Notice that I've also moved the .dialog('open') call to the load callback, that way the dialog won't open until the appropriate content has been loaded; you might want to add a little animated "loading" GIF of some sort as well.

If you want multiple dialogs open at the same time then you'll have to adjust the above a little bit, adding a separate <div id="X-dialog">, where X is the paragraph id, would be a pretty easy way to arrange that.

Upvotes: 2

Related Questions