I'm trying to load the data from ajax inside a bootstrap modal like this:
function edit_company_modal(id){
$.get('/panel/companies/edit/'+id+'/', function(data) {
$('#editCompanyModal').modal('show');
$('#editCompanyModal').html(data);
}
);
return false;
}
But what is happen is that it is trying to open a modal inside the other, and nothing is show... but the response is right (checked at firebug)
that is how it looks after click event:
<div class="modal fade in" id="editCompanyModal" aria-labelledby="Edit Company" aria-hidden="false" style="display: block;">
<div class="modal fade" id="editCompanyModal" aria-labelledby="Edit Company" aria-hidden="true">
How should I do something like that?
Thanks
You need to insert the data into the modal's body container.Since we don't have your HTML let's take a general modal structure and apply the jQuery to fill the modal's body after the ajax call. Notice since you are using data-target for the button element, you no longer need to use the .modal('show')
HTML
<button id="editCompany" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#editCompanyModal">Launch demo modal</button>
<div class="modal fade" id="editCompanyModal" tabindex="-1" role="dialog" aria-labelledby="editCompanyModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
jQuery
$('#editCompany').click(function() {
//Get value of id
// id = ???
$.ajax({
url: '/panel/companies/edit/'+id+'/',
type: 'GET',
success: (data, status, xhr) ->
$('#editCompanyModal .modal-body').html(data);
});
});
Related
How do I add a bootstrap modal in the the javascipt on click. So far I was only able to alert ("hello") on click. How do i prompt out a modal box?
graph.on("click", function (params) {
var node = params['nodes'][0];
displayInfo=false;
if(node!=null){
console.log('node:'+ params['nodes'][0]);
x = params["pointer"]['canvas']['x'];
y = params["pointer"]['canvas']['y'];
displayInfo=true;
lastNode = nodes.get(node);
lastClick = params['pointer'];
//console.log(node);
}
alert("hello");
//add boostrap modal here
});
You don't need an onclick.
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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">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>
</div>
</div>
If you need an onclick event anyhow, use it like below:
graph.on("click", function (params) {
$('#myModal').modal('show');
}
Reference: http://getbootstrap.com/javascript/#modals
Create modal HTML and assign id for it, for example "my_modal"
http://getbootstrap.com/javascript/#live-demo
show the modal at the js using the code:
$("#my_modal").modal('show');
First make the modal pop up div then , Configure and use .modal('show')
For eg:-
You can also use onClick call for jquery here.
<div id="modalDiv">
//some content
</div>
In jquery use ,
$("#modalDiv").modal('show');
Check this http://getbootstrap.com/javascript/#live-demo
You can use id like
$("#modal-id").modal("show");
Or you can use class name $(".modal-class").modal("show");
I have 5 modal forms in a page. And I want to get the Id of the currently opened one.
I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.
Is there some way I can determine which modal the user has open currently open and then I will get the id of that.
You can use the shown.bs.modal event to get the current open modal.
Modal Events
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
Here is an example
$('.modal').on('shown.bs.modal', function (e) {
var crntModalId = "current modal id is: " + $(this).attr('id');
$('.output').text('');
$('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="output"></div>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
Launch modal one
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-One" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
Launch modal two
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-Two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
</div>
</div>
It's very simple, with bootstrap modal event's
To get any attribute value from the modal trigger button you can use $(e.relatedTarget)
To get the modal attribute value you can use $(e.currentTarget)
In your case, you can get the Opened modal id with
$('.modal').on('shown.bs.modal', function(e) {
var modalid = $(e.currentTarget).attr('id');
});
Fiddle
A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.
I have 2 modals on a page, each modal have different behaviors, one modal is transformed into a page content if the page is bigger than a specified width. To enable that I have used jQuery to hide its modal-backdrop but the problem is that the script will also hide the backdrop for the 2nd modal which has normal behavior. How can I assign a different ID for each modal-backdrop?
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch modal with modal-backdrop id 1
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal with modal-backdrop id 2
</button>
<!-- Modal1 modal-backdrop id 1-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
</div>
</div>
<!-- Modal2 modal-backdrop id 2-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
</div>
</div>
You can make use of bootstrap modal's .on('show.bs.modal' event to make changes to your backdrop accordingly like one below:
$("#myModal1,#myModal2").on('show.bs.modal', function (e) {
var that=$(this);
var id=that.attr('id'); //get the id of button which got clicked
setTimeout(function(){
$('.modal-backdrop').attr('data-id',id);
//You can either assign it as data-* attribute or add it as class to backdrop like
//$('.modal-backdrop').addClass(id);
});
});
Now accordingly you can use this to make changes according to modal's behavior.
DEMO
This will solve your problem.
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static" >
I have a bootstrap modal, which has table with attribute contenteditable = trueinside of it (table is created dynamically with js). I'd like to set up a neat feature - if user presses cancel then the changes in table will be dismissed. I understand that i could do this with writing a function for different states and then calling out the previous state in case of cancel. I'm just thinking that is there a quicker-better-faster approach?
I did some searching and found one link which had similar issue, but the approach and result there are a bit different from mine which means that it didn't work for me.
Here's my code - parts of it are in Estonian, i don't think in general code is necessary for this question but i'll still provide:
<div class="modal fade" id="ajamasinModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
</div>
<div class="modal-body">
<div id="changeablevoor"></div>
<button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
Try the following approach ( view comments inline ):
Html
<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
//...
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
JS
// Add hidden event of the modal
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
cancelModal(); // Call the function to cancel the modal after hiding of the modal
})
// Cancel the modal
function cancelModal() {
// Re-generate content with default values
}
More information about these events of Bootstrap Modal can be found here in the Docs of Bootstrap: Bootstrap Modal Events
I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">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" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});
$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.
Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">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>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>