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
}
});
Related
So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!
In Angularjs pages are loaded via ajax calls to templates, and the browser never reloads it's full content (a single app). However you can directly link to a page itself and Angularjs figures out which contents it needs to load.
How can I tell if a page has been directly linked to (maybe from a refresh) or if it was dynamically loaded (for example, when using location.path('/somepath');)?
I've tried looking in the docs and I haven't found anything. I can set a local storage variable, but that seems overkill.
You can know it before any Angular code. You can look to the window.location object and check the URL. For example, just do it before the angular.module('myModule', [...]) line.
var url = window.location.href;
if (url.contains('/somepath')) {
console.log('do something !');
}
angular.module('myModule', [...])
// Angular code goes on ...
Page is never actually refreshing itself. All files are preloaded into browser and then only thing refreshing is content.
When you manually refresh the page angular loads again as it is the first time you open the page.
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 have some back/next buttons set up for a phonegap app built in angular.js.
I'm using partials in angular for the pages and using window.history as some simple back/next buttons. All is working good but I'd like to add some visual feedback as to when the back and next functionality becomes available.
Is there a way to check if the history.forward is available?
the next page wont be known, so I dont think looking through the pages in the history is a viable solution to this, it shouldnt kneed to know what page its on or what pages the app contains, something like (sudo)
if(window.history.forward()){
// show buttons as available
}else{
// show buttons as not available
}
Sadly history only returns undefined, but is there any other way?
Any suggestions would be great
thanks
history doesn't allow this, still you can get history.length to check if there is history at all (if not - just disable both buttons).
Or you can "dirtyhack" it by wrapping the whole site or app with 100% width|height borderless iframe on your "index" page and log this iframe's hisory "manually" from the top window (not advised at all; will work for the same domain only; will not work with "X-Frame-Options:DENY" on your server).
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