Bootstrap modal load php

Question

I have the table, it display as name, last name, edit certain user, how would I do this?

I was using the facebox and now shifting to bootstrap;

in my admin.php page

<script type="text/javascript">
$('.load-modal').on('click', function(e){
    e.preventDefault();
    $('#myModal2').modal('show');
});
</script>
.... some code ....
echo '<td><a class="load-modal" href="editadminprofile.php?id='.$row['id'].'" data-toggle="modal1" data-target="#myModal2" title="Click To View Orders">Edit Profile</a></td>';

It just takes me to the target page instead of opening the modal.

EditAdminProfile.php

<?php
include('../connect.php');
$id=$_GET['id'];
$result = mysql_query("SELECT * FROM admin where id='$id'");

while($row = mysql_fetch_array($result))
  {
    $idnum=$row['idnum'];
    $password=$row['password'];
    $fname=$row['fname'];
    $lname=$row['lname'];
    $mname=$row['mname'];
    $birth=$row['birth'];
    $status=$row['status'];
    $gender=$row['gender'];
  }
?>
<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal1">&times;</button>
                <h4 class="modal-title"><center>Create new administrator</center></h4>
            </div>

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

Answer 1

1. data-toggle and data-dismiss should have the value modal.

2.Your modal section should be in your admin.php page.

admin.php

<script type="text/javascript">
$('.load-modal').on('click', function(e){
    e.preventDefault();
    $('#myModal2').modal('show');
});
</script>
.... some code ....
echo '<td><a class="load-modal" href="editadminprofile.php?id='.$row['id'].'" data-toggle="modal" data-target="#myModal2" title="Click To View Orders">Edit Profile</a></td>';

<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
              <!-- HTML will be inserted here -->
        </div>
    </div>
</div>

3. Bootstrap will load editadminprofile.php into <div class="modal-content"></div>, so you have to move your .modal-header codes inside editadminprofile.php

editadminprofile.php

<?php
include('../connect.php');
$id=$_GET['id'];
$result = mysql_query("SELECT * FROM admin where id='$id'");

while($row = mysql_fetch_array($result))
  {
    $idnum=$row['idnum'];
    $password=$row['password'];
    $fname=$row['fname'];
    $lname=$row['lname'];
    $mname=$row['mname'];
    $birth=$row['birth'];
    $status=$row['status'];
    $gender=$row['gender'];
  }
?>

    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><center>Create new administrator</center></h4>
                </div>

If I were you I will first set href="#" to test if the modal works (a blank modal), then put the href back and see if editadminprofile.php is correctly loaded.

Hope this helps.

Answer 2

Assuming you haven't included editadminprofile.php, and I think it's throwing error as expected parameters are not passed.

When you click on Edit Profile button, and expect to see Modal. At the same time Bootstrap looks for Modal body on the same page, and in your case it's not found.

editadminprofile.php?id='.$row['id'] seems your Modal is dynamic, so you can call ajax to get modal on same page.

• You additionally need a div on same page.

  <div id="ajax-response"></div>

• Add a class on all anchors, on which you need to show modal. (you might have it multiple, as it seems to be dynamic.)

  echo '<td><a class="load-modal" href="editadminprofile.php?id='.$row['id'].'" data-toggle="modal1" data-target="#myModal2" title="Click To View Orders">Edit Profile</a></div></td>';

• Write ajax which calls, which is binded to .load-modal class, will trigger onclick, and on success after putting modal body in ajax-response div, you need to show modal using $('#myModal').modal('show'); (change #myModal with your actual modal id)

  $('.load-modal').on('click', function(e){
      e.preventDefault();
      var url = $(this).attr('attr');
  
      $.ajax({
         url: url,
         type: 'post',
         async: false,
         success: function(response){
              $('#ajax-response').html(response);
              $('#myModal').modal('show');
         }
      })
  });
  

UPDATE There is a problem with the placement of your script. Problem? class load-modal was not added to the document before it called $('.load-modal').

Move your script down, anywhere after <td><a class="load-modal" ..., or if you don't want to change position, you may wrap it in jQuery(document).ready(function()){. See your updated code snippet below:

.... some code ....
echo '<td><a class="load-modal" href="editadminprofile.php?id='.$row['id'].'" data-toggle="modal1" data-target="#myModal2" title="Click To View Orders">Edit Profile</a></td>';

<script type="text/javascript">
$('.load-modal').on('click', function(e){
    e.preventDefault();
    $('#myModal2').modal('show');
});
</script>