CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
satyanshu
satyanshu

Reputation: 89

Jquery UI dialog showing only once

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">[email protected]</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">[email protected]</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">[email protected]</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/

Upvotes: 0

Views: 113

Answers (3)

shershen
shershen

Reputation: 9993

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.

Upvotes: 1

fuyushimoya
fuyushimoya

Reputation: 9813

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');
   });
 });

Upvotes: 1

Cr1xus
Cr1xus

Reputation: 437

this this: 

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

Upvotes: 0

Related Questions