I've a little problem with a jQuery Mobile app I'm building. I have page where a back button using data-rel="back. It works well except in one case :
These page can be access by a link from an e-mail. So, when you come from the e-mail, the back button will not work.
So, is there a way to test if there is a previous URL or if the user comes from an e-mail ?
Could you check for the data-rel='back' attribute?
$("a:jqmData(rel='back')").length
Example:
http://jsfiddle.net/KHhv4/4/ (loading normally)
http://jsfiddle.net/KHhv4/5/ (Loading page2 first to mimic email)
OK maybe this is a better option.
$(document).ready(function(){
$('a[data-rel="back"]').hide();
})
$('a').on('click', function(){
$('a[data-rel="back"]').show();
});
Related
Working on an iPhone app using the ionic framework(which is great). Currently im am using the $state variable to redirect usings, say 'on a successful login'.
I am writing this like so...
$state.go("app.search");
I have also tried
$state.go("app.search", {}, {reload: true});
Both of which correctly load the /search page but provide me with the back button at the top left with the menu.
Now i want the back button on the other functionality. I'm wondering if I need to call a different method to changes pages or if i can temporarily disable it on some views?
Any pointers would be great!
This might be a little late but in case someone else gets here looking for an answer, you can use the $ionicViewService as described below
function controller($scope, $state, $ionicViewService) {
$ionicViewService.nextViewOptions({disableBack: true});
$state.go("app.search");
}
I have an application which includes a series of forms, each on their own page.
I do not want some of these pages to be added to the history stack. So that when the user presses back, it skips them.
Jquery-mobile does this with dialogs. You can configure this to happen with ALL pages (or any other data-role) but not with just some pages.
Does anyone know how to do this? Alternatively, would it be possible to create a new data-role that extends "page". If that was possible, then I could disable history for all of those pages.
in this case, you can call $.mobile.changePage() by yourself:
$.mobile.changePage( "url", {
changeHash: false //do not track it in history
});
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
I was facing the same issue and I was going berserk!!! Finally, I was able to do it with the following code that does just that!
The code below automatically prevents storing the changed locations for all pages in the current document.
Please note that it has been tested with jqm 1.4.2
<script>
$(document).on("pagebeforetransition",function(event, ui){
ui.options.changeHash = false;
}) ;
</script>
Hope it helps
Checkout this question, pretty much the same as what you are trying to do.
How to modify jQuery mobile history Back Button behavior
Thanks,
Alex.
I am currently building a website containing lots of links to different sections of my website (also known as navigation). Lets call those links and their corresponding pages link1, page1 , link2, page2, link3, page3 etc.
The general code for them is this:
Link1
Link2
Link3
I want the user to click each link to move to the corresponding webpage and it works as supposed to. The problem is that I want the links to do nothing when the user is on the same page as the link they clicked (meaning it will only reload the page). Let me make this clear by using an example:
Current use: User is on page1. User clicks on link1. The browser will reload page1.
Desired use: User is on page1. User clicks on link1. The browser will do nothing.
TL;DR Essentially I am searching for an if clause. I have read there is no if clause in HTML simply because it's a markup language but what is another way to implement this? Thanks for your help.
The best answer I have found without the need to use JQuery or JS after munching through SO is this, answer made by Matt Crinklaw-Vogt:
Add a /#!. This will prevent the scrolling to the top and will also prevent the page reloading.
Code:
Link1
Original answer:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
I'm not sure I like it, but you could use an empty bookmark to do this...
Link1
If you aren't on page1, it will load page1, but once you are there, it won't do anything.
Link2
OR
<a onclick = "return false;">Link2</a>
That cancels out the load.
On page load, you could use JS as follows
Link1
JS:
document.getElementById("link1").setAttribute("href", "#");
You can use javascript to compare the current url to the anchor link, and if they're the same, prevent the default click event. Using jquery:
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))) {
$(this).click(function(event) {
event.preventDefault();
});
}
});
I'm actually working with jQuery mobile 1.0 and the auto complete widget from jQuery UI.
Everything works perfectly except one little thing :
When the user has been redirected (location.href) using the autocomplete feature, there is no back button on the page where he has been redirected.
I've set the $.mobile.page.prototype.options.addBackBtn to true in the mobileinit and the script is loaded before jQuery Mobile.
I didn't find any answer anywhere so this is why i'm asking to you guys
Thanks in advance
By the way sorry for the bad english it's not my first laguage
How do you redirect the user to other page? With location.href? Then that's your problem, setting location.href causes a page refresh and then jQuery Mobile loses it's history (so it won't show the back button)
Please use $.mobile.changePage( url ) to switch to another page
Something like:
$("#yourAutocompleteID").autocomplete({
select: function(event, ui) {
$.mobile.changePage("nextpage.html?id="+ui.item.id);
}
});
For simplicity I pass here the data in the querystring
I am working on a web-app for my employer and I am using some jquery. I am fairly good at PHP, but lost in jquery. My question is as follows:
I have a a working tabs page that loads a monster PHP page when it first loads. I need to make sure that this particular tab only loads when the page is called (the first time only). I have the initial tab cached, and if you click on another tab everything is fine. The problem is that when you click a link from within the tab it reloads the monster PHP page. Here is the code:
$(document).ready(function() {
$("#frame").hide();
$("ASA").tabs({ cache: true });
$("#tabs").tabs();
});
function CH(ids){
$("#tabs").tabs("select" , "#CH");
$('#CH').load('test.php?id='+ids);
cache : true
}
function onIFrameLoad() {
$("#loader").hide('slow');
$('#frame').slideDown('slow');
}
Function CH is where I am having trouble (I guess). I have cache:true in there, but it was a shot in the dark. The only tab I want cached (at this point) is the main tab (ASA).
Thanks for the help.
The correct syntax for using cache is
$( ".selector" ).tabs({ cache: true });
However, this would work only if each tab is loaded remotely (ie. ajax). There's no reason to do this if you use the original HTML structure given by the documentation, because all of the contents for all tabs are loaded all initially. You also cannot (as far as I can tell) turn caching on for individual tabs.
What we really need to see is what HTML structure you've got for this. Also, the selector $("ASA").tabs({ cache: true }); probably won't work, as ASA isn't a valid HTML element.
Ok... so it is a complete hack/workaround, but I have a solution. I would love to hear the RIGHT way to do it if someone can direct me, but here is what I did:
In each tab I pre-load a blank iframe.
My links all now point to iframes instead of functions.
Each iframe calls a function to "select" its tab from the parent.
Result is that after load the tab is shown and the main tab is never refreshed.
Again, I know it is a hack, if you have a better way please let me know.