I'm working on a web app with JQuery Mobile 1.2 and php. From the profile page, I have a popup asking the user to confirm logout. What I want to do is intercept that button with a click event to process the logout via an ajax request.
I have a custom.js file included in all my project pages. The app loads in the accounts page. I know it is getting loaded and working across the ajax navigation.
When I include this code in custom.js:
$("#perfil").live('pageshow',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
I get the alert when the profile page is shown. The problem is the click function.
When I include this:
$("#perfil").live('pageshow',function(event){
alert('This page was just enhanced by jQuery Mobile!');
$('#logoutButton').click(function(){
$('#output').html('Logging Out...');
$.get("api/logout",function(data){
if(data.success) {
window.location = "index"
}
else{
$('#output').html('Logout failed. Try again');
}
}, "json");
});
});
The behavior is odd. When I navigate from the main page to the profile page, I get the alert. But the button doesn't respond. However, when I refresh (or initially load the app from the profile page) the button behaves correctly and runs the the javascript logout function.
Here is the code for the html button:
<a id="logoutButton" data-role="button" data-icon="check"
data-inline="true" data-theme="e">Si, finalizar.</a>
Your custom.js on your profile page is not actaully getting loaded (more on that below), and as a result when you are binding the click event your button does not exist in the DOM, you can get around this by using event delegation for example
$(document).on('click', '#logoutButton', function(){
$('#output').html('Logging Out...');
$.get("api/logout",function(data){
if(data.success) {
window.location = "index"
}
else{
$('#output').html('Logout failed. Try again');
}
}, "json");
});
Now the reason why your custom.js isn't getting loaded is because by default when you load a page in jQuery Mobile the default behavior is to load just the data-role="page" div via ajax and attach it to the DOM of the current page. The important part to realize is that only the div page gets loaded, and not any other resources on that page.
If you want a custom script on a seperate page to be loaded you need to include it within the div data-role="page" wrapper. You can also tell JQM to fully load a page without ajax by using the data-ajax="false" attribute on your links (or rel="external" if its a different domain).
As a side point you should consider using .on instead of .live as of jQuery 1.7 .live has been depreciated.
In JQM, it all depends on how your data is initialized and how the pages are structured.
When loading your main page, all scripts are initialized once and cached for "Ajax" like response and feel.
If your main and profile page are in a multi-page format, your click button won't be an issue as the scripts are initialized once.
Or if you are in a single page, rel="external" from main to profile page will work. External links will force JQM to make a new HTTP request; However, you do loose page transition effects.
I believe a better architecture is to create single JQM pages and utilize a log-out button
Log-out as a binding function.
*How to bind your click function:
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
Source
Related
I'm looking for a way to prevent page ajax page loading for some page when clicking on link using framework7, I need to click on like then do some logic then load page using javascript after processing.
I tried the following
<a href="pages/restaurant-details.html" class="restaurant-grid-item" data-index="0">
Then in javascript
$(document).on('click','.restaurant-grid-item',function(event){
event.preventDefault();
//Do Some Logic
mainView.router.loadPage("pages/restaurant-details.html");
}
I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});
I'm developing an application in which I have internal and external links. i noticed that Jquery mobile does not load the spinner when an external link is clicked:
Example
Spinner is shown
Spinner is NOT shown
I have tried :
$('a[href][rel=external]').click(function(){ //doesnt work
$.mobile.showPageLoadingMsg();
}
and:
$('a[href][rel=external]').click(function(){
// shows the spinner but it gets stuck forever
$.mobile.showPageLoadingMsg();
$('#loadingDiv').div("refresh");
}
can someone help me show the spinner when the rel = external links are clicked?
http://jquerymobile.com/test/docs/pages/page-links.html
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
You wouldn't get a loading spinner as it is just going to do a page redirect. Also for your jsfiddle, google.com will not work as they don't allow iframe access. If you change it to another site like http://jsfiddle.net it will switch the site properly.
If you MUST show the spinner, you can do something like this
http://jsfiddle.net/RqkYM/10/
$('a[href][rel=external]').click(function(e){
e.preventDefault();
e.stopPropagation();
$.mobile.showPageLoadingMsg();
window.location = $(this).attr('href');
});
It will display the spinner then do a redirect
If you want, you could load the external page with $.mobile.changePage() See here for docs
It has a showLoadMsg option that "Decides whether or not to show the loading message when loading external pages."
EDIT:
Here is an example of loading an external page like I described:
http://jsfiddle.net/KYvDv/2/
$.mobile.changePage( "/gQxCN/1/show/", {
showLoadMsg: true
});
i have an index.html file that holds:
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var deviceuid = device.uuid; // gets the phoneid
alert('index');
checkUser(deviceuid); // this is some function i made
}
from here if everything works OK i will load another page called page1.html that has some text and a link:
Page 2
the page2.html has some other text and a link that goes back to the homepage:
Go to Index
What happens is that when i start the application i can see the alert and the other script running, but when i click on the link to go back to the index.html the page goes blank and no alert is shown
any ideas ? do i have to run some other code that refreshes the page?
edit:
i could use: <a href="#" onClick="document.location = 'index.html';" >Go To Index</a>
but it doesn't seem to work on the mobile device only in browser
You are describing standard browser behavior.But jQuery mobile performs page loading default per AJAX, see http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html.
This means that the first page ("index.html") is loaded and onDeviceReady is executed. When you click the link to the second page ("page2.html") this page is loaded per AJAX, is inserted into the DOM of the first page and is displayed.
When you click on the link to the first page, no loading occurs because both pages are in the DOM and the first page is displayed again without triggering onDeviceReady - this only happens on the first load.
You can turn off AJAX loading when you add to every link rel="external".
However, you should use AJAX loading and its advantages. Read http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html - it explains in detail when a script is executed. I think you should put your code in the pagechange- or pageshow-event, see http://jquerymobile.com/demos/1.0.1/docs/api/events.html.
I have a photo gallery that use modal window to display photos. During modal windows initialisation I'm inserting rest of photo functionality (share button, comment, tags, etc). Everything works well except facebook share button. From documentation you have to include following html code:
<a name="fb_share">share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
It works perfectly for static pages, but not with the pages that created on the fly.
Here is example of my javascript code (using jQuery)
//Insert share button
$.gallery.facebookLike.insertAfter($('#cboxContent #cboxLoadedContent'));
//Insert script element after share button
$('<script />', {
src : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
type: 'text/javascript'
}).insertAfter($.gallery.facebookLike);
As result button inserted but script element is not initialised, after inspection in firebug this script appears in loaded script tab but not present on HTML tab. However if you click on the share link it sends you to facebook page and when you click BACK button in your browser the script gets initialised.
What am I doing wrong and what can be done about it?
I'm just taking a guess here, but I believe the script has a function running on window onload event. Since the window is already loaded, the script isn't running.
Edit: Yes, it seems that the function FB.Share.stopScan is being run on window load. You should try manually calling that function.