javascript or ajax actionlink - javascript

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.

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!

New row in asp:repeater by java script

In my aspx page I have repeater to show list something, I want to add new row and show it in repeater without postback. I will send date soon. I don't want to use AJAX
How to add row to asp:repeater by JavaScript?
The best bet is inpect the code using a tool like firebug retrieve the html for the row, and recreate that using javascript and attach it to the DOM. Dirty but doable. Using something like jquery will make your work easier.
I know you dont want to use AJAX but the cleanest method would be to use an UpdatePanel and do is on the server side using a partial postabck
The repeater just generates repeating html so it's definitely possible to insert new html by using javascript. As #mellamokb mentions those changes won't be visible on the server side.
It's generally a bad idea to mix client and server side rendering with ASP.NET Webforms.
In the case of a list of some kind being dependent on e.g. a combobox it's often a better idea to render lists for all options in the ASPX code. Then use javascript to hide every list except the currently active one.

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

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

Gridview editing without postback

I am using Gridview with Edit option. When i click on Edit button row becomes editable with Update & cancel button. But this process causes a postback which degrades performance in my scenario. Is there any other way available to make row editable without causing a postback(maybe using javascript)?
Asp.net has this handy feature built in. Its called an update panel and it allows you to specify part of a page to update. It uses ajax to perform a behind the scenes postback.
Here is an article on the subject by 4 Guys from Rolla which contains some code samples.
You can do this from javascript too. two options:
Using pageMethod call a method inside code behind with required parameters.
Expose a web service and set the DB update function there and call the function from javascript.
Using update panel may cause certain issues...

Categories

Resources