將文本綁定到模式框中的特定ID

我有一個while循環，它從mysql數據庫中回顯3個隨機行。每行包含一個id和一個description。在我的前端，每一行都顯示了id，以及一段非常簡短的描述。每行都有一個按鈕，用於調用引導模式框，您可以在其中閱讀更長的描述。這是它是如何看起來像：將文本綁定到模式框中的特定ID

我while循環，它輸出的隨機ID和描述，當你點擊「更多」工作正常彈出。但在modalbox中，我需要綁定屬於id的描述（fx id：319需要在modalbox中回顯testtestte）。

我試着按照下面這個好的解釋來解決這個問題： Alternate Solution with Ajax and Bootstrap Modal Event Listener，我得到了很多。

我該如何在我的file.php中創建一個select語句來輸出描述，該語句屬於我單擊的單個按鈕的ID？

我在這裏發佈的代碼很長。我試圖縮短一些，但我認爲一切都是相關的。如果沒有，請給我一個頭。

select_shuffle.php

<!-- Everything is working in this file --> 
<?php 
    $sql = "SELECT id, description FROM stores ORDER BY RAND () LIMIT 3"; 
    $res = $mysqli->query($sql); 

    //print($res); 
    if ($res->num_rows > 0) { 
    // output data of each row 
     while($row = $res->fetch_assoc()) { 
      echo "id: " . $row["id"]. "<br>" . 
       "Description: " . $row["description"]. "<br><br>". 
       '<span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span>';    
     } 
    } else { 
    echo "0 results"; 
    } 
?> 
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"><center>Heading</center></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-data"> 
        //Here Will show the Data 
       </div> 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script> 
$(document).ready(function() {  
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event 
     var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button 
    $.ajax({ 
     type : 'post', 
     url : 'file.php', //Here you will fetch records 
     data : 'post_id='+ id, //Pass $id 
     success : function(data){ 
     $('.form-data').html(data);//Show fetched data from database 
     } 
    }); 
    }); 
}); 
</script>

下面的文件，我不知道該如何選擇我的ID綁定的描述？

file.php

<?php 
include 'dbconnection.php'; 

if($_POST['id']) { 
    $id = $_POST['id']; 

    $sql = "SELECT id, description FROM stores"; 

    echo $sql; 

    else { 
    echo "0 results"; 
} 

?>

來源

2017-04-18 McDuck4

請問你的問題不清楚。你想達到什麼目的？ –

謝謝你的評論。我編輯了我的問題。所以基本上我的問題是：我怎樣才能在我的file.php中創建一個select語句來輸出描述，它屬於我點擊的單個按鈕的ID？ – McDuck4

<button class='read-button' type='button' id="button-<?php echo $row['id'];?>">Read more</button>

現在當你使用jQuery選擇，像

$('.read-button').click(function(){console.log($(this).attr('id');});

將輸出類似按鈕-319。您也可以在按鈕中設置其他數據屬性，例如data-id=319，並使用jQuery attr()來獲取該數據。關鍵是你需要知道哪個按鈕被點擊並通過了id。

來源

2017-04-18 20:49:46 TurtleTread

所以你想要一個數組，其中的值作爲id和描述的值？ – TurtleTread

你應該解釋你正在嘗試做什麼。你點擊按鈕並在模式框中顯示說明？兩種方式來做到這一點。你可以從你已經在html中的描述中獲得它，或者通過傳遞id來做ajax調用描述。所以問題變成了如何通過點擊按鈕上的id。您可以通過爲每個按鈕分配id來完成此操作。 – TurtleTread

是的，當按鈕的id爲319時，我需要在同一行中獲取該描述。所以每個ID都有不同的描述。 jQuery選擇器應該放在哪裏？在select_shuffle.php？那file.php呢？ – Julie24

將文本綁定到模式框中的特定ID

回答

相關問題