Mam kilka danych MySQL w stole i każdy wiersz ma przycisk. Jeśli klikam przycisk, trybokrotny modal pojawi się w tym danych. Konwertuję DATA MySQL do JSON. TheView_data to przycisk dla każdego wiersza. Jak mogę opublikować identyfikator do danych.php i uzyskać JSON do stołu w modalnym? Próbuję to rozwiązać, ale jestem nowy w JavaScript i nie mogę rozwiązać tego problemu.

Faktycznie działa, ale jeśli otworzę jeden z modalnych, dane są wyświetlane w tablicy: Wpisz opis obrazu tutaj

Mam kilka danych MySQL w stole i każdy wiersz ma przycisk. Jeśli klikam przycisk, trybokrotny modal pojawi się w tym danych. Konwertuję DATA MySQL do JSON. TheView_data to przycisk dla każdego wiersza. Jak mogę opublikować identyfikator do danych.php i uzyskać JSON do stołu w modalnym? Próbuję to rozwiązać, ale jestem nowy w JavaScript i nie mogę rozwiązać tego problemu. Faktycznie działa, ale jeśli otworzę jeden z modalnych, dane są wyświetlane w tablicy:

Index.php

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body" id="moreInfo">
        <div class="table-responsive">  

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

        <script>
            $(document).ready(function(){
                $('.view_data').click(function(){  
                    var data_id = $(this).attr("id");  
                    $.ajax({  
                        url:"data.php",
                        method:"post",  
                        data:{data_id:data_id},  
                        success:function(data){  
                            $('#moreInfo').html(data);  
                            $('#dataModal').modal("show");  
                        }  
                    });  
                });

                $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var id = response[i].id;
                var table1 = response[i].table1;
                var table2 = response[i].table2;
                var conn = response[i].conn;

                var tr_str = "<tr>" +

                    "<td align='center'>" + table1 + "</td>" +
                    "<td align='center'>" + table2 + "</td>" +
                    "<td align='center'>" + conn + "</td>" +
                    "</tr>";

                $("#userTable").append(tr_str);
            }

        }
    });
});

        </script>

Dane.php.

$id=$_POST["data_id"];

    echo $html = '<table id="userTable" class="table table-bordered"><tr>  
                    <td align="center"><label><b>Data</b></label></td>  
                    <td align="center"><label><b>Connect to</b></label></td>  
                    <td align="center"><label><b>Description</b></label></td>
                </tr> 
                </table></div>';

    if ($conn){
    if(isset($id)) { 
    $sql=$conn->prepare("SELECT table1.table1_id AS id1, table1.data AS table1,
                                GROUP_CONCAT(DISTINCT(table2.data) SEPARATOR ', ') AS table2,
                                GROUP_CONCAT(DISTINCT(table1_table2.connection) SEPARATOR ', ') AS conn
                                FROM table1
                                LEFT JOIN table1_table2 ON table1.table1_id = table1_table2.table1_id
                                LEFT JOIN table2 ON table2.table2_id = table1_table2.table2_id
                                WHERE table1.table1_id=?
                                GROUP BY table1.table1_id");

            $sql -> bind_param('i', $id);
            $sql -> execute();
            $result = $sql -> get_result();
            $sql -> close();

            while($row= mysqli_fetch_assoc($result)){
                $id = $row['id1'];
                $table1 = $row['table1'];
                $table2 = $row['table2'];
                $conn = $row['conn'];

                $return_arr[] = array("id" => $id,
                    "table1" => $table1,
                    "table2" => $table2,
                    "conn" => $conn);
            }
    }
            echo json_encode($return_arr);
    }
0
user9484230 1 czerwiec 2018, 19:43

3 odpowiedzi

Najlepsza odpowiedź

Ta linia może być dobrym miejscem do rozpoczęcia

$('#moreInfo').html(data);

Tutaj wygląda jak data jest w JSON. Jednak $ .html (coś) nie formatuje automatycznie danych do tabeli, wygląda na to, że próbujesz utworzyć.

Oto dokumentacja na $ .html (coś). Oczekuje się, że coś "będzie ciągiem HTML, a nie macierzy JSON

Spróbuj zabrać data, przejdź przez każdy element i dołącz TD, TD itp. Do #moreinfo za pomocą innych poleceń jQuery.

Niektóre referencje.

0
Otomatonium 1 czerwiec 2018, 17:00

Możesz utworzyć funkcję, która wygeneruje tabelę HTML i używa go na oba żądania wywołania zwrotne:

$(document).ready(function(){
    $('.view_data').click(function(){  
        var data_id = $(this).attr("id");  
        $.ajax({  
            url:"data.php",
            method:"post",  
            data:{data_id:data_id},  
            success:function(data){
                generateTable(data, $('#moreInfo'));

                $('#dataModal').modal("show");  
            }  
        });  
    });

    $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            generateTable(response, $("#userTable"));
        }
    });
});

function generateTable(response, table){
    var len = response.length;

    for(var i=0; i<len; i++){
        var id = response[i].id;
        var table1 = response[i].table1;
        var table2 = response[i].table2;
        var conn = response[i].conn;

        var tr_str = "<tr>" +

            "<td align='center'>" + table1 + "</td>" +
            "<td align='center'>" + table2 + "</td>" +
            "<td align='center'>" + conn + "</td>" +
            "</tr>";

        table.append(tr_str);
    }
}
0
Zakaria Acharki 1 czerwiec 2018, 16:53

To bardzo proste. Możesz wysłać kompletną tabelę.

$.ajax({  
        url:"data.php",
        method:"post",  
        data:{data_id:data_id},  
        success:function(data){             
            var html_row ='';
            $.each(data, function(key, val){
              html_row += '<td>'+val.table1+'</td><td>'+val.table2+'</td><td>'+val.conn+'</td>';
             });
           var html_content = `<table id="userTable" class="table table-bordered"><tr>  
                   <td align="center"><label><b>Data</b></label></td>  
                   <td align="center"><label><b>Connect to</b></label></td>  
                   <td align="center"><label><b>Description</b></label></td>
               </tr>${html_row} 
               </table>`;    
            $('#moreInfo').html(html_content);  
            $('#dataModal').modal("show");  
        }  
    }); 
0
Shiva Manhar 1 czerwiec 2018, 16:58