title: Pass Image ID to Modal with AJAX / JSON Data
body: <p><strong>Update:</strong></p>
  
  <p>The duplicate answer link posted deals with binding click events to dynamically generated content - which helped, thanks. But I'm still unsure of how to pass the <code>$row</code> ID of dynamically generated content to a dynamically generated modal using a click event within an AJAX statement?</p>
  
  <p>So essentially, where/how does the <code>$row</code> id go in:</p>
  
  <pre><code>&lt;a href="#dataModal"&gt;&lt;img class="photog-headshot" 
  src="images/'+ data.Surfboards[row].Surfboard.imageName + '" alt="' + 
  data.Surfboards[row].Surfboard.imageName + '"&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>I'm working with code from the tutorial below and incorporating it into my existing project and I'm stuck. I'm not triggering the <code>.view_data</code> from the <code>href</code> on line 18 in <code>surfboard.js</code> so when a surfboard placeholder image is clicked at the bottom of of the page on <a href="http://nalu.live/equipment.php#dataModal" rel="nofollow noreferrer">Nalu.live/equipment</a> nothing from the database appears in the modal. The functionality I want is working in the 'Surfboard Name' table above the image grid. Click on the "View" button to see it in action.</p>
  
  <p>I'm also getting a weird Unrecognized expression console log error?</p>
  
  <p><strong>Helpful links:</strong>  </p>
  
  <ul>
  <li><a href="https://www.webslesson.info/2016/09/php-ajax-display-dynamic-mysql-data-in-bootstrap-modal.html" rel="nofollow noreferrer">Tutorial: PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal</a> </li>
  <li>Link to my live project: <a href="http://nalu.live/equipment.php#dataModal" rel="nofollow noreferrer">Nalu.live/equipment</a></li>
  <li>Link to my <a href="https://github.com/SDillon001/nalu_html" rel="nofollow noreferrer">github repo</a> with all of the project code
  except for the DB connection</li>
  <li>Screenshot of <a href="https://postimg.cc/image/6y12v4kmv/" rel="nofollow noreferrer">mySQl database</a> I'm working with</li>
  </ul>
  
  <p><strong>Main Project Files for this Issue:</strong></p>
  
  <p><code>equipment.php</code>,
  <code>select.php</code>,
  <code>surfboards.php</code>,
  <code>surfboard.js</code></p>
  
  <p><strong>Notes:</strong></p>
  
  <p>A working example is on <a href="http://nalu.live/equipment.php#dataModal" rel="nofollow noreferrer">nalu.live.equipment</a> in the "Surfboard Name" table on the page below the carousel. If you click on the 'View' button a modal opens with the corresponding name of the surfboard row and image that are loaded from the SQL database. The code to generate the modal is in <code>select.php</code>.</p>
  
  <p>I'm trying to incorporate the same functionality from the table into the image grid below it so I can remove the example table. When the user clicks on a surfboard placeholder image the corresponding modal opens with info that matches the database ID for that image. </p>
  
  <p>The image grid is being generated by JSON/JS in <code>surfboards.js</code>. The <code>surfboards.php</code> file is creating an associative array and echoing JSON. The JS in <code>surfboards.js</code> is looping through the data and appending a <code>div</code> to <code>#board_table</code> in <code>equipment.php</code>. </p>
  
  <p>The modal link is on line 18 of <code>surfboard.js</code>. I can't sort out the syntax to trigger the <code>.view_data</code> function to include the info from the DB. I've added the <code>class="view_data"</code> to the <code>href</code> but that's obviously wrong.. I'm unsure how to open the modal <em>and</em> trigger the <code>click()</code>.</p>
  
  <p><strong>Image Grid HTML</strong>
  - added <code>class=".view_data"</code> to bind click event:</p>
  
  <pre><code>      &lt;div class="flexbox_container"&gt;
          &lt;section class="view_data" id="board_table"&gt;
            &lt;!-- surfboards.js will publish surfboards from database here --&gt;
          &lt;/section&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>Modal Code for Both Surfboard Table and Placeholder Images:</strong></p>
  
  <pre><code>&lt;!-- Ajax Database Modal Start --&gt;
        &lt;div id="dataModal" class="modal fade"&gt;  
          &lt;div class="modal-dialog"&gt;  
            &lt;div class="modal-content"&gt;  
              &lt;div class="modal-header"&gt;  
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;  
                &lt;h4 class="modal-title"&gt;Surfboard Details&lt;/h4&gt;  
              &lt;/div&gt;  
              &lt;div class="modal-body" id="surfboard_detail"&gt;  
              &lt;/div&gt;  
              &lt;div class="modal-footer"&gt;  
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;  
              &lt;/div&gt;  
            &lt;/div&gt;  
          &lt;/div&gt;  
        &lt;/div&gt; 
  </code></pre>
  
  <p><strong>JSON Parser - surfboard.js:</strong></p>
  
  <pre><code>//gets the JSON from our surfboards.php
  $.getJSON("surfboards.php", function (data) {
    //loop through each surfboard in the JSON file and append a &lt;div&gt; with the surfboard information
    $.each(data.Surfboards, function (row) {
        $("#board_table").append(
          '&lt;div class="photog-group clearfix"&gt;&lt;figure class="cap-bot"&gt;&lt;a href="equipment.php?id=' 
          + data.Surfboards[row].Surfboard.id 
          + '"&gt;&lt;a href="#dataModal" class="view_data"&gt;&lt;img class="photog-headshot" src="images/'
          + data.Surfboards[row].Surfboard.imageName + '" alt="'
          + data.Surfboards[row].Surfboard.imageName
          + '"&gt;&lt;/a&gt;&lt;figcaption&gt;&lt;p&gt;Board Name: ' 
          + data.Surfboards[row].Surfboard.boardName 
          + '&lt;br&gt;Year Shaped: ' 
          + data.Surfboards[row].Surfboard.year + '&lt;/p&gt;&lt;/figcaption&gt;&lt;figure&gt;&lt;/div&gt;');
    });
  });
  </code></pre>
  
  <p><strong>AJAX View Data Trigger:</strong></p>
  
  <pre><code>// 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);
           }  
       });  
    });  
  });
  </code></pre>