Develop Reference

Using Javascript to redirect to an anchor

I have a website that's mostly generated via PHP and uses the jQuery library (v1.11.1). My problem is that I would like to link to anchor tags that are generated dynamically on separate pages.
For example, I have the following link on index.php?page=Home:
And on the page that's loaded when $_GET[page] == "ABC," I have the anchor:
<a name="firstItem"></a>
So far, so good. But when I try to click the link, it redirects to the page without jumping to the anchor. The same behaviour happens if I click Reload. However, if I enter the URL directly into the browser window, it DOES jump to the anchor.
I've found that the problem goes away if I delete the "function detach()" from the jQuery file, but then some other libraries that I've loaded fail to work. Any suggestions?

AJAX load a dynamic page into a div

A client needs the url to stay the same on a wordpress website.
So after trying several solutions I think the best way will be through AJAX with the .load method.
So down the side of a page there are navigation items controlled by the WordPress engine taking you through to another page.
Is it possible to intercept the outgoing link and load it into a div on the page without having to modify the anchor tags?

This plugin should do what you are looking for:
http://wordpress.org/plugins/ajaxify-wordpress-site/
http://www.swook.net/p/jquery-ajaxify-plugin.html

JQuery mobile v1.2 javascript event not working in pop-up

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

Spinner not loading in external links

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
});

How can I load the entire page using PJAX

Is it possible to load the entire page using PJAX and change the browser's page url?
My purpose is to prepare first the response to make sure that it would be loaded without refreshing the page in a long time after clicking in the menu-page-link or execute a javascript function.
I tried using PJAX but the one that provides a response data for the selected element to load where the request has to display.
Like:
$('a').pjax("#container", { fragment: "#container" });
I want and I tried:
$('a').pjax({url:"new-page.html"});
But it didn't work.
I'll appreciate your help and suggestions. Thank you!

Yes it is very much possible using jquery PJAX plugin , you can keep the header footer static and change the body content using PJAX , and yes it will change the url too along with browser history stack i.e. almost making it like a normal navigation, except that page wouldn't be refreshed.
But the container needs to be same in both the urls. You can try :
$(document).pjax('a', '#pjax-container')

You can load page via ajax but you cannot change page url, when you change it, it will automatic redirect to that address. This prevent phishing page, fake url.... But why you need to load page via ajax then change the url, why don't just change the url?