Home domain links within JQuery Mobile - javascript

I have created a web page using JQuery Mobile that has a link at the bottom of the page that goes to the home page of our "full" site. The mobile page is in the same domain as the home page. When the link is clicked, the browser just hangs and does not render the home page. I am guessing this has something to do with the way in which JQuery handles links within the same domain... any ideas?
For example, my mobile page is at "http://somedomain/m/index.php". On this page, it links to "http://somedomain/index.php" like this:
View full site
Should I be handling this link differently? If I insert a URL to an outside domain, it works just fine.
Thanks for your help.

Try this <a href="http://somedomain/" data-ajax="false" >View full site</a>
By default,if the link is from the same domain,jqm will try to load it via ajax.Here in this case it should not be loaded via AJAX.
Let me know if that helps.

Related

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

How to Open a new tab from Iframe?

I have a website build in php, in some page i show a iframe with another website link, which displays it's login screen.
Both Websites are in different domain.
Like main website : http://www.abcd.com
Iframe href : http://www.xyz.com
Now my users see a page in abcd.com where there is an iframe like
<iframe src="http://www.xyz.com/" style="width:688px; height:384px;"></iframe>
Which displays the login screen of the xyz.com
Now what i want is, if users login to xyz.com another new tab should open with the homepage, after login of xyz.com and abcd.com tab should get close.
Is it possible to do with javascript or jquery, which works for all the browser including IE 7,8,9 ??
Thanks
Open up a new tab
link
linky
pop up
window.open("foo.html", "_blank");
Put the following javascript code in the <head> tag of the homepage of xyz.com (but don't put it in the login page if you still want to keep the login page inside the iframe):
<script type="text/javascript">
if (top.location!= self.location){
top.location = self.location
}
</script>
now, when opening the home page of xyz.com, this code will break the <iframe> and changes the current tab from abcd.com to the home page of xyz.com
i dont know what you mean, but opening a new tab from iframe is just the normal code.
<button>Open New Tab</button>
hope this helps
What you're trying to do is impossible on your end, you only supply a login page inside the iFrame, therefor you cant control what the "login" button actually does, it's controlled by the other website.
The other website will need to edit the action themselves and add target='_blank', but that wont happen as their users will have another tab when they login.

How does this jQuery Mobile common navigation system work?

Most of the example sites (like below) that JQM link to use a common navigation system, I'll use this site as an example:
http://www.takemefishing.org/mobile/
When linking to another page that isn't already in the DOM, they use the ajax navigation for example, on the homepage they link to 'Fish Species' with a href of
#/mobile/fish-species.
On click, this actually loads the page into the DOM via ajax from /mobile/fish-species which only contains the <div data-role="page" id="fish-species">... content here ...</div>
Then the address bar is updated to /mobile/#/mobile/fish-species.
If you go directly to /mobile/#/mobile/fish-species (e.g. by using the refresh button or a direct link), it loads the homepage with all the CSS, JS etc etc, and then via ajax loads /mobile/fish-species into the DOM seemlessly.
This structure/system seems to be the common method used on JQM sites, for example Walt Disney and Standford University.
My question is how are they making this magic happen? I suspect JQM is doing almost all of the work, and there is just some config option or flag that I am missing.
Here's what I've tried
I have a basic JQM homepage /mobile/index.html with the DOCTPYE, <head> section with CSS, JS etc etc included, and a link to another page page2.html:
<li>Page 2</li>
Page 2 is similar to the 'Fish Species' page whereby it just containts the:
<div data-role="page" id="page2.html">... content here ...</div>
Now, when I click the link on the homepage, page2.html is loaded into the DOM via ajax and shown. The problem is the addressbar shows:
/mobile/page2.html
If I then click the browsers refresh button, or navigate directly to /mobile/page2.html, of course the browser just loads page2.html containing only the page <div> and no head section or CSS/JS included.
What am I missing to get the link to show #/mobile/page2.html in the address bar when loaded, and then if refreshed I want to load the homepage then pull page2 in via ajax, just like the example sites do?
I am using the latest JQM at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Jquery Mobile will interpret navigation to the address #address as navigation to the page named address
This means that you can define in your single index.html two pages, for instance
<div data-role="page" id="index.html">link to JQM page2</div>
<div data-role="page" id="page2.html">... content here ...</div>
Clicking on the link in the first page will load the content of the second page and update the location displayed in your browser's address bar accordingly.
This is the standard JQM approach, used for instance in the stanford website you linked to.
The Disney and Fish websites look like they are doing things slightly differently as they apparently dynamically generate the target page by binding to the pagechange event, analyzing the target address and acting accordingly. You can see more details on dynamically generating pages in the jquery mobile docs.

jQuery Mobile Web App - clicking link to another page - page flashes content then blanks

This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at 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.
Hope this helps.

HTML5 Loading the external content into a div and using pushState()?

I have a main page "index.html". This main page is the enterance to the site which is done in HTML5. There are other pages for the site:
"about.html", "work.html", "portfolio.html", "contact.html"
So all of these pages have a div called "contentDiv" which has the copy/text accordingly. User enters the site via "index.html" and if user clicks on one of following the nav links:
About | Work | Portfolio | Contact
"index.html" page loads the content of clicked page's "contentDiv" using JQuery's load() call and then slides in the loaded div using animation.
Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the "index.html" to load the content via load() call.
By the way, the nav link(s) are coded like this:
<a href="about.html" title='About'>About</a>
Once the "index.html" loads the requested content, By using pushState(), the URL is updated. So if user clicks on "about" link then pushState() updates the URL to:
"http://www.abc.com/about.html"
The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page ('about.html') instead of "index.html".
So far all works well as expected however here is the issue. When user is on "index.html" and clicks on anyone of the sections for example "about.html", content is loaded and URL is updated via pushState(). So now the URL is "http://www.abc.com/about.html". Now if user refreshes the page("index.html"), "about.html" is loaded instead of "index.html" doing the load() calls.
Lets say if I code the nav href tags like this:
About
then the URL ends up having a hash in it. And if I copy and email the link "http://www.abc.com/#about" to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to "about.html" because link only has '#about' instead of "about.html".
What I am trying to do is indeed doable I just don't know how to approach it. If anyone can help me on this that would be wonderful.
Forgive me, for such a long description.
Thank you.
I ended up setting all the nav hrefs to "". and then setting the hrefs values on document.ready() function.
$('a[rel=nav]').attr('href', '');
Thanks.
This code will achieve what you need to do and support the users with javascript disabled.
$('a').click(function() {
window.location.hash = $(this).attr('src');
return false;
}
Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh.
If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com

Categories