A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time. Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, I were not able to get it working.
In you case, this function binds my anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when I refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
it work fine first time when page is loaded.
<script type="text/javascript">
$('body').flipLightBox();
</script>
If you need to call Javascript/jQuery function in an UpdatePanel you need place them inside the pageLoad() function:
<script type="text/javascript">
function pageLoad() {
$('body').flipLightBox();
}
</script>
This will call it on every update of the UpdatePanel.
Related
I have a modal which automatically opens up after certain time period. The code to open the modal is written in a js file.
- xyz.js
var timehandle
//setTimeout function
timehandle=window.setTimeout("func()",x);
//function to open the modal
func(){
$('#modal').show();
}
i am clearing the timer from a jsp in order to avoid modal being opened.
- abc.jsp
<script>
head.ready(function() {
$(document).ready(function () {
window.clearTimeout(timehandle);
});
});
</script>
however, document.ready in the jsp is called earlier than the function to load the modal based on setTimeout. Can anyone tell me how do I make sure that the clearTimeout is called after the js file has been executed?
You should use <body onload="myFunction()"> since what you really want it to execute your js code after the page has loaded.
Execute a JavaScript immediately after a page has been loaded
Documentation
I have a filtered list of items using https://mixitup.kunkalabs.com/
see screen for example
The user then selects to add another action - this uses fancybox as a popup and shows the user the next image:
Once the user has added the data, the pages does a partial post back using an update panel. the code then calls a js function from the code behind to close the popup and then call the mixitup function to reinitialize the list as it now has a new item in it, but it doesn't work.
Here's the code behind that calls the js
ScriptManager.RegisterStartupScript(Me, [GetType](), "Load", "ReloadData();", True)
and here is the js that will be called:
function ReloadData() {
parent.jQuery.fancybox.close();
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
}
The fancybox closes but the mixitup never gets fired as it it never passes the docment.ready test meaning its not loaded so cant run the jQuery, but I am unsure why?
$(document).ready() fires after the document is finished rendering. So, if you already rendered your page and are now interacting with it, that ready statement no longer has any relevance, until you reload the page. So, don't put that inside a function.
Just call your mixItUp code inside the function block.
function ReloadData() {
parent.jQuery.fancybox.close();
$('#Container').mixItUp({layout: {display: 'block'}});
}
As a suggestion: if you're already using jQuery, don't bother with update panels. Just do your ajax calls through $.ajax.
You should place the following code outside the ReloadData() function.
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
document ready function should always be kept at the top level. Also please check if there is any JS error while loading page.
In my main window main.htm I have a div button that loads another htm file into a large div when clicked. I use .load() to achieve this:
$('#mainpanel').load("search.htm");
There is a function in "search.htm" called test() which only consists of alert("hi"); and I want this to load when search.htm is loaded into the div. I used the body onload tag and window.onload = test; and even $( document ).ready() but nothing works. It only works if I access search.htm on its own, but if I access it through main.htm it does't alert "hi". Is there a way to use .load() to load the page and a function? or is there a way to get the function the onload when I select the div that loads the page?
The onload / document ready will only fire once (when the parent document is loaded)
Either add a
<script type="text/javascript">
test();
</script>
to the end of the search.htm (so it's executed after everything else in the page has been parsed) or call test(); from the parent page after the load completes (via a callback)...
$('#mainpanel').load("search.htm", function(){
test();
});
It depends which page you want to be responsible for executing the function. In the latter case, the parent page needs to know the name of the function in search which may or may not fit your design.
Using window.onload or $( document ).ready() doesn't make sense because the document is most likely already loaded when you run that function.
You can pass a callback to .load and access the function inside there. The callback is executed when the other page is loaded:
$('#mainpanel').load("search.htm", function() {
test();
});
Of course test must be in global scope for this to work.
As always, it's advisable to the read the documentation of the methods you are using: https://api.jquery.com/load/.
I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
I am using an asp.net update panel to refresh the content on a page when a menu item is selected.
Within the content that is updated are images which have a javascript reflection function which is triggered with the following line of code:
window.onload = function () { addReflections(); }
This runs fine when the page is first loaded but not when a menu item is selected and the update panel is run.
On previous projects using jquery code I have replaced document.ready with function pageLoad but there is no document.ready on this page.
Like this:
<script>
// ASP.NET AJAX on update complete
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args) {
// your code here, eg initToolTips('/Common/images/global/popup3.gif');
});
Basically, it's because that event isn't triggered by an update panel refresh.
There are ways to achieve this behaviour though, Ajax.Net has an EndRequestHandler function that you can hook into.
Here's a good example:
http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/
i think u should use
function pageLoad(sender, arg) {
if (!arg.get_isPartialLoad()) {
// in first load only
}
//every time the update panel refreshed
}
Regards
Take a look to this event:
http://msdn.microsoft.com/en-us/library/bb383810.aspx
window.onload is fired when the entire page is loaded. UpdatePanel uses an AJAX approach, so whenever it's updated and round trip ends, the page remains loaded and only a portion of this has been updated.
In other words, you need to do that "when a request to the server ends".