Question

更新：

发布的重复答案链接涉及将点击事件绑定到动态生成的内容-这很有帮助，谢谢。但是我仍然不确定如何使用AJAX语句中的click事件将动态生成的内容的$row ID传递给动态生成的模式？

从本质上讲，$row ID进入哪里/如何进入：

<a href="#dataModal"><img class="photog-headshot" 
src="images/'+ data.Surfboards[row].Surfboard.imageName + '" alt="' + 
data.Surfboards[row].Surfboard.imageName + '"></a>

问题：

我正在使用下面教程中的代码，并将其合并到我的现有项目中，我陷入了困境。我没有从.view_data的第18行的href触发surfboard.js，所以当在页面Nalu.live/equipment的底部单击冲浪板占位符图像时，数据库将出现在模式中。我想要的功能正在图像网格上方的“冲浪板名称”表中。单击“查看”按钮以查看其操作。

我还收到一个奇怪的无法识别的表达式控制台日志错误？

有用的链接：

Tutorial: PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal
链接到我的实时项目：Nalu.live/equipment
使用所有项目代码链接到我的github repo 除了数据库连接
我正在与mySQl database合作的屏幕截图

此问题的主要项目文件：

equipment.php， select.php， surfboards.php， surfboard.js

注释：

在旋转木马下面页面的“冲浪板名称”表中的nalu.live.equipment上有一个工作示例。如果单击“查看”按钮，则会打开一个模态，其中带有从SQL数据库加载的冲浪板行和图像的相应名称。生成模态的代码在select.php中。

我试图将表中的相同功能合并到其下方的图像网格中，以便删除示例表。当用户单击冲浪板占位符图像时，将打开相应的模态，其中包含与该图像的数据库ID匹配的信息。

图片网格由JSON / JS在surfboards.js中生成。 surfboards.php文件正在创建关联数组并回显JSON。 surfboards.js中的JS遍历数据并将div附加到#board_table中的equipment.php。

模式链接位于surfboard.js的第18行。我无法整理语法来触发.view_data函数以包含来自数据库的信息。我已将class="view_data"添加到href中，但这显然是错误的。.我不确定如何打开模式并触发click()。

图像网格HTML -添加了class=".view_data"来绑定点击事件：

      <div class="flexbox_container">
        <section class="view_data" id="board_table">
          <!-- surfboards.js will publish surfboards from database here -->
        </section>
      </div>

冲浪板表和占位符图像的模式代码：

<!-- Ajax Database Modal Start -->
      <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
          <div class="modal-content">  
            <div class="modal-header">  
              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <h4 class="modal-title">Surfboard Details</h4>  
            </div>  
            <div class="modal-body" id="surfboard_detail">  
            </div>  
            <div class="modal-footer">  
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
            </div>  
          </div>  
        </div>  
      </div>

JSON解析器-surfboard.js：

//gets the JSON from our surfboards.php
$.getJSON("surfboards.php", function (data) {
  //loop through each surfboard in the JSON file and append a <div> with the surfboard information
  $.each(data.Surfboards, function (row) {
      $("#board_table").append(
        '<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id=' 
        + data.Surfboards[row].Surfboard.id 
        + '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
        + data.Surfboards[row].Surfboard.imageName + '" alt="'
        + data.Surfboards[row].Surfboard.imageName
        + '"></a><figcaption><p>Board Name: ' 
        + data.Surfboards[row].Surfboard.boardName 
        + '<br>Year Shaped: ' 
        + data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
  });
});

AJAX查看数据触发器：

// Function that responds to 'View' button onclick on equipment.php and 
inserts information from database into modal id="dataModal" 
$(document).ready(function(){  
  $('.view_data').click(function(){  
     var surfboard_id = $(this).attr("id");  
     $.ajax({  
         url:"../select.php",  
         method:"post",  
         data:{surfboard_id:surfboard_id},  
         success:function(data){  
             $('#surfboard_detail').html(data);  
             $('#dataModal').modal("show");
             console.log(data);
         }  
     });  
  });  
});

使用AJAX / JSON数据将图像ID传递给模态

0 个答案: