Hello I have a question recently I seen more and more sites using #/pagename instead of going to /pagename which is useful because it does not reload the page.
How can I do the same thing with jQuery? http://mysite.com/id#/1 <-- would load user with id 1 if you would change that 1 to say 4564 http://mysite.com/id#/4564 the page would load user data fro 4564 with out refreshing the page it self.
Thanks in advance
You are actually seeing two things:
The request for content is be done asynchronously (AJAX). To accomplish this look at jQuery.Ajax. http://api.jquery.com/jQuery.ajax/
There is also a 'hash trick' to enable back button support. Typically, a standard Ajax call does not play well with the back button. For this look into the BBQ jQuery library. http://benalman.com/projects/jquery-bbq-plugin/
Hope this helps.
Bob
YOU are looking for the jQuery history plugin. I've had great success with it, and there are triggers for when the hash changes so you can do whatever you want: load content with AJAX, or load a different slide, etc.
I would recommend you look at sammy.
It's a very light javascript framework intended to implement a thin-server model like this where the rendering occurs on the client's computer in javascript instead of served pages from a remote server. This is what allows many sites to avoid doing full reloads of a page every time a user performs an action.
Related
my problem is that I want to get access from page index1.html to object in page index2.html, for example:
<button id="btnIndex1" onclick="$('#PopUpDIvIdInPageIndex2').show();">btn in index1.html</button>
Solutions with coockies and another storages are not useful for me because I need immediately(real-time) access.
Any suggestions?
You can't just reference an element on another page. What would happen if you could just inject some code this way in a div on the open Facebook page from a user? That wouldn't be nice, huh.
The option you have in my opinion to make this semi-real-time is by using WebSockets. From page 1, send a request to the server. The server will send a request to page 2 to update something.
To learn more about WebSockets, read this tutorial on HTML5 Rocks.
For a simple task to load a page from a click event I would instead suggest an ajax-request.
This could simply be done with the javascript library jquery.
http://jquery.com/
Have a look at the jquery load method
http://api.jquery.com/load/
The clearest example of this I could think of is the Reddit Upvote/downvote buttons how when you click the button, the value for upvotes is updated, the upvote button lights up, and the page DOES NOT reload, you just stay exactly where you are on the page.
I am trying to make a feature similar to this and I can totally figure out how to do it with reloading, but I want it to not reload so the user experience isn't disrupted.
Is it possible to do this with php? or would I need to use javascript or something?
The action I would need it to perform would be a basic update query in the database.
This would be done with an Ajax call to your php script. Ajax is designed for these asynchronous updates and/or reloads.
Another way you can do this is with HTML5 WebSockets. You could have the client send a trigger to the server when the user clicks the upvote, and then the server could update and push back the data. It would, however, be a bit overfill for this.
If what you want to do is to contact a server to either send it some state or to retrieve some state from the server (or both), then you would use AJAX with javascript in order to contact the server without reloading the page. You can then also use javascript to update the state of your page after the operation. That is generally what the Reddit page you refer to is doing.
Conceptually, you'd set up your page like this:
Put the link on the page.
With javascript install an event handler so you are notified of a click on the link.
When the link is clicked, your event handler will be called.
Prevent the default behavior of the link so the browser doesn't navigate to a new page.
Then, in the event handler, send your data to the server using AJAX. You will obviously need a URL on your server and server process that can accept and process the data for you and return a value if you need to.
If you need the response from the server, then set up a callback function for when the AJAX call completes (this will be some indeterminate time in the future).
Then, if you need to change the current page in any way (like show one more upvote), then you can modify the current page with javascript to show that new state.
Ajax is easier to use with a library (like jQuery) that contains some ajax support code, but you can certainly implement it in plain javascript too.
Here's one example of ajax with plain javscript. You can find many other examples with Google.
This MDN tutorial on AJAX seems pretty helpful too to show you how it works.
You could use JavaScript to do this. Here's a quick sample:
Vote Up
Simple solution in JavaScript:
var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);
function onVoteClick(e) {
e.preventDefault();
// do something
}
Here's a fiddle.
NOTE: I see you'd be updating the database. In that case, you would have to use AJAX in the onVoteClick function (or use XMLHttpRequest) for this. JavaScript is a client-side programming language and will not be able to communicate to the server without the use of AJAX or XMLHttpRequest. Using the jQuery library, you should be able to write AJAX pretty easy.
It's called AJAX.
With AJAX you can send a request in the background.
The easiest way is to use the jquery libary for this.
You can also output some data as JSON back to the script if you want to take some other actions depending on the result from that query.
A good tutorial is this one.
It also explains how this requests (called: XMLHttpRequest) work.
You need to use Javascript's XMLHttpRequest
You can use AJAX...
It allows you to use JavaScript (client side) to call server side functions. Here's a good example.
So I have my site at http://example.com/foo/ (under a directory, the main domain is for something else).
Using .htaccess, I've set up my pages so the URLs look like http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com/foo/registration/, etc. This works great and the site loads fine and can be traversed without any Javascript issues.
Now, I'd like to add some AJAX functionality to the navigation. If I'm on http://example.com/foo/ and I click the navigation for "About", it changes the URL to http://example.com/foo/#about and dynamically loads the about page in one section of the site. I also have this working.
I have two problems which involve handling switching between AJAX and non-AJAX URLs.
If I'm on http://example.com/foo/about/ and I click on polls, it would look like http://example.com/foo/about/#polls which doesn't look very pretty. Ideally, I'd want every AJAX URL to be formatted with just the main directory and a hash, like http://example.com/foo/#about.
Should I handle it by forcing an actual (non-AJAX) redirect to the index page with a hash symbol then load it from there?
The other problem is the reverse. If I send http://example.com/foo/#about to someone who has Javascript disabled, or maybe if someone links to it and a bot crawls that link, is there any way to handle that to redirect to the correct non-AJAX page or is this just an unfortunate fact of life I'll have to deal with?
If you need non-javascript support, I'd change all your urls directly to the pages. Like http://example.com/foo/#about to http://example.com/foo/about/
Then, the javascript can intercept it, call event.preventDefault(), and 'redirect' it to #about, which will follow your ajax functionality.
If the client doesn't have javascript, it will go to http://example.com/foo/about/ as normal.
As for being on http://example.com/foo/about/, a javascript client should never get here as they will always be redirected to hashtags.
1) if you redirect to the main page and then use ajax to load the about page that would just not make much sense. what you should do is make everything work through ajax : there should never be a http://example.com/foo/about/ in the first place only http://example.com/foo/#about then you just update the hash and the content when you click on polls.
2) there is no way to avoid, sorry.
In my company we have a web-based tool that you enter an account, press a button, and the page takes a little bit to load, then loads account information. There are several different pages that do the same thing but load different information. I have already been able to make the sites load with direct URL execution (with an intermediate page and some JavaScript) so I only have to enter their account number once. My problem is, I want them to pull up all at the same time to speed things up, but there is some kind of lock that does not let you run the lookup in two pages at once. I want to make my site load the first page, then wait til it loads and immediately begin loading the next page in another tab on my page. Is that even possible in HTML and JavaScript? If so how, if not, what other language do I need to learn today?
check out the jquery's $(document).ready();
simply use
$(document).ready(function () {
//execute script that calls another page, you could use ajax
});
other method is using iframes, which i personally don't recommend
Do you mean something like Pageflakes?
If so, you will need to utilise AJAX (and/or webservices). A good tutorial/source code on building something like this is at DropThings (which is from the same author as PageFlakes).
This is using ASP.NET C# and AJAX Control Toolkit.
If the two URLs are loaded into separate <iframe> elements then you just need to create a load event handler for the first frame to set the src attribute of the second frame.
Still now I knew Its not Possible to change the contents of location bar without changing the page (and Yes I am not talking about #). I've recently noticed github.com. How they are doing that on their site ? they can easily get an event when user clicks on Browser's back or next button. dojo.back also have this feature. But how to change the addressbar with javascript without leaving the page ?
There are two ways:
HTML5's pushState() function. Facebook and Github use this, for example. It allows you to modify the complete URL and fires event handlers when the history state changes. Mozilla has a good overview.
The old variant is to use the hash part of the URL (this is what Twitter does). This means that you change window.location.hash, monitor it for changes and, based on the value of that hash, load the appropriate content. However, this means that when the user requests, say, http://twitter.com/#!/27c3/status/18331752900591616, only the part before the hash sign is requested form the webserver, everything after the hash is only the client's business. This means that the server can not yet decide what content to hand to the client.
try dojo.hash
What you're referring to on GitHub is the # (hash). When you right click on a line number, it adds the number to your hash.
window.location.hash = 'HELLO';
Put that in a page to try it out. It's not possible to change window.location without the page reloading. The back button stuff is a little trickier, but Dojo is your best bet for that. jQuery doesn't provide this. Dojo has pretty clean code though, so you should be able to reverse engineer their functions (if you chose to include that functionality into your own library).
You'll also notice Google is doing the same with: http://code.google.com/p/digitalxero/source/browse/#svn%2Ftrunk%2Flocale%2Fde
If you click on folders (left), it changes the hash, and provides different content.