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

I have updated your fiddle with your requirement.Check if you want this functionality. jsfiddle.net/j7bbmLxn/1 — Kiran Muralee
– Kiran Muralee, Commented Aug 27, 2016 at 12:07

Kiran Muralee · Accepted Answer · 2016-08-27 12:43:05Z

2

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

edited Aug 27, 2016 at 12:43

answered Aug 27, 2016 at 12:11

Kiran Muralee

2,0802 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anis Souames Over a year ago

All answers works, and so does yours, but the syntax is not as clean as the other answer, it doesn't matter who answered first, it matter who wrote a good answer, this is a childish and beginners attitude ;) .

Kiran Muralee Over a year ago

Gladly accept the criticism and thanks for the up vote :).I believe I made a decent answer in quick time

Mykola Borysyuk · Accepted Answer · 2016-08-27 12:23:35Z

1

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.

edited Aug 27, 2016 at 12:23

answered Aug 27, 2016 at 12:17

Mykola Borysyuk

3,4211 gold badge22 silver badges24 bronze badges

3 Comments

Anis Souames Over a year ago

Thank's, that's exactly what I was looking for !

Kiran Muralee Over a year ago

@Anis Souames I accept Mykola Borysyuk answer but I gave an answer first :)

Mykola Borysyuk Over a year ago

Cool. Glad to help.

caldera.sac · Accepted Answer · 2016-08-27 12:36:56Z

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.

coding-dude.com · Accepted Answer · 2016-08-27 12:40:59Z

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>

Collectives™ on Stack Overflow

JQuery Dialog with dynamic divs

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related