2

Had such great success with my last question, thought I'd try another.

I'm building a "dashboard" for the company I work for, a printing facility. This dashboard will list all of the current jobs in progress, jobs completed, etc. (It will really make life better for everyone there).

I have all of my customer information pulled from a MySQL Database using a PHP query and displayed into a DataTable using a PHP while loop. I have an edit button at the end of each row that opens up a Modal box, displaying and allowing the printer to enter information and update the database.

This was working, but I began to think... all is well with only a handful of customers plugged in, but once we have 1,000+ customers, each given a Modal box (from the PHP while loop) it's going to get overwhelming.

Can anyone explain to me, if it is even possible, to have a single Modal Box code on the page that pulls the exact customer data into it when the link is clicked, launching the box.

Button Launching The Modal (This is in a PHP while loop):

<a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#modal_id\"
href=\"display=" . $row['id'] . "\">
<i class=\"icon-question-sign icon-white\"></i>  
</a>

Modal Code Itself (NOT in PHP while loop):

<div class="modal hide fade" id="modal_id">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">×</button>
       <h3>Project Details</h3>
   </div>
   <div class="modal-body">

       ID is <?php echo $display ?>

   </div>
   <div class="modal-footer">
       <a href="#" class="btn btn-primary" data-dismiss="modal">Save Changes</a>
       <a href="#" class="btn" data-dismiss="modal">Close</a>
   </div>
</div>

The text inside just reads: ID is The variable isn't being passed through the buttons href.

Any solutions?

4

2 回答 2

1

I would say the most straightforward approach is AJAX.

  1. Create an endpoint that you can pass an id to that will display the relevant projct info (something like yoursite/projects/5 would return data about project with ID of 5)
  2. Use AJAX to send the ID to that endpoint and retrieve back the user data
  3. Put that data into the modal as it's being displayed.

Change your links to buttons

<button class="project-button btn btn-info" data-toggle="modal" data-target="#modal_id" data-project-id="<?=$row['id']?>">
  <i class="icon-question-sign icon-white"></i>  
</button>

Example of the AJAX call

var modal_body = $('#modal_id .modal-body');
$('.project_button').on('click', function() {
  var project_id = $(this).data('projectId');
  $.get('/project/', { id: project_id }, function(data) {
    // Populate modal
    modal_body.html(data);
  }
}

Obviously you would need to create the other page that creates the html that would get returned to be displayed. There are other things you could do like display a loading animation while the data gets loaded into the modal. But this should be a good starting point fo you.

于 2013-03-14T01:37:49.697 回答
0

Best way would be using AJAX, so that you can pass id to another page of your choice

I found same problem being solved here with full explanation: http://thecomputerstudents.com/web/using-bootstrap-modal-ajax-import-data-mysql/

于 2014-12-21T16:50:32.697 回答