Jquery UI dialog showing only once

Question

I have a simple markup for three sections. I want to display user information in a popup when user name is clicked. I have used Jquery UI dialog() for that. this pop up is opening only once for each Section. I have tried to set the dialog({autoOpen:false}) first and then tried calling dialog('open'). But in that case dialog box are not opening even for a single time. Here is the code

 $(function() { /* if I uncomment below line then it doesn't work for a single time and gives no erroR */ // $(".ideatorInfo").dialog({autoOpen:false}); $(".ideatorInfo").hide(); $('.ideator').on('click', function() { $(this).parent().find(".ideatorInfo").show().dialog({ autoOpen: false }).dialog('open'); }); }); 

 .ideatorInfo { border-bottom: 1px solid; font-size: 1.5em; padding-bottom: .3em; } .ideator { background-color: #c4dfe6; cursor: pointer; margin-bottom: .5em; } .ideator:hover { background-color: #003b46; color: white; } .ideaContent { margin: 3em; padding: 1em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <section id="allideas"> <section class="ideaContent"> <section class="ideator"> <span class="name"> Name: John Mayer </span> </section> <section class="ideaWrapper"> <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section> <section class="ideaStatus"> <span class="spantitle">Status</span> <span class="spanContent">In Process</span> </section> </section> <section class="suggWrapper"> <section class="suggestion">here is my suggestion</section> </section> <section class="ideatorInfo"> <span><img class="myimg" alt=":"/></span> <span class="name"> John Mayer </span> <span class="spantitle">Email: </span> <span class="spanContent">John.Mayer@star.com</span> <span class="spantitle">SAP ID: </span> <span class="spanContent">this</span> <span class="spantitle">Designation: </span> <span class="spanContent">this</span> <span class="spantitle">Department:</span> <span class="spanContent">this</span> </section> </section> <section class="ideaContent"> <section class="ideator"> <span class="name"> Name: Lily Wills </span> </section> <section class="ideaWrapper"> <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section> <section class="ideaStatus"> <span class="spantitle">Status:</span> <span class="spanContent"> In Process</span> </section> </section> <section class="suggWrapper"> <section class="suggestion">here is my suggestion</section> </section> <section class="ideatorInfo"> <span><img class="myimg" alt=":"/></span> <span class="name"> Lily Wills </span> <span class="spantitle">Email: </span> <span class="spanContent">Lily.Wills@star.com</span> <span class="spantitle">SAP ID: </span> <span class="spanContent">this</span> <span class="spantitle">Designation: </span> <span class="spanContent">this</span> <span class="spantitle">Department:</span> <span class="spanContent">this</span> </section> </section> <section class="ideaContent"> <section class="ideator"> <span class="name"> Name: Tom Morison </span> </section> <section class="ideaWrapper"> <section class="idea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.</section> <section class="ideaStatus"> <span class="spantitle">Status:</span> <span class="spanContent"> In Process</span> </section> </section> <section class="suggWrapper"> <section class="suggestion">here is my suggestion</section> </section> <section class="ideatorInfo"> <span><img class="myimg" alt=":"/></span> <span class="name"> Tom Morrison </span> <span class="spantitle">Email: </span> <span class="spanContent">Tom.Morrison@star.com</span> <span class="spantitle">SAP ID: </span> <span class="spanContent">this</span> <span class="spantitle">Designation: </span> <span class="spanContent">this</span> <span class="spantitle">Department:</span> <span class="spanContent">this</span> </section> </section> </section> 

Here is the fiddle: http://jsfiddle.net/satyanshua/ah1quj0d/1/

Answer 1

Because .dialog will move the siblins .ideatorInfo to other place(from dev-tool, it was moved to the tail of sections), so the 2nd time you click them, you can't get it use $(this).parent().find(".ideatorInfo") to get it.

You can keep a ref to that element, then no matter where it was moved, you can still use .dialog('open') to open it. jsFiddle

$(function() {
    $(".ideatorInfo").hide();
    $('.ideator').on('click',function(){
        if (!this.$modal) {
            this.$modal = $(this).siblings(".ideatorInfo").dialog({
                autoOpen: false
            });
        }
        this.$modal.dialog('open');
   });
 });

Answer 2

Please check this version: http://jsfiddle.net/ah1quj0d/5/ Change is that every time you click, the needed block .ideatorInfo is copied and added to dialog box:

var $elem = $(this).parent().find(".ideatorInfo");
var $copy = $elem.clone();
$copy.appendTo(document.body).show().dialog({autoOpen:false}).dialog('open');

In your case after first dialog was closed the DOM element .ideatorInfo was removed and could not be shown again.

Answer 3

this this:

 $(".ideatorInfo").hide();
      $('.ideator').on('click', function() {
        $(this).parent().find(".ideatorInfo").each(function(){
           $(this).show();
           $(this).dialog({
               autoOpen: false
           }).dialog('open');
        }
      });