CODEWITHSUNDEEP
phpjqueryhtmljquery-ui-dialog
sam
sam

Reputation: 39

jQuery dialog Box is not working

jQuery Dialogue box is not working properly for dynamic data from database. I want to open dialogue box for multiple data fetched from database. But the problem is that when I click any of the link to open particular dialogue box for particular id of database table record but it opens all the previous id's dialogue boxes also.

For example if I click on id 2 dialogue box it opens 1 and dialogue boxes simultaneously. I want some download in dialogue box also.

jQuery code:

$(document).ready(function() {
$(function() {
$(".dialog").dialog({
autoOpen: false,
maxWidth:600,
        maxHeight: 500,
        width: 600,
        height: 300,
        dialogClass: 'main-dialog-class',
                modal: true 


});
$("a.To").on("click", function() {
$(".dialog").dialog("open");
});
});

PHP code:

<table>

<?php foreach($tList as $ts) : ?>
                     <div class="dialog" title="Dialog Form">

<?php  
$sql1="select * from table where ID='".$ts["ID"]."'" ;
$result1=mysqli_query($link,$sql1);
while($rows=mysqli_fetch_array($result1)){

echo $rows["t1"];

?>
<a href="Download.php?filename=<?php echo $rows['Path'] ;?>"  target="_blank"><?php echo $rows['Name'];?></a><br/>
<?php
}
?>

</div>
                        <tr>
                            <td style="display:none">
                                <?php echo $ts["ID"]; ?>
                            </td>
                            <td>
                                <a href="#" class="To" >
                               <?php echo $ts["Title"]; ?></a>
                            </td>
                            <td>
                                <?php echo $ts["t1"]; ?>
                            </td>
                            <td>
                                <?php echo $ts["t2"]; ?>
                            </td>
</tr>
</table>

Upvotes: 0

Views: 364

Answers (2)

Sablefoste
Sablefoste

Reputation: 4182

For starters, your HTML looks like you are nesting the dialog box in a <div> inside the table, but not in a cell (that should be an error in the browser).

But in your javascript, you need a way to specifically identify each dialog box. The error you are reporting makes sense; by choosing $('.dialog'), you are saying "pick every element on the page with a classname "dialog".

I think the easiest way is to change your JavaScript to:

$("a.To").on("click", function() {
    $(this).find(".dialog").dialog("open");
});

and then move the dialog box into a cell in each row in your PHP.

Otherwise, you may choose a unique identifier for each dialog box, and rename them to an id, not a class.

EDIT

Yes, you can add the unique id in PHP for the selectors, add the same id in data and then find them with a jQuery selector.

In your PHP:

<td>
  <a href="#" class="To" data-dialogfinder='<?php echo $ts["ID"]; ?>'>
   <?php echo $ts["Title"]; ?>
  </a>
</td>

Then, in you jQuery:

$("a.To").on("click", function() {
    var diabox='#'+$(this).data("dialogfinder");
    $(diabox).dialog("open");
});

Upvotes: 1

Fran Arjona
Fran Arjona

Reputation: 118

I don't know if that is the full code, but in what you have posted you have missing the endforeach; (to close the foreach() : opened at the beginning).

Upvotes: 0

Related Questions