jQuery Ajax call for buttons on a list
I have a list of data that i have in a view from an asp.net mvc application. It's a list of stock and I have two images (a plus and a minus) on the end of each row which will allow me to increase or decrease stock quantity. It works fine at present with a call to the mvc action but since the list is long I want to use jQuery and AJAX to have the call go without a refresh. I want to do this with unobtrusive javascript so don't want onclick handlers on my images. Since I'm just starting out with jQuery I have no idea how I can iterate all the images and add the function. Here are the images with the form tags as they stand:
<td>
<% using (Html.BeginForm("Increase", "Sto开发者_开发百科ck", new { Id = item.StockId }))
{%>
<input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" /> <% } %>
</td>
<td><% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId }))
{%>
<input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" /><% } %>
</td>
Can anyone help me out a little?
I would recommend you using the jquery form plugin which allows you to unobtrusively ajaxify your html forms. So given those forms:
<td>
<% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId },
FormMethod.Post, new { @class = "changeStock" })) { %>
<input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" />
<% } %>
</td>
<td>
<% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId },
FormMethod.Post, new { @class = "changeStock" })) { %>
<input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" />
<% } %>
</td>
You could ajaxify them:
$(function() {
// Ajaxify the forms having the changeStock class
$('form.changeStock').ajaxForm(function(result) {
// On the success callback update a container which holds
// the items in order to refresh the UI. For this the controller
// actions you are posting to need to return PartialView with only
// the parts of the html that needs to be updated.
$('#listOfItems').html(result)
});
});
This is untested, but hopefully it gets you going in the right direction. I'll updated my answer if you can provide more info based on my above comment.
$(document).ready(function(){
//this will target all <input type='image'> controls for all forms on the page. A better practice would be to focus on just the target forms
// perhaps based on the ID of a containing div, etc
$("form [input[@type=image]").click(function(){
//$image is now a jQuery object variable referencing the clicked image
var $image = $(this);
//$form is now a jQuery object variable referencing the parent <form> of the clicked image
var $form = $image.parent();
//stockId is now a variable referencing the id of the form, assuming this is the stockID we want to manipulate
var stockId = $form.attr("id");
//probably a better way to do this, but to know if we want to go up or down, I checked the src attribute of the <input type='image'> control
//if the url of the image contains add, the direction is add, else it's del
var direction = $image.attr("src").contains("add") ? "add" : "del";
//call a function to handle the add,del
shiftStock(stockId, direction);
});
});
//a javascript function that accepts the ID of the stock and the direction we want to go
function shiftStock(stockId, direction){
//do an ajax call using jQuery, passing in our stockId and direction
//I'm using a get, but and an XML return data Type, but this could just as easily be a post with json, etc
$.ajax(
type: "GET",
url: "webserviceurl??",
dataType: "XML",
data: "stockId=" + stockId + "&direction=" + direction,
success: function(xml){
//parse the returned xml if need be to handle any UI updates, like new stock numbers, etc?
alert(xml);
},
error: function(xml, error, status){
alert(error);
}
);
}
精彩评论