JQuery Dialog with dynamic divs

Question

I'm building a web app, where in one page I have 6 divs that are generated dynamically, each div contain a hidden child div and a button, I want when the user click on the button of a given div, a dialog appears with the child of that div as a content .

Here's an MCVE on JS Fiddle (run the snippet to see the actual code) to help you understand (My code is very large and I can't share it for privacy reasons so I recreated the problem I'm facing .) :

<iframe width="100%" height="300" src="//jsfiddle.net/j7bbmLxn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Here's the link too if you want : https://jsfiddle.net/j7bbmLxn/

The problem as you can see i sthat when clicking on the first button it shows 4 dialogs of the 4 divs from the last one to the firts one .

I want to be able to make each button returns it's given div only . There's also another problem : when I close all dialogs and reclick on the first button nothing appears, why ?

Thank's for your time

Answer 1

I have updated your fiddle to provide with the answer.I have given each button a unique ID value and each associated div class name starting with the ID value of the button

Click here to see updated fiddle

Changed HTML

These are 4 divs generated via python templates by the server .
<div class = "movie">
<p>
This a movie 1
</p>
  <button id = "showMovieInfo1">
  Show dialog
  </button>
  <div class = "showMovieInfo1-info hidden">
    <p>
     Some Info here
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 2
</p>
  <button id = "showMovieInfo2">
  Show dialog
  </button>
  <div class = "showMovieInfo2-info hidden">
    <p>
     Some Info here 2
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 3
</p>
  <button id = "showMovieInfo3">
  Show dialog
  </button>
  <div class = "showMovieInfo3-info hidden">
    <p>
     Some Info here 3
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 4
</p>
  <button id = "showMovieInfo4">
  Show dialog
  </button>
  <div class = "showMovieInfo4-info hidden">
    <p>
     Some Info here 4
    </p>
  </div>
</div>

Changed JS code

$( function() {
            $('[id^=showMovieInfo]').click(function(){      
        $( "."+$(this).attr('id')+"-info" ).dialog();
        }); });

Answer 2

you need to change your HTML a bit, to give the buttons a class instead of an ID. IDs have to be unique. Your original code only sets the click listener on the first button

So, assuming that you've changed the buttons to have the class showMovieInfo here's the full working code that will do what you want

Basically I get the HTML of the div belonging with the button pressed and then open a dialog with that as content. The $dlg variable is used to store a reference to the open dialog such that you can close it.

var $dlg = undefined;
		$( function() {
		  	$(".showMovieInfo").click(function(){
        
        	var html = $(this).parent().find(".movie-info").get(0).outerHTML;
          if ($dlg){
          	$dlg.dialog("close");
          }
          $dlg = $(html).dialog();        
        })
  		} );

.hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">




These are 4 divs generated via python templates by the server .
<div class = "movie">
<p>
This a movie 1
</p>
  <button class = "showMovieInfo">
  Show dialog
  </button>
  <div class = "movie-info hidden">
    <p>
     Some Info here
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 2
</p>
  <button class = "showMovieInfo">
  Show dialog
  </button>
  <div class = "movie-info hidden">
    <p>
     Some Info here 2
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 3
</p>
  <button class = "showMovieInfo">
  Show dialog
  </button>
  <div class = "movie-info hidden">
    <p>
     Some Info here 3
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 4
</p>
  <button class = "showMovieInfo">
  Show dialog
  </button>
  <div class = "movie-info hidden">
    <p>
     Some Info here 4
    </p>
  </div>
</div>

Answer 3

try this. this shows how to create elements dynamically and work with those elements dynamically. see below working experience.

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">
.mychild
{
  width: 300px;
  height: 200px;
  border: 2px solid black;
  background-color: gray;
  color: white;
  font-family: monospace;
  margin: 50px;
  position: relative;
}

.but{
  position: absolute;
  bottom: 0;
}
.hideme{
  width:100%;
  height: 150px;
  background-color: red;
  color:white;
  text-align: center;
  font-size: 40px;
  font-family: Helvetica;
  position: relative;
  right: 0;
  border:2px solid white;
  box-shadow: 2px 3px 2px white;

}

</style>

<body>

<div class="mycontainer"></div>

</body>

<script type="text/javascript">

$(document).ready(function(){
  
  for(var i =0;i<6;i++)
  {
    var create_div = $('<div class="mychild" id="child'+i+'"><h1>This is movie'+i+'</h1><button class="but" id="button-'+i+'"">Show More Details</button><div style="display:none;" class="hideme" id="hid'+i+'">Some Information'+i+'</div></div>');
    $(".mycontainer").append(create_div);
    
  }

  checkclick();

});

function checkclick()
{
  $(".mycontainer .mychild .but").click(function(){

    $(".mycontainer .mychild .hideme").css({"display":"none"});
    var checkthe_id = $(this).attr("id");
    alert(checkthe_id);
    var splidid = checkthe_id.split('-');
    var the_value = splidid[1];
    
    alert(the_value);
    $("#hid"+the_value).css({"display":"block"})
  });
}

</script>

</html>

sorry for the ugly style. I concerned about your logic. hope this will help to you. try it and if you have any questions, please ask.

Answer 4

First problem. You have same ids for all buttons.

button id = "showMovieInfo2"

Second you have problem with dialog. You need to set ids for each dialog in order to work.

here is complete example

https://jsfiddle.net/j7bbmLxn/3/

Hope this helps.