I'm using JQuery Mobile's recommended multi-page approach to separate out pages. What I don't know (I'm a bit of JQuery and Javascipt noob) is how to control which page loads first.
I want to run a check to local storage for the user's credentials, which I can do, if they exist they can use the web app as usual, if not I want to navigate them to the login page. How can I do this before the first page is loaded?
You can simply call your function during onload of your page.Hope this helps.
Check out this fiddle link. http://jsfiddle.net/Vinay/HPy3a/21/
you can put your logic in
$("#firstpage").live("pageshow",function(){
// redirect user }
where firstpage is the id of the first subpage located in .html file
Related
I was trying to make an application in SharePoint and wanted to make it so that if you click on a button, it redirects you to a page and when that page loads I wanted it to instantly redirect the user to another page. ( I couldn't get the button to just redirect to the page I wanted on click, so that's why I tried doing it this way. ) I did this using a jQuery / JavaScript script. I'm new to making scripts so I was just testing and I ended up making this script:
<script type="text/javascript">
$(document).ready(function(){
Redirect();
});
function Redirect(){
$(document).load("url");
}
</script>
My problem is now that whenever that page loads, it just loads a blank page. But I can't get to the edit screen because it instantly redirects me to a blank page. I tried turning off JavaScript in Google Chrome but even though I was able to load the page without redirecting, I wasn't able to get to the edit page because it's in a jQuery AJAX drop down menu which obviously also doesn't work if JavaScript is turned off.
I would appreciate any help
EDIT: When I say edit screen I mean the place where I can edit the script. To do that I have to press a button on the page, but I can't do that since the page instantly redirects to a blank page.
Use the webpart maintenance page which allows you to remove and manage web parts without visiting the page, the instructions are as below.
Lets say your page is example.com/sites/default.aspx add the query string ?contents=1 to the page it will take you to the manage web parts page you can remove the script editor web part from there.
The other way is to use SharePoint designer to remove the web part this will also help you achieve the same result.
I am building a small webapp based on framework7 example split-view-panel which has a navigation bar on the left and if you click it loads a url to the right hand pane.
This is a php url. However it seems that each time you click on the left, if the page has previously been loaded, it simply reloads from cache. However I need it to call the php page again as I need to log time data on the php page for when it was clicked and loaded.
Is there a way I can force Framework7 to reload pages it has previoulsy loaded via ajax?
You can have Framework7 ignore certain URLs or even disable caching all together. Refer to the link below (section: Caching) for more details:
http://www.idangero.us/framework7/docs/init-app.html#.VnfJtPlVhHw
You must use pushState!
so where you define framework7 you must include this
var myApp = Framework7({
// Other Parameters if already there
pushState: true
});
What this is doing is enabling a HTML5 feature called the History API which did not exist in HTML4 i think was the last version anyway people used to use a thing called root hashing (Just so you know this back story is off the top of my head but the code it what will make it work) which is basically what the PushState is in the History API just. Just so you know PushState in Framework7 will make your URL'S look like this http://example.com/#!/profile.php?parameters4get=joe but it doesn't affect how Framework7 handles your pages it just enabled the PHP to be reloaded each time.
For Framework7 v4 use
var myApp = Framework7({
view : {
pushState: true
}
});
I'm currently working on a web project with jQuery mobile but navigation just won't work.
When i hit a page from the menu (eg. "customers") the url displays correctly (www.aaa.bb/#customers) and the page is loaded without any problems. When i hit another page the url is also correct and the page loads but when i then try to go back using the browser's back button the page doesn't change even though the url changes correctly..
I have seperate files for my different pages. Could this cause the problem?
If so, why does the url change correctly then?
Thank you!
Edit: Ajax is enabled on my page
If you are using AJAX to navigate throughout your site it is necessary to update the history yourself using history.pushState, since your HTTP (ajax) call will otherwise not be logged and stored in the history.
There are various ways you can manipulate the history, or change how you AJAX calls get fired, here is a solid doc on how to manipulate browser history, follow this up by creating a function that checks onpopstate event that is fired and update your page.
After hours of reading docs and testing different attempts I wrote this solution:
$(window).on("navigate", function(){
var file="/";
if(typeof history.state.pageUrl != 'undefined') {
file += history.state.pageUrl + ".php";
}
else{
file += "index.php";
}
$(":mobile-pagecontainer").pagecontainer( "change", root + file, {"reverse": true} );
});
This solution only works for my specific problem and may not work for others.
Known limitations:
all your jQuery Mobile pages have to be in the root directory of you website
the filenames of your pages have to be equal to their data-url attribute
all your pages have to have the same file extension (.php)
Dialogs will probably cause trouble too. I am also facing a strange issue when navigating to my index.php file.
I will improve my solution over time and post it again.
I am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
I am trying to get this functionality going but am a bit uncertain and don't know how to approach it. I have a master page with a div called "masterDiv". 'masterDiv' makes a load() call and loads content of an external html page called "details.html" from it content div. This is how I am doing it:
$('#masterDiv').load('details.html #content');
content loads up as expected and the url address pops in as "http://www.xyz.com#details"
This is all good and working, but then I thought of those users who may not have JavaScript endabled. I figure I would just direct those users to 'details.html' page directly instead of having the "Master Page" load the content from "details.html" page. So now here is the issue, lets say if I send a user this link:
http://wwww.xyz.com#details
And if that user's browser doesn't have Javascript enabled then obviously JQuery cannot be invoked and therefore load() call will not be made and so on. how can I direct the user to "details.html" page directly, please?
Any insight would be wonderful
Thank you.
Your link probably looks like this :
<a id="myLink" href="#details">Link that the user clicks</a>
When the user clicks the link, jQuery load is called. Is that correct?
If so, you could instead have your link like this :
<a id="myLink" href="http://wwww.xyz.com/details.html">Link that the user clicks</a>
That way, when the page loads, the link will work for everyone (even those with javascript disabled). Then, when the page first loads :
$(document).ready(function() {
$('#myLink').attr('href', '#details');
});
will set the link to the way it was before. That way, only users with Javascript enabled will use the load version. The other ones will simply be redirected to details.html
If there is something I haven't understood correctly in the question let me know.
how can I direct the user to "details.html" page directly, please?
By making the link's href attribute "details.html". The way every link works by default.
Details
Every link on your site should be built this way. That is how the Internet is designed to work, and how it works best. You should only add functionality with JavaScript if you actually need to, you shouldn't be depending on it for something as fundamental as linking between pages.