We Keep Coding

call Action twice in same view

enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")

Close Bootstrap Modal After a Period of Time

I have a gif image which spins in circle. I put that in the bootstrap modal. It is my progress bar. I would like the modal to appear for about 5 seconds and then it will close itself. Here's my code:
<?php
function progressBar($total){
sleep($total);
return "modal";
}
?>
<!-- Modal ProgressBar -->
<div class="modal fade" id="progressBarCenter" tabindex="-1" role="dialog" aria-labelledby="progressBarCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="progressBarLongTitle">Your Script Is Executing...</h5>
<button type="button" class="close" data-dismiss=<?php progressBar(5); ?> aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="webapps/images/progressBar.gif">
</div>
</div>
</div>
</div>
It sort of work. As in, it sleeps for 5 seconds then it loads the whole page. Not what I want at all. A user would click on a button to startup the modal, no problem there. Once it is active, it need to sleep for 5 sec, and then it close itself. As in, it closes the current or active modal.
How would I go about doing this?

You can use the following script to close a Bootstrap Modal after 5000 ms:
<script>
$(document).ready(function () {
$("#buttonID").click(function(){
setTimeout(function() {
$('#progressBarCenter').modal('toggle');
}, 5000);
});
});
</script>

I did a debugger in IE and realize that you can't use a sleep function in javascript cause it doesn't exist. You need to use the setTimeout() function instead. Thank you #Chukwuemeka Inya

PHP as you have coded will not work.
Try use Javascript click() fuction for a button and the sleep() function you have used:
$(document).ready(function(){
$('button#ajaxSubmit').click(function(e){
setTimeout($total);
$('#progressBarCenter').modal('toggle');
});
});
The first line of this JS will wait for the entire page to load before let the code to run. The second line will run sleep() after the user click the form button, and after that, toggle the modal.
And add a id to your <button>, like the one below:
<button type="button" class="close" aria-label="Close" id="ajaxSubmit">

Bootstrap modal on hidden does not trigger

Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.

for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})

Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});

prevent bootstrap modal from opening when a button is clicked

I have a page with several bootstrap modals with:
data-toggle="modal" data-target="#modal-12345"
The problem is, I have an entire table row that is clickable, like
<tr data-toggle="modal" data-target="#modal-12345">
The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.
I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.
I need something like this
<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>
But targeting this:
data-toggle="modal"
I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run e.stopPropagation().
BOOTPLY
jQuery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($(button).hasClass('no-modal')) {
e.stopPropagation();
}
});
HTML:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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 Header</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>
As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.
Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.

$('#myModal').on('show.bs.modal', function (e) {
return e.preventDefault();
});
OR
<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
$(target).modal('show');
}
</script>
e.stopPropagation(); or e.preventDefault(); it will not work if you going reopen modal or if multiple modal used in your page.

Here's a JSFiddle to demo what I'm about to explain: http://jsfiddle.net/68y4zb3g/
As MattD explained and demonstrated, preventing a modal from launching is fairly easy, though his example applies to standard modal application. Since you use the .btn in your script code, I assume you applied it to all your buttons in question. I've also assumed that you kept the modal code similar to that on the Bootstrap demo page. If you provide your actual table code, I can tailor it specifically to what you already have.
$('tr .btn').on('click', function(e) {
e.stopPropagation();
});
td {
border: 1px #000000 solid;
padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
<tr data-toggle="modal" data-target="#modal-12345">
<td>Launch modal 12345</td>
<td><button id="btn-12345" class="btn">12345</button></td>
</tr>
<tr>
<td colspan="2" class="modal fade" id="modal-12345" 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">
12345
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Note: I substituted the DIV that would normally act as the outer wrapper of the modal for the TD and added a tidbit of CSS to make it a little easier to see the separation in content.
By using a class that is applied to all the buttons, you don't have to write a function for every single ID. Having said that, I recommend using a custom class as your trigger. .btn is a standard class within the core of Bootstrap, so try using .modalBtn, to prevent any potential for conflict with legitimate Bootstrap functionality.
Hope this helps. ^^

Remove following line from your code:
data-toggle = "modal"
Then, in your function once your validation is done, write following code:
$('#myModal').modal({
show: 'true'
});

Bind a function to Twitter Bootstrap Modal Ajax Complete

I use this for Bootstrap Modal:
<a href="one/url" data-target="#add-follow-up-modal" role="button" class="btn" data-toggle="modal">
Load
</a>
<div id="add-follow-up-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-body">
<p>Please wait…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Now, i want to run a function when ajax load completed.
Any idea?

By default bootstrap modal does not trigger an event for ajax load, you can have a look at the list of triggered events at the modal section of the bootstrap documentation.
What you can do, however is to write your own function that loads the content to the modal's body via ajax, and attach a .done() to it.

remove href from your link
in ajax success add href="one/url" to your "a" attributes and then trigger click on your link