Issue passing table row data to bootstrap modal - javascript

I've gone through several examples but for some reason I'm unable to get data from my table to pass to my modal. I could use some expert guidance.
Table row is dynamically populated and looks like this:
<tr data-toggle="modal" data-target="#myModal" style="cursor: pointer" data-id="<?php echo $site_info['site_id']; ?>">
<td><?php echo $site_info['site_id']; ?></td>
...
The modal and JS are below:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Site Information</h4>
</div>
<div class="modal-body">
<div id="siteDetails">asdf</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(event) {
var getId = $(event.relatedTarget).data('id');
$("#siteDetails").html('Selected: ' + getId);
});
});
</script>
How can I make sure that the #siteDetails div gets updated?
Thanks!

Related

pass an item id to from card to modal

so i have a 3 cards that has its value taken from database
i want to get the id of the particular card that was clicked and send it to modal so i can echo it in the modal
i tried sending it to the button trigger as data-id=< ?php $card_id ?> but that doesn't seem to work
php & mysql codes to fetch from database
<div class="container">
<div class="title">
<h5><?php echo $card_id; ?></h5> <h1><?php echo $card_title; ?></h1>
<div class="body">
<?php echo $card_name; ?>
<button type="button" data-toggle="modal" data-target="#myModal" name="button" data></button>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1><?php echo $card_id; ?></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You could look into using Ajax for this.
Keep data-id="<?php echo $card_id; ?>" in your button.
Create a php page to process the ID to be echoed:
if ($_POST['cardid']) {
$id = $_POST['cardid'];
echo $id;
}
Use a modal event to push the ID to your modal's body using a class declaration:
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function(e){
var cardid = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: 'record.php',
data: 'cardid='+ cardid,
success: function(data){
$('.fetched-data').html(data);
}
});
});
});
Put the class declaration in your modal body where you want the ID to show:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1 class="fetched-data"></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Display text into div not working

The bootstrap editor is working good, but I want to display the entered data into a div with the id: enclousere. It works fine but the data should display like this:
Enclouser:first enclousersecond enclouser3rd enclouser
But it displays like:
Enclouser:<div><ol><li>first enclouser</li><li>second enclouser</li><li>3rd enclouser</li></ol></div>
My model:
<div class="modal fade" id="myModale" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add Enclosure</h4>
</div>
<div class="modal-body sol">
<textarea id="textareaIDe" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="savedatae" data-dismiss="modal" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
MY JQuery:
$('#myModala').on('shown.bs.modal', function () {
$('#textareaIDe').focus();
})
$("#savedatae").click(function(){
var message = $('.sol .Editor-editor').html();
alert(message);
$('#enclousere').text(message);
//alert(message);
});
Tag used to display:
<div class="fsize" id="enclousere"></div>
Use
.html(message);
Instead of
.text(message);

Passing information from a while loop to a bootstrap modal

I've currently got a while loop that echos all the information in my database onto a table. In this table there is a button that can be clicked to link to a modal.
<a data-toggle="modal" data-target="#myModal2" class="active"><img src="img here"></a>
This then links to a modal with the code:
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<?php echo $row['name']; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What I'm trying to do is print out some of that information from the while loop into that modal e.g.($row['name']). How can I do this? Can this be done through PHP or does it have to be JS?

Multiple Bootstrap Modals one after another

I am new to bootstrap. I have a situation where I have to Show a Bootstrap Modal, When I click any button on that Modal I'll have to show another modal below that 1st Modal (Not Stackable). If I close the 1st Modal 2nd Modal has to go up to replace the position of 1st Modal.
Is it possible ?
Any help ?
You can listen to the "close" event of the first model to open the second model:
Bind a function to Twitter Bootstrap Modal Close
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Manually open the second model:
$('#otherModel').modal('toggle')
An example:
Your HTML code:
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- 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" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</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 -->
<div class="modal fade" id="myModal2" 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" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</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 -->
Javascript:
$('#myModal').on('hidden.bs.modal', function() {
$('#myModal2').modal("toggle");
});

how to enable backdrop shadow of the modal?

I have created a bootstrap modal for registration and login.I found that, when modal pops up background does not get shadowed automatically as it should do while i am using bootstrap modal.I am not able to find the cause of this.
I want the background to be a bit darken when modal is opened so that user can focus on modal contents only.I also want modal to position to the center of the screen. So please can anyone tell me how to do this?
following is my modal code ?
<!-- Modal -->
<div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
<div class="modal-content " style="background: white;width:700px;">
<div class="modal-header" id ="reg_modal_header" style="">
<button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text"> </h4>
</div><!--/header-->
<div class="modal-body" style="background: white;" id="regmodal_body">
</div><!-- /end modal body-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Your code seems to work fine.
<a data-toggle="modal" href="#regestration" class="btn btn-primary btn-large">Launch demo modal</a>
<div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
<div class="modal-content " style="background: white;width:700px;">
<div class="modal-header" id ="reg_modal_header" style="">
<button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text"> </h4>
</div><!--/header-->
<div class="modal-body" style="background: white;" id="regmodal_body">
</div><!-- /end modal body-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
checkout the fiddle http://jsfiddle.net/x79kS/
Check that you have not included jquery dialog.
Refer http://getbootstrap.com/2.3.2/javascript.html#modals for the documentation

Categories