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.
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!
I'm updating a very old web app (webforms) that only works properly in IE 6-9. It was not originally written by me. Also, I'm not an expert at web development, so the solution to this might be very simple.
One issue is extensive use of window.showModalDialog, which is an IE specific call that opens a new browser window that disables the browser window that opened it, like a popup message. This has been replaced with a jquery modal dialog, however there's sometimes an issue with the 'url' that gets passed to it.
Here's a simplified reproduction of the issue. There's a javascript function that takes a url and an id.
function openEdit(url, id) { ...
This function existed in the original version, except it had code to open a modal popup window. I replaced it with the necessary jquery. However, the url value that gets passed in sometimes doesn't have enough information. Also, assume I have no control over the value that gets passed here.
Let's say the main page is at localhost/TestSite/Main.aspx. There are a number of frames within this page which display other pages, like localhost/TestSite/Products/ProductList.aspx - clicking an item on this page might open a window to localhost/TestSite/Products/ProductDetails.aspx. There are hundreds of pages that follow this general format.
Sometimes the url has a value of '/TestSite/Products/ProductDetails.aspx'. The jquery dialog correctly navigates to localhost/TestSite/Products/ProductDetails.aspx
However, other pages just pass in the name of the page, 'ProductDetails.aspx', which jquery tries to find at localhost/TestSite/ProductDetails.aspx. This works on IE using window.showModalDialog and the browser is able to get the expected directory of 'Product' because it's the same directory the open window call was made from. Jquery doesn't seem make this leap.
Now, I have a possible solution using window.location to get the current url, parse it a bit, and generate a valid url. I'm worried about what fringe cases this may create, though, and it also seemed like the improper way to do it.
Is there a way to have jquery open a dialog using the corrent directory, or is there a way to generate a current directory to use that doesn't involve window.location? Or is that my best choice.
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
}
});
When accessing an external page from a Cordova app, then coming back to app with back-button, the app page is empty, or more precisely, everything that was dynamically added to the page is gone.
This seems to be the case whether the link is a native <a href="..."> or is accessed via window.open(), or via cordova.InAppBrowser.open(). The only way it does not happen is when the actual browser is specified via "_system" parameter.
Is there a way to prevent this, or is it normal behaviour ? Should I simply rebuild the dynamic page upon returning ? I could do that, but no event seems to be fired on return, not even a pageshow.
Navigating back refreshes (reloads) the page...so anything dynamically added to the page will correctly be gone. You could use hash tags on the URL for simple information or localStorage for more complex information about the page state and re-populate the page based on it when it reloads.
pageshow most like isn't firing because of some assumption being made in the JS code. Try listening to the $(document).ready for debugging purposes. It could also be caused by the issue described here (because of caching): 'pageshow' is not received when pressing "back" button on Safari on *IPad"
Specifying system causes the page to open in a new window...so that's
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