I have a complete page with a menu like this:
<li>Page 1</li>
<li>Page 2</li>
and so on. This is working just fine without jQuery but because I would like some animation effects on side change I decided to use jQuery, like:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#wrapper').load(link+' .content');
});
});
By using this jQuery, an exact representation of page1.html, page2.html is reconstructed, but with ajax requests instead. My problem here is that I of course would like the url in the web browser to change accordingly. Now it just says "www.mypage.com" when I would like it to show "www.mypage.com/page1.html" when the first link is fetched with ajax. How can I achieve that?
If you change the URL that way, it will reload the whole page from the server, and that's not what you want to do.
What you want to do it's an SPA. To do so you can only change the anchor part of the URL, i.e. add a hash followed by whatever you want, for example:
www.mypage.com#page1
www.mypage.com#page2
Usually, apart from changing the url, you want to change the page content if the URL changes. This is knwon as routing, and most frameworks like Ember.js, Backbone, AngularJS, Durandal and so on include one. As you don't need a framework, you can use an independent one like router.js. Better than router documentation itself, look for some examples like this.
I found out the javascript method pushState, with that you can just do:
$('a').click(function(){
var link = $(this).attr('href');
window.history.pushState(null,null,link);
});
and the web browser link is updated correctly. This seems to work in all modern browsers except IE9 I think. With this method I get exactly the same url as if the page was served static, which is a huge advantage in my opinion.
Related
I have looked everywhere for this but have no idea how to go about it.
I want to have links at the top of a page such as; News | Reviews | Images etc
When someone clicks on one those links, I want it to load content from another php file and at the same time append the link name on to the url. Example: example.com/page1/review.
I have seen other sites do this like http://www.gamespot.com/the-witcher-3-wild-hunt/
I don't have any code examples because I am not sure how I would even start. I tried with .Load but not found that it works.
You can use the History API, you can use either pushState or replaceState to replace the url
history.pushState({},"","/the/new/url");
//or
history.replaceState({},"","/the/new/url");
The parameters for both functions are the same. The first one is an object that gets stored and passed to the onpopstate event. You can also retrieve it by history.state in the event of a browser restart.
The second is a title string, i believe at the moment no browsers fully utilize it so it can be whatever.
The last parameter is the new url you want in the address bar.
So if say you wanted to load your Images link and you wanted the url to look like /Images you would do something like
jQuery("#content").load("/images.php").then(function(){
history.replaceState({},"","/Images");
});
Session History Management Compatibility
I assume since you tagged the question with jQuery, that you are using the library. Look at the documentation for the ajax function in jQuery. http://api.jquery.com/jquery.ajax/ Without seeing your code, I can't give you specific code to help you but here's an example:
$.ajax({
url: "example.com/page1/" + variable + "/index.php",
success: function(result){
$("#div").html(result);
}
});
What is the preferred way to navigate between HTML5 web pages without using any server side scripting language. Would Jquery be a good choice?
Consider a user logs in and lands at home page. Home page contains many links to navigate to other pages.
Edit 1
I need to communicate to server via AJAX to perform some operations and pass on variables and data between web pages. But I cannot use JSP or PHP to create HTML dynamically.
HTML
<nav>
Index
Contact
</nav>
<section id="content"></section>
jQuery
$(function(){
$('nav a').on('click', function(e) {
var htmlFile = $(this).attr('href');
e.preventDefault();
$('#content').load(htmlFile);
});
});
for link to your different pages in HTML5 you use this code.
link 1
link 1
link 1
I would say anchor tags are the best choice to do this because of their universal and flexible DOM use:
Page 1
Page 2
Page 3
If users will be logging in then you will have to use a scripting language such as PHP and establish database connections with MySQL.
jQuery has a very easy to use AJAX implementation.
It sounds like you're wanting to create a single page application that gets it's data from a third party service?
I would recommend Sammy.js for intercepting routes, and jQuery to do your actual ajax calling.
If you're doing a lot of dynamic content dynamic content I would also recommend Knockout.js
Great for use will be:
Page 1
Page 2
Page 3
It's more faster than using this:
Page 1
Of course, you'll need to have html subpages (page1...) in the same folder as your index.html.
Considering that the mobile app is not native, but made with phonegap (or something simmilar), i am wondering if there is a javascript / jquery library that i can use to navigate from one html page to another one without the need to reload all ls and css resources.
More or less like jQuery Mobile does it.
One issue would be enhancing all the ui and js widgets on each page
Any ideas?
You can do an AJAX call to whatever the local URL is and wrap the entire response in something traversable via jQuery, like...
// on click link ->
$.get('myUrl.html', function(response) {
var new_body, traversable;
traversable = $('<div></div>', {
html: response
});
new_body = traversable.find('body').html();
// code to replace your content here ...
});
And if you have a lot of scripts/styles running per page, you could traverse through the list of traversable.find('link') and traversable.find('script') to compare what has and has not been used yet. Then append to the document after replacing your markup.
I think it is Phonegap you are talking about.
Yes, Jquery mobile is would be a solution to your problem because whenever we change the page in Jquery Mobile, instead of reloading the whole DOM, it only replaces/inserts (depends on if you enable caching) the new page div to be shown.
Thus, all resources you included initially would persist and be usable in all pages.
Depending on how your html and css are written, you could wrap your pages in divs and use css transforms to position them off screen, then scroll them into view when the user clicks a link.
jQuery mobile inside of phonegap is very, very slow.
update: terribly sorry for not making myself clear. it is load() in jQuery, not loadpage().
maybe this is a trivial question but I just cannot think it through as new to js. I will really appreciate your help.
I am building a small personal site, containing several similar pages. Some tutorials I find suggest to use load() to, in one single .html file, based on different clicks, generate different content which is grabbed from my other html files using load().
but why am I doing this? having several html files works fine. using load() method I still need those files; also I googled and see many complaints about the slow speed of load().
therefore I am just wondering the reason we are doing this.
Thank you in advance.
loadpage() is not a native jQuery method, so it's likely you've stumbled across an article that was providing some custom wrappers for jQuery's methods. On the other hand, $.load() is a native jQuery method that pulls remote content into your page asynchronously. Changes are good that if somebody constructed a loadpage() method, they may have in fact been using $.load() (or any one of the other ajax methods) internally.
It's possible you're referring to $.mobile.loadPage (which uses jQuery's $.ajax beneath the covers), which is actually a jQuery Mobile method. You wouldn't be dealing with this too much unless you're involed in Mobile app development.
Whether you're using jQuery Mobile's $.mobile.loadPage, or jQuery's $.load to load in your content, the reason is still the same: avoid full page refreshes when partial page loading is all that's needed.
Think about what happens everytime you want to load a different HTML file. You have to reload the header, the navigation, the footer, sidebar information, graphics, and perhaps some media content, every time you load a new page - and a lot of this doesn't change from page to page. This is why it's helpful to be able to load in fragments of documents, without requiring the user to re-issue a request for everything all over again just to see the unique content on page 2.
I am using backbone.js and building a single page application, inspired by trello.com ..
I want to know how you show many pages on top of the original page. As in how you architect it.
How do you use Backbone routers to achieve this?
For example in trello
Basepage
And then now on top of the base page you have dynamic content
like a cards detail
like a boards details
How could i architecture something like this?
I've done a couple of approaches so far in projects with 50+ pages and they both scaled well. I did not use backbone.js but the approaches are straight forward and do not require a framework to learn other than I used jQuery for selectors.
Both of them have in common creating a single overlay window that you can pull in content into the window. I wrote mine from scratch but you could easily use jQuery UI dialog. The two approaches only differ in how the content is pulled. Also, using the information on the link is all you should need to pull in the "module" or overlay content as your rule. Do not need tons of scripts loaded in to start your app. Have the modules pull in the behavior for you.
Option 1) Use the jQuery load method to pull content from stand-alone web pages by using a placeholder variable like so:
var $ph = $('<div />');
$ph.load(URL); // loads gui of remote URL + executes any script that URL has
The $ph var now contains all the GUI loaded in from the external URL so you can use selector on it to extract the particular HTML and place it into your DOM or overlay as you need.
Here is an example of the stand-alone HTML output:
<div class="module">
<a class="link">click me</a>
</div>
<script>
(function(){
// put any private vars here
$('.module .link').click(function(){
// do something
});
})();
</script>
If you remove() or destroy the dom inside the overlay through jQuery, it will automatically remove all the events directly assigned aka "bind" and "unbind" them but using "live" or "delegate" you will need to worry about "die" and "undelegate" etc. just doing die('.namespace').live('click.namespace') will ensure is cleaned.
Here is an example of this on one of my websites -> http://www.kitgui.com/docs
But the better example is within the customer section as the docs is fairly simple using hash history.
2) Using an iframe inside your overlay and assigning it a URL.
This is the easiest option but is a little slower because each page called has to have a full standalone behavior and dependencies with the iframe. Also you must worry about sizing the frame etc. unless you have a fixed overlay window.
You must have a loader overlay your iframe while its loading then have the iframe talk the parent to tell it its done loading and hide the loader.
I did this for several sites but one of them is a site in development you can see here to get the code ->
http://dev.zipstory.com (sign in and go to my zipstory and click "group" settings etc to see this, just view source to see how I did this as its all there)
The thing about iframes is you should write some code on the parent that accepts standard messages from the iframe that you agree on as a typical set of behavior such as notifying its done loading or passing messages to update something on the parent etc. This can be added on the fly and refactored as you need as long as your aim is KISS approach.
Each of the 'dynamic content' pages should be a template (underscore.js gives you _.template()) rendered by a backbone view. The main page needs to have events that initialize new views and render the templates. Look at the todos app (http://documentcloud.github.com/backbone/docs/todos.html) to get a basic idea about the flow of a backbone app.