pass parameters by Dialog jQuery-ui

Navigation
0

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>

As you can see I use foreach to display all my results, and I want to use Dialog to open a box for deletion, Dialog is working perfectly, however it only works on the first item, the others are not right, and I want to pass the item id by it to work with it inside Dialog, either to delete or edit, in what way can I do this? as you can see the Dialog div is inside the foreach. Obs: I'm very lay in JS

    
asked by anonymous 25.10.2018 / 17:39

2 answers

1

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

Continuing, in php you can pass some reference of your current $ list on the button, so that the function that opens the delete mode has access to which element you want to click:

In PHP, mount 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 can retrieve your element clicked through this: 

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

If you want to create dynamic interactions, you can not use id! So the interaction works only on the first element and the rest does not work anymore!

You should use a class in each element and get 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><scriptsrc="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>
    
25.10.2018 / 21:45
Does the prompt prompt change the value? Numbering of MYSQL lines showing wrong sequence [duplicate]