reload div without reloading page using javascript - 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

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!

javascript or ajax actionlink

I am working with mvc4 and new to working with it. I have a question around the Ajax ActionLink.
I have a long list of products, with each, there is an add to bag button. In the past I would use jquery to bind a click event to this button and then use javascript to make a server side request to a controller action.
I want all interaction to not cause a full page postback.
I am wondering is it best to follow my approach with javascript or use the Ajax ActionLink? What are the pros and cons of either approach?
Both are same.
Ajax ActionLink : less to write, works with conjuction Jquery un-obtrusive. Not much control on the markup.
HtML Link + Jquery Ajax call : will you give full control on the click event, you can add extra options to it.

Refresh a webpage with following action

I want to do a very simple thing with AJAX. Apologize if it sounds very simple.
If I add some new data to my database from my client side JS page (with AJAX call) with a save button, then I want make the newer data visible with that button click as well. For this, I assume I have following options -
Refresh the page (which does not work for me since initially my table is hidden and refresh takes the page to its initial position. I also tried to refresh page and then added one action to make that table visible but unfortunately it just refreshed the page and did not perform the following action)
Refreshing the part of the page (that certain div) which I have no idea how to do.
So my question is -
Is it possible to refresh the page followed by other functions?
How can I refresh a div using JS?
Either of the solutions would be fine for me. Thanks in advance.
To refresh a div, as far as I know you need a php page to get the info you want to be displayed in there then use ajax function to put that page in there.
You can have the server side code return the contents of the div to change after the data is saved.
Using jQuery it's very easy to change the content of a div after making an ajax call.
$.ajax({
type: "POST",
url: "/someurl",
data: theDataToSendToTheServer,
success: function(data){
$('#theDivsId').html(data);
}
});
JQuery's html() attribute will allow you to update a single div via Javascript.
You can use JQuery's Post method to update the Server and/or retreive new data to refresh the div with.
Not using jQuery? It's still pretty easy.
document.getElementById('theIDofYourDiv').innerHTML = 'the new contents of your div, including <span>nested HTML tags</span> if you want, provided as a string';

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

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

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.

Categories

Resources