-2

Ok what I have is a MySQL Database and I am using PHP to output it to my browser in an HTML Table. Each row has an edit button, and I have been able to pass one mysql value (lead_id) to the modal, but cannot figure out how to get the rest of the data and be able to CRUD inside the modal. I have read a lot of different articles and forums about this and they all appear to use some form of .ajax in the jQuery. I have tried all of these jQuery functions but have been unsuccessful. Maybe the don't work with 3.1.1? IDK.

If someone could help me out with the .ajax call and the jquery part it seems to be my biggest struggle. I also am okay with php, but I am not sure what the php file would look like for the .ajax call.

Below is my code.

<?php
/* mysql connect info */
$mysqlhost = '';
$mysqlusername = '';
$mysqlpassword = '';
$mysqldb = '';
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website | Login</title>
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet">

<?php    
$mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb);

if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="SELECT * FROM leads";
$result=mysqli_query($mysqli,$sql);

// Associative array
$row=mysqli_fetch_assoc($result);
?>


<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
  <h1>
    <a class="navbar-brand" href="#">
    <span class="glyphicon glyphicon-th-list" aria-hidden="true"> 
    </a>
  </h1>
 </div> 
 </div>
 </nav>

 <header id="header">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-12">
 </div>
 </div>
 </div>
 </header>

 <!-- Beginning of Sections -->
 <section id="main">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-12">
 <div class="container">

 <table class="table table-striped">
 <thead>
  <tr>
    <!--<th>Lead Number</th>-->
    <th>First Name</th>
    <th>Last Name</th>
    <th>Moving Date</th>
    <th>eMail</th>
    <th>Phone</th>
    <th>From</th>
    <th>To</th>
    <th>Moving Size</th>
    <!--<th>IP Address</th>-->
    <!--<th>Source</th>-->
    <th>Submission Time</th>
    <th>Actions</th>
   </tr>
  </thead>
  <tbody>


 <?php
 while($row=mysqli_fetch_assoc($result))
 {
 echo "<tr>";
 /*echo "<td>" . $row["lead_id"] ."<td>";*/
 echo "<td>" . $row["customer_first_name"] ."</td>";
 echo "<td>" . $row["customer_last_name"] ."</td>";
 echo "<td>" . $row["moving_date"] ."</td>";
 echo "<td>" . $row["customer_email"] ."</td>";
 echo "<td>" . $row["customer_phone"] ."</td>";
 echo "<td>" . $row["customer_from_zip"] ."</td>";
 echo "<td>" . $row["customer_to_zip"] ."</td>";
 echo "<td>" . $row["customer_moving_size"] ."</td>";
 /*echo "<td>" . $row["customer_ip_address"] ."<td>";*/
 /*echo "<td>" . $row["lead_handle"] ."</td>";*/
 echo "<td>" . $row["sent_date"] ."</td>";
 echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"] ."\" id=\"". $row["lead_id"] ."\">Edit</button></td>";
 echo "</tr>";
 }
 echo "</tbody>";
 echo "</table>";

 ?>

</div>
</div>
</div>
</div>


</section>

</div>






  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- this is google jquery library-->

  <script src="js/jquery-3.1.1.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/my.js"></script> 
  <!-- This is the functionality of the login screen -->

  <!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library-->


<!-- MODAL BEGIND -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
  </div>
  <div class="modal-body" id="thebody">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This is where I feel my problem is:

 $('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); 
  var id = button.data('id');
  var modal = $(this)
  $.ajax({
      type: "POST",
      url: "selecta.php",
      data: {id:id},
      success: function(data){
        $('.modal-body').html();
        $('#myModal').modal("show");// this triggers y
  modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

})
})
})

</script>
</body>
</html>

This is the result I get when the jQuery $.ajax function is run For some reason the lead number does not pass to the modal

Now when I comment out the jQuery, the modal does load with the lead number like this picture shows. enter image description here

 $('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); 
  var id = button.data('id');
  var modal = $(this);
  /*$.ajax({
      type: "POST",
      url: "selecta.php",
      data: {id:id},
      success: function(data){
        $('.modal-body').html();
        $('#myModal').modal("show");// this triggers y*/
  modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

})
4
  • What is the problem? Any errors?
    – Tony
    Mar 30, 2017 at 2:04
  • you shouldn't use mysqli_fetch_assoc() twice. Mar 30, 2017 at 2:07
  • didn't you already ask this stackoverflow.com/q/43011591/1415724 and accepted an answer? what's different from this one? Mar 30, 2017 at 2:13
  • Fred originally I thought if I could get a unique value from the record row into the modal I would be able to run some kind of query within the modal to CRUD the record. That was my first question how to use the data-* attributes. I have been struggling since then to get the rest of the data in. Now that I was able to get the record id in the modal, I cant figure out how to get the rest of the data in, and interact with MySQL form within.
    – Chris W.
    Mar 30, 2017 at 19:30

1 Answer 1

0

I cannot see any issue except that you have missed ";" at end of

var modal = $(this)
modal.find('.modal-title').text('Lead Number ' + id)
  modal.find('.modal-body input').val(id)

...and some closing brackets. Are you getting any error? You can share screenshots or results.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.