I've got some Ajax code with calls a WebMethod from within my back-end code and now want to be able to databind the information it receives to a repeater.
Here's my Ajax
$.ajax({
type: "POST",
url: "default.aspx/Call_Car",
data: '{ Ref: "MD12355"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var cars = msg.d;
$.each(cars, function(index, car) {
$('.test').text(car.PICKUP);
$('.test2').text(car.SUPPLIER);
});
}
});
At the moment it is writing the fields PICKUP and SUPPLIER to my labels but ideally i want it to be able to databind my repeater with all the data.
Here's the response I get back from this call
{"d":[{"SUPPLIER":"Magos Car Hire","PICKUP":"Funchal Airport"}]}
Is it possible to do this?
Thanks
You cannot, a repeater binds on the server side, and you are returning client side data.
You can use one of the jQuery grids or a variety of other grids (kendoui im particularly fond of from telerik)
Or you could request the page from the server that contains the data and grid and load that via ajax.
This is addressed in a bit more detail here:
Bind Data to Repeater using Ajax
Related
All the articles i've found talks about either uploading both files and text values using non-ajax form post, or uploading only files with ajax post requests. Is there a way to upload both files and text values using ajax post to mvc action where i can get model binding as well as Request.Files?
After making some experiments, turns out the code doing this is also not that complicated:
var formData = new FormData($("form")[0]);
$.post({
url: "/Home/Upload",
contentType: false,
processData: false,
data: formData,
success: function () {
alert("done");
}
});
The tricky part is the construction of FormData object. There's actually no need to manually add files and other text values, as long as all the inputs are inside a form tag.
I have a web page which is redirected from a another page and have a querystring in it. now this page is calling a Jquery AJAX call to do some other task.
Page URL is like : http://localhost:1041/Inventory/Inventorydetail.aspx?invoiceid=3
now this page is calling a AJAX post to delete a record from the grid.
$(".DeleteInvoiceLine").click(function() {
//Get the Id of the record
var record_id = $(this).attr("id");
var loc = window.location;
// Ask user's confirmation
if (confirm("Do you want to delete this record?")) {
$.ajax({
type: "POST",
url: loc + "/DeleteInvoiceLineEntry",
//Pass the selected record id
data: "{'args': '" + record_id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msgstr) {
var msg = $("#ctl00_ContentPlaceHolder1_success");
msg.html(msgstr.d);
msg.show();
}
});
}
return false;
});
so when I call the AJAX call the page_Load event is called instead of the webmethod "DeleteInvoiceLineEntry".
if I have my page without the querystring passed it works fine.
could you please suggest me how I can call a AJAX call on the page which has a querystring data init.
I tried it both way passing the static URL
Not working
url: "Inventorydetail.aspx?invoiceid=3/DeleteInvoiceLineEntry"
Working (if there is no querystring data in the page)
url: "Inventorydetail.aspx/DeleteInvoiceLineEntry"
Thanks for your quick help.
Don't attach query string when you call ajax. It will confuse the communication as ajax actually use query string to pass json data. If you want to pass invoiceid to the ajax, include it in json data.
Change
var loc = window.location;
To
var loc = window.location.href.replace(window.location.search, '');
as Taesung Shin mentioned. The query string in the URL is confusing your application.
My first forray into ajax webpages is causing me some problems.
My basic structure is that I have a table on a page, which I want to reload without refreshing the entire page.
So on clicking a button on the page it fires of this:
function RefreshMissionsAjax() {
//fade out the old table.
$(clientID('MissionsDisplay')).fadeOut(500);
//request the new value from the page (calls the GetIncompleteMissions() method in the MissionViewer.aspx.cs page)
$.ajax({
type: "POST",
url: "MissionViewer.aspx/GetIncompleteMissions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$(clientID('MissionsDisplay')).html(msg.d);
$(clientID('MissionsDisplay')).fadeIn(500);
},
error: function (xhr, ajaxOptions, thrownError) {
$(clientID('MissionsDisplay')).html('An error occured while trying to refresh the page data.');
$(clientID('MissionsDisplay')).fadeIn(500);
}
});
}
And I have in the code bedind of an aspx page:
[WebMethod]
public static string GetIncompleteMissions()
{
return GetHTMLTable();
}
This method just grabs some data, and creates a html table - nothing too fancy.
When the returned table is small (a dozen rows or less) then it works like a charm.
But when it gets larger, it takes a long long time.
At 100 rows it can take 5 minutes to render the table.
At 1000 rows I have left it for 30 minutes and nothing will happen after the fadeout.
(NB - it loads fairly quickly on the pageload, before the ajax refresh is used, so it is not the actual server side creation of the table thats the problem).
This is my first real attempt at doing something like this, so I dont know if this is the best way to do it - it was just something i pieced together that worked great when i was testing with small datasets.
Now, not so much.
Any ideas how I can make it usable?
If possible, use WCF instead, it should be lot faster.
Anyway, don't pass the raw HTML back, have the service return minimized data in JSON format then use this data in the onsuccess event to create the table on the fly with jQuery.
For example have the service return JSON array with 1000 items then iterate this array and add one row for each item.
In my web application I have a textbox called "Address" which is multiline and have 3 rows and 250 characters.
I am calling a javascript function in which i am calling AJAX to send the data to a webservice for some processing but AJAX is unable to process variable which contains multiline text.
I am reading multiline textbox value like this in javascript function.
var puid = document.getElementById('<%=userid.ClientID%>').value;
var paddress = document.getElementById('<%=xaddress.ClientID%>').value;
and passing like this.
$.ajax({
type: "POST",
url : "DataService.asmx/UpdateProfile",
data: "{'puserid': ' " + puid + 'padd': ' " + paddress + " '}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
If I comment paddress parameters in ajax "data:" it works fine other wise ajax goes on "OnError" ...Oh i just figured out that my address has 'B' Area (apostrophe) in it thats why it its giving this problem. So how to parse apostrophe as textbox value and read in javascript variable and write back in database similary.
I'd use the jQuery Post function instead. Your GET request URIs shouldn't have new line chars in them.
var puid = document.getElementById('<%=userid.ClientID%>').value;
var paddress = document.getElementById('<%=xaddress.ClientID%>').value;
puid => string value
paddress => string value
$.ajax({
type: "POST",
url : "DataService.asmx/UpdateProfile",
data: {'puserid': puid , 'padd': paddress }, need = >","
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
I've looked around, and I'm trying to find an elegant solution to this, and I'm yet to find one. I have an ASMX web service in .NET that I'm trying to call that requires parameters.
I'm using jQuery on the client side to call the service and my jQuery code looks something like this:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/Reviews/HotelReview.asmx/SubmitReview",
data: "{'name': '" + name + "', " +
"'info': '" info + "'}",
processData: true,
beforeSend: function() { startSubmit(); },
complete: function() { submitComplete(); },
error: function(xhr) { submitError(xhr); },
success: function(msg) { submitSuccess(msg.d); }
});
It works very well, except when either name or info contain the ' character, a single quote. Simple enough, because my JSON defines the end of the value of the field and is a single quote. When either of these fields contains a single quote, all I get is an "Internal Server Error", but further inspection using Fiddler showed me the results (I won't bother to post them) indicating the single quote issue.
I've put something in place temporarily to remove the single quotes on the client side and put them back in on the server side, but this is far from elegant. Is there a more elegant way to escape these single quotes so that my code can work?
The specifications say that in JSON you can only use double-quotes around keys and values so try it with double quotes. I am pretty sure your error will be solved.
You may want to use json.js to encode / escape special characters in the actual values so you don't run into problems with values containing " for instance, or the stringify method from http://www.json.org/js.html.