pass parameters through jQuery-ui Dialog

Question

Good afternoon, I have the following code:

<?php
        $list = $conn->prepare("SELECT * FROM produtos");
        $list->execute();
            echo '<div id="pd_list">';
                echo '<div class="head">';
                    echo '<p class="title" style="margin-top:8px; margin-left:5px; float:left; width:800px; margin-bottom:3px;">Produtos</p>';
                    echo '<form>';
                        echo '<input type="text">';
                        echo '<button><img src="../image/lupa.png" width="24"></button>';
                    echo '</form>';
                echo '</div>';
                echo '<div id="items">';
                    foreach($list as $result):
                        echo '<div id="item">';
                            if($result['img'] != null){
                                echo '<img src="../uploads/produtos/'.$result['img'].'" width="215">';
                            }else{
                                echo '<img src="../image/fundo-produto.jpg" width="215">';
                            }
                            echo '<p style="margin-bottom:4px; float:left; margin-left:5px; padding-left:5px; padding-right:5px; text-align:center; text-transform: uppercase; width:215px; height:40px;">'.$result['nome'].'</p>';
                            echo '<p style="margin-top:0px; margin-bottom:4px; float:left; margin-left:5px; padding-left:5px; padding-right:5px; text-align:center; width:215px; font-size:20px;">R$ '.$result['valor'].'</p>';
                            echo '<div class="opc">';
                                echo '<button id="link-excluir" class="ui-button ui-corner-all ui-widget">';
                                    echo '<span class="ui-icon ui-icon-newwin"></span>';
                                echo '</button>';
                                echo '<div id="excluir">';
                                  echo '<p>Deseja Excluir?</p>';
                                echo '</div>';
                            echo '</div>';
                        echo '</div>';

                    endforeach;

                echo '</div>';
                echo '<div class="holder"></div>';
            echo '</div>';

    ?>

with the following jQuery code, using jQuery-ui Dialog:

<script>
$(document).ready(function() {
   var opt = {
    autoOpen: false,
    modal: true,
    width: 550,
    height:350,
    title: 'Excluir'
    };
   $( "#excluir" ).dialog(opt);

   $( "#link-excluir" ).click(function( event ) {
        $( "#excluir" ).dialog(opt).dialog( "open" );
        event.preventDefault();
    });

 $( "#link-excluir, #icons li" ).hover(
    function() {
        $( this ).addClass( "ui-state-hover" );
    },
    function() {
        $( this ).removeClass( "ui-state-hover" );
    }
);
});
</script>

there as you can see using foreach to display all my results, and I want to use Dialog to open a box for deletion, the Dialog is working perfectly, however it only works in the first item, the others is not right, and I want to pass the item id by it to work with it within Dialog, whether to delete or edit, how can I do that? as you can see the Dialog div is inside the foreach. BS: I am very JS layman

Answer 1

First tip: Never use more than one element with the same ID. The element ID has to be unique, when you need more than one item use its class repeating in the other elements.

Anyway, in php you can pass some reference from your current $list on the button, so that the function that opens the delete modal has access to which element you are trying to click:

in PHP mounts the button:

echo '<button class="link-excluir ui-button ui-corner-all ui-widget" data-ref="'.$result['id'].'">';
echo '<span class="ui-icon ui-icon-newwin"></span>';
echo '</button>';

In javascript you rescue your element clicked through this:

$( ".link-excluir" ).click(function( event ) {
  var ref = $(this).data('ref');
  //prossiga com sua lógica
});

Answer 2

If you want to create dynamic interactions, you cannot use id! So the interaction works only on the first element and the rest no longer works!

You must use a class in each element and take the required data using $(this). Parent().

Here is an example with Buttons where I call a dialog for each element

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
    <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( ".dialog" ).on( "click", function() {
        var mensagem = $(this).attr("attr");
       $( "#dialog" ).html( mensagem);
       $('#dialog').dialog('option', 'title',mensagem);
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>

</head>
<body>
 
<div id="dialog" title="Teste">
  <p></p>
</div>
 
<button  class="dialog" id="opener" attr="TESTE 1">Open Dialog 1</button>
 <button class="dialog" id="opener" attr="TESTE 2">Open Dialog 2</button>
 <button class="dialog" id="opener" attr="TESTE 3">Open Dialog 3</button>
 <button class="dialog" id="opener" attr="TESTE 4" >Open Dialog 4</button>
 <button class="dialog" id="opener" attr="TESTE 5">Open Dialog 5</button>
 <button class="dialog" id="opener" attr="TESTE 6">Open Dialog 6</button>
 
 
</body>
</html>