Bootstrap - Modal only shows first element
I am using Bootstrap to build this webpage. This page contains a table that I use modal
to show more details about the selected item.
My problem is that all the buttons in the table only redirect to the first detail of the first item. I was thinking about naming an id and turning it into an array, but it doesn't work (or I did it wrong).
Here's some sample code to give you an idea:
<?php
(loop){
$itemtopic=$loop['item'];
$data=$loop['data'];
?>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-left:5px;" title="New User"><?php echo $itemtopic; ?></button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<?php echo $data; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
} /* END OF LOOP */
?>
How can I show the relevant data with the selected item, not just the first detail of the first item?
source to share
you don't need to loop the modals, you need to change the data before displaying the modal. try the following code:
<script>
//Please visit http://www.nokiflores.com
$(document).ready(
function() {
$("button.btn").click(
function(e) {
var parent_div = $(this).closes("div");
var val = $(parent_div).find("input[name=data]").val();
$("#modal_body").html(val );
$("#myModal").modal();
});
} );
});
</script>
<?php $_data = array(); $_data[] = array('id'=>1,'data'=>"data1", 'item'=>"item1"); $_data[] = array('id'=>2,'data'=>"data2", 'item'=>"item1"); ?>
<?php foreach($_data as $data ) { ?>
<div class="data">
<input type="hidden" value="<?php echo $data['data'] ; ?>" name="data" />
<!--please notice that i remove the modal functions in this button-->
<button class="btn btn-primary" id="<?php echo $data['id'] ; ?>" style="float:right; margin-left:5px;" title="New User"><?php echo $data['item'] ; ?></button>
</div>
<?php } ?>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div id="modal_body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
source to share
@Logon Wayne, a little bit vague as to whether you are doing this so that you can confirm that you are printing X buttons with X modals and that they have a unique match ID for each pair?
For example:
<?php
$rows = array('1'=>"afasdf",'2'=>"fagagadfg");
foreach($rows as $key=>$data):
?>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $key;?>" style="float:right; margin-left:5px;" title="New User">Create New User</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<?php echo $data; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
The key is a unique identifier, otherwise it will find and display the first modal header #myModal.
You can only use 1 modal if you used ajax to replace the content on every upload, which is not what you are doing and really doesn't seem necessary unless you have a really huge amount of html printing due to this loop, and in this case pagination would be the logical next step anyway.
:)
source to share