ASP.NET MVC 2 Reload pages without refresh and keep URL changing - javascript

I am creating a project using ASP.NET MVC. I want to show content of pages in the placeholder without refreshing the page, something like ajax but WITH the URL changing, How can I accomplish this ?
Thank you for your responses

If you change the url of the browser this will automatically perform a redirect and refresh the entire page. You could use the hash sign (#) which doesn't trigger a refresh. For example if you change /home/index#foo to /home/index#bar the page won't refresh but you could send an AJAX request behind the scenes to update some placeholder.

I've used the jQuery BBQ plugin (http://benalman.com/projects/jquery-bbq-plugin/) with great success. This and the jQuery Templating engine would be great for what you are trying to accomplish.

Related

Implement hash URL using jQuery in the AJAX calls in Spring MVC

I'm a beginner in using jQuery along with Spring MVC framework, trying my luck on building a basic utility that might be helpful at work. I've made a bunch of AJAX calls using jQuery in the code.
Now, I want to make use of the back button of the browser and figured I'd need to use an anchor in the URL. Not sure about how to proceed, after a bit of browsing tried window.location.hash="value" in the success part of the AJAX call, although the hash was appended in the URL, the back button did not work.
Any tip would be helpful.
Thanks :)
So the problem is that whenever you change the hash portion of the URL, the page does not reload or anything. That's the beauty and the curse of the hash... : )
Your solution only has one half of the overall solution: changing the hash value of the current url, so that your link can be shared with others.
In order for the back button to work, you will need to play around with the history API.(A good tutorial is here)
In your case, you will basically have to redo your previous ajax calls to get back the state from the previous page when the "popstate" handler is called. Or you could store the ajax response as you pushState to the history API. But either way, you will have to re-apply your dynamic page building on popstate.
The back button usually asks the server for the previous page's URL. Now in a single page application, you will have to do all that work yourself an rebuild the previous page somehow.
Hope this helps!

reload div without reloading page using javascript

I am currently just working on simple and final UI changes for a website I am working on and was wondering if someone could help me figure something out.
I have a page that has three divs on it and I was wondering how I could use javascript to reload the content of these divs without reloading the page when someone clicked on a certain link?
Thanks!
Use AJAX. Watch here
Or as suggested in other answers - use a framework or a library like jQuery which makes element selection and AJAX as easy as possible
in case you need to go to the server to get the content: read about AJAX. there is a good jQuery framework making ajax calls very easy.
if you don't need to go to the server just select the element you need and change his innerHTML value. again - you can select elements via jQuery in a more easy way.
To reload this div you can use ajax call.
With your ajax call, your get your data, without reloading the page, and then replace your div content with the new data.
something like that
$.ajax({
type : 'get',
url : 'urltogetdata',
success : function(data){
$('#yourdiv').html(data);
}
});
this code is jquery code, but it work with other lib

Onclick refresh only div content, Not all aspx page

I have two pages that inherit from one master page, First.aspx or second.aspx. Navigation is on master page. If I am on first.aspx page & want to go to second.aspx onClick. I just want to load My contentplaceholder, not refresh all of the page. Is this possible or not?How do I do this if it is possible?
I have tried using:
$(function() { $("#btn").click(function() {
$("#Content").load("Second.aspx");
});
});
I have also tried using this:
function SelectRol() {
window.location = 'Second.aspx';
return false;
}
Unfortunately, that is not going to work. You could use ASP.Net UpdatePanel for partial page refreshing, or better use JQuery Ajax methods to load HTML content you want to show.
See http://www.dotnetfunda.com/articles/article1123-partial-page-refresh-using-jquery.aspx for more information about this solution.
Its better to use ajax call if you don't want whole page to get refreshed . or you can use AHAH as the one facebook use for the chat box
There is no such thing as Partial Loading / Partial postback. We can only do Partial Rendering. If you need to load a second page that page's entire page event life cycle would happen which will include the Master page's events.
If you need a true Ajax mechanism. Render your scripts initially which will construct your UI and subsequent communication will be transmitting only the data using RESTful / JSON service.

Adding a like button to a post that doesn't refresh the page

I am trying to add a like button to a post in my RoR application. The two models I have are Post and Like.
On my webpage I am going to put the like button right next to the post button, but when users click the like button, I would like to have th request run in the background and not have to refresh the page.
Does anyone know of a simple way I could do this or where I can learn more about how to do it?
I am using the jQuery JavaScript library in my Rails application.
If you're using jQuery, you should use the jQuery.ajax() method, or one of it's deriviatives depending on your purposes. It runs in the background, and is very easy to use.
You can use jquery's ajax
api here
http://api.jquery.com/jQuery.ajax/
or even this one
http://jqapi.com/#p=jQuery.ajax

Classic ASP - How to pass a variable instead querystring (refresh) via Jquery(no refresh)

i'm working on this application that has a calendar on a page that has a lot of request.form("var") inside.
This is a monthly calendar and it has on the top previous month and next month .
When i click now on next month i get an URL like: ?date=8/14/2010
My question is how to pass this value to the calendar via jquery with no page refresh .. because if i use page refresh i loose the request.form("values")
Hope i make myself understand ,
thank you
If you use AJAX, you can send requests and get information without refreshing the page. As far as I know, JQuery has some functions built in to make AJAX pretty easy.
Another common way this is done is to use the anchor rather than the query string (e.g. http://example.com/page.asp#8/14/2010), because then you can still link directly to the page as it is, and changing the anchor doesn't cause the page to refresh and can be red by JavaScript. GMail and Facebook both use this, which is why you can scroll through pictures fast without reloading the page for every picture.

Categories

Resources