My problem is that following code works fine (dialog show once on startup), but when I navigate to another page (with standard ajax activated), and then navigate back to the first page, the dialog is showing again (and then in a loop manner when I click "dismiss").
What am I doing wrong?
Code looks like that:
$(document).on('pageinit', '#pageindex', function(event) {
setTimeout(function(){
$('#dialog').click();
$('#dialog').remove();
},1000);
});
For a quick fix, replace .on with.one. However, normally pageinit event should fire once only, so there must be something causing it to fire multiple times.
The following code is executed once on single/multipage page and multiple pages approach:
$(document).on('pageinit', '#pageindex', function (event) {
$(this).off(event);
setTimeout(function () {
$('#dialog').click();
$('#dialog').remove();
}, 1000);
});
Related
How I run trigger click after page FULLY loaded
I have a checkbox and want to trigger a click.
my code is simple
jQuery(document).ready(function(){
jQuery('.wcpf-input-checkbox[value="hoodie"]').trigger('click');
});
but it does not work, I tes the script in console after fullu loaded, my script work
I also to try to check if the checkbox ready. it does not work.
jQuery(document).ready(function(){
jQuery('.wcpf-input-checkbox[value="hoodie"]').ready(function(){
jQuery(this).click();
});
});
How do I trigger click to work?
If you attach click action with this method:
$(yourobj).on("click",function() {...});
then you can change it to:
$(document).on("click", 'yourobj', function(event) {...});
But I don't know, you haven't posted all of your code.
The issue for me trigger clicks only can be run after the page fully loaded so I bind my code after window load() and set timeout
Here I solved it
jQuery(window).on('load', function() {
setTimeout(function(){
//your code here
console.log('All assets are loaded');
jQuery('.wcpf-input-checkbox[value="hoodie"]').trigger('click');
jQuery('.wcpf-button-action-filter').trigger('click');
}, 1000);
})
I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?
Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});
On my page, I initialize Bootstrap tooltips this way
<script>
$(document).ready(function () {
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
});
</script>
This question suggests that any time an event happens you have to reload tooltips. However, across various ajax page updating there are probably 50+ events to account for. (This site is using asp.net web forms and ajaxcontroltoolkit)
How can I universally reinitiate tooltips every time an event takes place? -- or is there a simpler solution to solving this problem?
You need a javascript reference to Sys.WebForms.PageRequestManager
Take a look at the beginRequest/endRequest events. Since asp.net ajax is replacing your html you'll need to rebind the bootstrap widgets after asp.net is finished with its ajax.
Try this:
<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();
//func to rebind tooltip
function reBind () { $('[data-toggle="tooltip"]').tooltip(); }
$(document).ready(function () {
$(function () {
reBind();
prm.add_endRequest(reBind);
});
});
</script>
Be warned some bootstrap widgets will break if they are bound twice, so use your discretion; some elements might need to have their events monitored to see if they are bound more than once.
I am building a mobile app, using JQuery mobile, and in the front page let's call it page-1 contains navigation buttons to different pages let's call one of them page-2
Below are page-1
$(document).ready(function () {
$("body").pagecontainer({
defaults: true
});
$("#page-2").click(function () {
$("body").pagecontainer("change", "page-2.html", {
reload: true
});
$(document).ready(function () {
function_in_page - 2.init();
});
});
page-2 has the following
var function_in_page = {
init: function () {
alert('first-1');
$("#button-1").click(function () {
alert('second-1');
});
});
So what is happening that I get the alert of "First-1" but when I click the button with ID (button-1) nothing happens , any advise?
First of all, .pagecontainer() is auto-initialized with default settings, so you don't need to initialize it.
Secondly, refrain from using .ready() to add listeners in jQuery Mobile and stick to pagecontainer events instead. The latter events are fired whenever jQM framework loads a page and/or navigates to it via Ajax, especially in Single Page Model. Unlike .ready() which fires one time only when framework is initialized.
There are many methods to control your webapp using jQuery Mobile in a Single Page Model using pagecontainer events. The safest way is to give each page a unique ID in order to determine which event is omitted on which page. Another note, you need to know that no matter how many external pages you have, only two pages will remain in DOM; homepage and another external page you have navigated to from homepage.
To add listeners, use pagecreate event, it is equivalent to .ready() and can be delegated to specific pages.
<div data-role="page" id="home">
$(document).on("pagecreate", "#home", function () {
$(".selector").on("click", function () {
/* run code */
});
});
That event will fire once per page, but note that it will fire again on any external page loaded via Ajax. Therefore, you should remove previous bindings before adding new ones, by using .off(). Otherwise, attached listeners will multiple whenever you load an external page via Ajax.
<div data-role="page" id="second">
$(document).on("pagecreate", "#second", function () {
$(".selector").off("click").on("click", function () {
/* run code */
});
});
Keep all your custom JS code in head of all pages, although the code will be loaded once in first run. jQuery Mobile loads first page div of each external page, anything outside that div is entirely neglected.
Back to your code above, here is how it should look like. Give each page an ID, and use them to add click listeners. Let's assume home is homepage and second is page-2.html.
$(document).on("pagecreate", "#home", function () {
$("#btn").on("click", function () {
$.mobile.pageContainer.pagecontainer("change", "page-2.html");
});
});
Now, page-2.html is visible. Add a click listener to button-1.
$(document).on("pagecreate", "#second", function () {
$("#button-1").off("click").on("click", function () {
alert("page 2");
});
});
Demo
Read more about pagecontainer events.
If the script in page-2 is executed to early the button might not exist yet. Try wrapping it in a document.ready
$(document).ready(function(){
var function_in_page={init:function(){
alert('first-1');
$("#button-1").click(function(){
alert('second-1');
});});
});
I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.
you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});