I can get the pagecontainer change function to work inside a function that is called with a button click. But for some reason the pagecontainer change function isn't working when I run the code outside of a function. I do a check to see if a user is logged in and then want to do a page change/redirect if they aren't logged in.
<script>
//works
function test() {
$(':mobile-pagecontainer').pagecontainer('change', '#event-list-page');
}
//doesn't work
var user = window.localStorage.getItem("user");
if (user == null){
alert('not logged in. Should redirect.');
$(':mobile-pagecontainer').pagecontainer('change', '#event-list-page');
}
</script>
What is the best solution for this problem? Should I just do a javascript redirect? Or do I need to wait for the page to load all the way or something?
You should intiate the $.mobile.pageconatiner first, example:
$.mobile.pageContainer.pagecontainer({ defaults: true });
I think that the jQuery mobile has to have the entire page loaded first because it does a bunch of funny things pre-loading pages and doing ajax transitions and things. It's not a simple redirect like setting window.location. If you pt it in a document.ready block it will work.
$( document ).ready(function() {
$.mobile.pageContainer.pagecontainer('change', '#event-list-page');
});
Related
How can i define more than one onload function (but different!)
in the same js file,
for ex,
file.js:
//---on load forpage1
$( document ).ready( handler ){
do something one
}
//---on load for page2
$( document ).ready( handler ){
do something else
}
and import it in both of the 2 pages:
for ex:
page1:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="file.js"></script>
</head>
page2:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="file.js"></script>
</head>
I'm assuming you ask this because you want to execute different code on the other page.
You could for example check location.href to see which page is currently being called.
More usual though is to use server side scripting to determine the current page and refer to the javascript accordingly.
Edit for an example:
$(function () {
var page = window.location.pathname;
if (page == "/index.html") {
// code here
}
else if (page == "/contact.html") {
// other code here
}
});
It depends what you're trying to achieve. If you want several functions to run when your page loads, the code in your post is almost correct:
$(document).ready(function() {
console.log("Function 1 running");
});
$(document).ready(function() {
console.log("Function 2 running");
}
You can also pre-define these functions if you want, and pass them to your $(document).ready() call:
function handler_1() {
console.log("Handler_1 is running");
}
function handler_2() {
console.log("Handler_2 is running");
}
$(document).ready(handler_1);
$(document).ready(handler_2);
And you can even use the jQuery shortcut $():
$(handler_1);
$(handler_2);
But if you want only one function to run when the page loads - depending on which page loaded - you'll need to take another approach. You could define all your code in script.js, and load init_page1.js from page 1, init_page2.js from page 2, etc. Those init files would call whichever setup function is appropriate for the page.
Alternatively, you could add a data attribute on your body tag indicating what page it's on, and have your $(document).ready() call the correct handler. Something like this:
$(document).ready(function() {
var page_type = $('body').data('page-type');
if (page_type == 'home') {
handler_1();
} else if (page_type == 'profile') {
handler_2();
}
});
And then, in your HTML file:
<body data-page-type="profile">
Possibly the neatest solution, though, is to have the callback functions determine whether they're relevant to the page. That way you can re-use them wherever you like. So your script would look something more like this:
function handler_1() { // Only for home page
if ($('body').data('page-type') != 'home') {
return;
}
console.log("I'm the handler_1 function");
}
function handler_2() { // Only for profile page
if ($('body').data('page-type') != 'profile') {
return;
}
}
$(handler_1);
$(handler_2);
Really, though, if you can avoid coding this into your JavaScript, you should. It's better to only include scripts that you know are required for that particular page to function.
In addition to $( document ).ready, which is called after the DOM is fully loaded for the current HTML file, including all images, the $(window).load is another method to detect DOM readiness that is not fired until all sub-elements, like iframes have been loaded and are available for use.
As to your original question, you can define as many $( document ).ready functions as you like; they are executed in the order they are found.
You can have multiple blocks of $(document).ready – but it won't solve your problem as they'll all be called once the DOM is loaded.
I'd recommend you to take a look at Paul Irish's DOM-based Routing.
Your question was very vague but I'm assuming you want multiple items to be called upon the page being loaded, in which the first example is.
document.ready(function(handler){
/*Do thing one*/
/*Do thing two*/
});
But if you mean for them to be called with different scenarios then you would use the handler passed in to check the status of the document and call a different item.
document.ready(function(handler){
if(handler==bar)
//Do thing one
else if(handler==foo)
//Do thing two
else
//Do thing three
});
Is there a way to make __doPostBack wait for the page to be loaded before it goes to the server?
Sometimes our users click controls at the top of the page before the page is fully loaded/rendered, which results in an incomplete form being sent to the server.
I am wondering if there is something I can do with Sys.WebForms.PageRequestManager (add an event handler?, configure it?) that would check if the page is loaded and if it is not it would wait for it?
This is an ASP.NET 3.5 app.
Note: A possible solution is make the controls call some "__doPostBack_WhenLoaded" method that would do the check and add the __doPostBack call to the onLoad event if needed. I think thought there would be a better way :).
I wasn't able to do what I wanted by extending the PageRequestManager, so here comes a quick and dirty solution I ended up with. I created my own __doPostBack function, which does the checking and then call the actual function directly or adds it to the queue to be processed on load:
var WebPageFullyLoaded = false;
$(function() {
WebPageFullyLoaded = true;
});
var oldDoPostBack = __doPostBack;
__doPostBack = function (eventTarget, eventArgument) {
if (!WebPageFullyLoaded) {
$(function () {
oldDoPostBack(eventTarget, eventArgument);
});
}
else {
oldDoPostBack(eventTarget, eventArgument);
}
}
Can you use jQuery? If so, you could enable the page controls once the document is ready (finished loading). jsfiddle.net/qtg94
Page Control
<input type="submit" name="name" id="controlID" disabled="true">
Javascript
$(document).ready(function(){
$('#controlID').prop('disabled', false);
});
I am trying to parse my URL in document.ready() so that I can get the id of the current page and dynamically populate the page with results from an AJAX call. The problem I am running into is due to the fact that I think that 'document.URL' references the previous page until 'document.ready()' has fully executed.
How do I get around this? I have researched document.load(), and auto-refreshing the page once, but I cannot seem to get this to work. I have been working on this since yesterday.
Here is my code:
$( document ).ready( function(){
var id = document.URL.substring(document.URL.lastIndexOf('?')+4);
if(!loadObject.executed) {
loadObject(id);
loadObject.executed = true;
} else {
$('#page-full').on('pagecreate', loadObject(id));
}
});
Try to use document.location.href instead of document.URL.
Hope this helps.
I'm trying to use jQuery to make a slightly more sophisticated page refresh. With a meta refresh, if a page fails to load once, it won't load again. I am trying to make something that will repeatedly try to load--if it fails to load once, it will try again the next time so that if the last load is successful I will see a fresh version of the page, whether or not there were intervening faults.
My code at present is:
<script language="JavaScript" type="text/javascript" src="/include/jquery.js">
</script>
<script language="JavaScript">
var delay=5*1000;
function load(){
setTimeout(load, delay);
jQuery("#content").load("calendar_internal.cgi?days=40", function(){
jQuery("#preload").hide("slow");
});
delay = 15*60*1000;
}
jQuery("#content").load("calendar_internal.cgi?days=40", load);
</script>
So far as I can tell, this is functioning as a noop. It doesn't refresh.
How can I get this to work at least at a basic level so it refreshes but one bad refresh doesn't mean that I have to reload if I want to see the page at all?
--EDIT--
What I have now is apparently working (after light testing):
<script language="JavaScript">
var placeholder = jQuery('<div></div>');
function load(){
setTimeout(load, 15*60*1000);
placeholder.load("logistic_ajax.cgi", function(){
if (placeholder.html())
jQuery('#content').html(placeholder.html());
})
}
load();
</script>
var $placeHolder = $('<div />');
$placeHolder.load(yourURL,function() {
if ($placeHolder.html()) {
$("#content").html($placeHolder.html());
}
});
or something like that. This way you are not doing all or nothing type of thing. If something messes up with the HTML coming back, you can check in your "if" condition. Not sure the particulars of the response so you would need to hash that out on your own or let me know more detail.
Cheers.
Why this code doesn't work:
$(window).resize(function() {
document.location.reload();
});
Try the following code:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
Reference:
http://forum.jquery.com/topic/anyone-know-how-to-refresh-reload-page-on-browser-resize
The resize event fires many times (depending on the browser) as you resize...there's probably a much better way to solve your problem (at least, I can't imagine that constantly reloading the page would be an optimal solution...).
For example if you're doing this to get your $(document).ready() code to run again? In that case for example you can use a named function. For example:
function myFunc() {
//do stuff
}
$(myFunc); //run on DOM ready
$(window).resize(myFunc); //run when resizing