I have two modals on a page. I only want one to refresh the parent page once closed. However, even if I add the code to do so both modals refresh the page after closing. Any idea why?
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
});
</script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#myModal2').removeData('bs.modal');
location.reload();
});
</script>
Modal 1 call:
<a data-toggle="modal" data-target="#myModal" href="modal_target.cfm?M=#MLink#" class="btn btn-#bg_color#">#CP#</a>
Modal 2 call:
<a data-toggle="modal" data-target="#myModal2" href="modal_AmendCP.cfm?M=#MLink#" title="view details" class="btn btn-primary">#Measure#</a>
Thanks for any help!
Both of your functions are being fired on the same event of modal closing on $(document.body).
You should change it to the be triggered on modal objects only:
<script>
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
});
</script>
<script>
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal2').removeData('bs.modal');
location.reload();
});
</script>
From the Bootstrap Documentation:
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
you should select exact modal to add Event Listener.
if selector is "document.body", event will fire for both.
in your code: function called for 'hidden.bs.modal' is only
function () {
$('#myModal2').removeData('bs.modal');
location.reload();
}
it replace
function () {
$('#myModal').removeData('bs.modal');
}
because it is declared later.
Related
I have a modal dialog made with bootstrap, like this:
<div class="modal fade" id="myid">
<div class="modal-dialog">
<div class="modal-content">
Loading...
</div>
</div>
</div>
And I make a javascript function like this:
$(document)
.ajaxStart(function () {
$('#myid').modal('show');
})
.ajaxStop(function () {
$('#myid').modal('hide');
});
But when I call some ajax function the modal appears but no hide. I put console.log in both functions (ajaxStart and ajaxStop) and it was called. when I replace ajaxStop as below, everything works, but not appears right.
$(document)
.ajaxStart(function () {
$('#myid').modal('show');
})
.ajaxStop(function () {
$('#myid').hide();
$('.fade').hide();
});
The main problema is when I call another modal within ajax, then I click in link, loading ajax appears, request is send to server, response returns, modal with data from request appears, but loading modal not hide.
How can I fix it?
You have to set a timeout.
That works for me:
setTimeout(function () { $("#myid").modal("hide"); }, 500);
Can you try binding to the ajax events like this:
$("#myid").bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
Instead of using $('#myid').hide(); in ajaxStop, use $('#myid').modal('hide');
Hide processing does not occur, probably because the closing is done without performing the modal opening operation. This worked for me;
setTimeout(() => {$('#ModalExpeditionSeal').modal('hide')}, 350)
you can use as the following:
$("#myid").modal().hide()
I already search this functionality to this url : How to trigger click on page load? but it's not working in my site.
Well, I have a page where a popup box appear when I click on a "project" link. here is the code :
$(".project").click(function() {
$("#first, #second, .allContactsContent").slideUp("slow", function() {
$("#third").slideDown("slow");
$("#contacts, #showSearchResult, #all_projects").hide();
});
});
I want to load this "project" click event when page is load, how can I do this ? What I am trying now is following :
<script type="text/javascript">
$("document").ready(function() {
setTimeout(function() {
$(".project").trigger('click');
alert(1);
},10);
});
</script>
here is a working fiddle
HTML
<div class="project"> </div>
You don't want a trigger a "click" event when nobody has clicked on anything. The event handler code should be refactored so a click event is not required:
function showAndHideStuff() {
$("#first, #second, .allContactsContent").slideUp("slow", function() {
$("#third").slideDown("slow");
$("#contacts, #showSearchResult, #all_projects").hide();
});
}
Then pass the function in as a ready event handler, as well as using that function as the click handler:
$(document)
.ready(showAndHideStuff)
.ready(function() {
$(".project").click(showAndHideStuff);
});
I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>
Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}
The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>
I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}
I am trying to create a simple edit function on a button. When the user clicks the the Edit Button (containing the following classes btn btn-primary btn-edit change-btn), the text will change to "Save", the readonly attributes will be removed on the input elements, and will have a class btn-success save-btn at the same time removing the edit-btn btn-primary class. So that when the user clicks the button again, it will update and save the data. Although it removes and successfully changes the classes, the save-btn function wont work even with a simple "hello" alert. Here is my code:
$(document).ready( function() {
$('.save-btn').click(function () {
alert('hello');
});
$('.edit-btn').click(function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
Is there something wrong of my execution of the javascript/jquery here?
It doesn't work because when you are adding the save-btn click handler that class isn't on the button yet. Try to use delegates.
$(document).ready( function() {
$(document).on('click', '.save-btn', function () {
alert('hello im clicked');
});
$(document).on('click', '.edit-btn', function () {
$('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
$('#firstname, #lastname').removeAttr('readonly');
});
});
You can use the parent of the button instead of the document.
I have a jQuery UI dialog whose content is populated using .load(), and then displayed. What I need to do is somehow bind to a button within the loaded HTML to close that dialog.
Code:
<div id="popup">
<div id="popupContent"></div>
</div>
<script>
$("#popupContent").load('some_URL_within_site_that_has_a_button', function () {
$("#popup").dialog("open");
});
</script>
I've tried a few different things, w/o success:
$("#popupContent").find(".CloseButton").on("click", function () {
alert("this worked");
});
$(".CloseButton").on("click", function () {
alert("this worked");
});
Any ideas on how to bind to the dynamically loaded control events?
You are close:
$("#popup")
.dialog("open")
.on("click", ".CloseButton", function() { ... });