$.ajax({
type: "POST",
url: "ClaretExamSchedule.aspx/LoadFatherInfo",
data: JSON.stringify({ appId: appId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
**I want to pass the return values here to ASP Textboxes**
}
});
Given the code above, I passed a parameter for codebehind the method LoadFatherInfo, now
I returned an ArrayList and I want every datum to be displayed using textbox.. Sorry for my English but I hope you get my point, any help will be much appreciated. Thanks!
Assuming your text boxes and web method will something similar to the code below:
<input type="text" id="Father1" value="" class="father" />
<input type="text" id="Father2" value="" class="father" />
<input type="text" id="Father3" value="" class="father" />
[WebMethod]
public string[] LoadFatherInfo(appId appId)
{
// Do Stuff
var fatherInfo = new List();
fatherInfo.Add("John");
fatherInfo.Add("Jim");
fatherInfo.Add("Joe");
return fatherInfo.ToArray();
}
you could change your ajax call to something similar to the javascript below:
$.ajax({
type: "POST",
url: "ClaretExamSchedule.aspx/LoadFatherInfo",
data: JSON.stringify({ appId: appId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: PopulateFatherBoxes,
error: OnError
});
function PopulateFatherBoxes(data, status) {
var i = 0;
$(".father").each(function() {
$(this).val(data.d[i]);
i++;
});
}
Related
Can someone explain me why this gives me an error?
My ajax call something like this.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
var values = JSON.stringify({ data: $('#form1').serializeArray() });
alert($('#form1').serializeArray());
$.ajax({
type: "POST",
url: "Default.aspx/Test",
contentType: "application/json; charset=utf-8",
scripts: true,
dataType: "json",
data: values,
success: function (data) { $('#results').append(data.d); },
error: function () { $('#results').append('hata'); }
});
}); });
</script>
</head>
<body>
<form runat="server" id="form1">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<button id="btn1" type="button">bummm</button>
<div id="results"></div>
</form>
</body>
</html>
[WebMethod]
public static string Test (string data)
{
return "İşlem başarılı"+data;
}
It says me {"Message":"Type \u0027System.String\u0027 is not supported for deserialization of an array.","StackTrace":"
I think this happens because you wrong call your webmethod with ajax.
Your webmethod have one parameter named data with type string, but you try send without name, so try change your code like this:
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: $(e).serializeArray()});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};
UPDATE
this method work on new project
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:JSON.stringify({data: 'text'}),
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
if in your case it not work then possibly helps if you provide little more code
UPDATE 2
turns out it's all simple than i thought!
serializeArray() returns Array! So it find on server method with parameters something like List<object>, so to solve you must stringify array too
so try this code
var KaydetDataWithAjax = function (e)
{
var values =JSON.stringify({data: JSON.stringify($(e).serializeArray())});
alert(values);
$.ajax({
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
url: "Harita.aspx/HaritaKaydet",
scripts: true,
data:values,
success: function (dt) { alert(dt);},
complete:function(){},
error: function () { alert('error'); }
});
};
I keep getting a 500 with the following C#/jQuery. Any given implementation may not be right and thats not a huge issue. I'm just trying to get a hello world up. It works if the c# has no arguments but as soon as I try to recieve data it gives the 500.
[WebMethod]
public static string Test(string s)
{
// never gets here
}
$.ajax({
type: "POST",
url: "ajax.aspx/" + method,
/*async: true,*/
data: "{data:'" + data + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
callback(data.d);
}
});
latest attempt is this which still doesnt work:
[WebMethod()]
public static string Test(string data)
{
// never gets here
return "hello world";
}
$.ajax({
type: "POST",
url: "ajax.aspx/Test",
data: "data: {data:'abc'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("back");
}
});
I think you don't have to use MVC to make it work. I think the way you are passing json parameters are wrong. Please check below code and try and do let me know whether it works.
[WebMethod()]
public static string Test(string data)
{
// never gets here
return "hello world";
}
$.ajax({
type: "POST",
url: "ajax.aspx/Test",
data:'{"data":"abc"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
try this
[HttpPost]
public ActionResult Test(string x)
{
// never gets here
return Json(true)
}
$.ajax({
type: "Post",
url: "ajax/Test",
data: {x:'abc'},
dataType: "json",
success: function (data) {
alert("back");
}
});
In my javascript, I have:
var testdate = "{'TheNewDate' : '12/02/2011'}";
$("#mydiv").click(function () {
$.ajax({
type: "POST",
url: "../Pages/Appointments.aspx/GetAppointements",
data: testdate,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFn,
error: errorFn
});
});
In my code behind I have
[WebMethod]
public static string GetAppointements(string DateInput)
{
var t = DateInput;
However, when I click to run the call, I get the error function to activate. When I change the code behind function to public static string GetAppointement() it works. But I guess my goal is to pass a parameter to the code behind. What am I missing?
Thanks.
Your parameter is called DateInput and not TheNewDate, so:
$('#mydiv').click(function () {
$.ajax({
type: 'POST',
url: '../Pages/Appointments.aspx/GetAppointements',
data: JSON.stringify({ dateInput: '12/02/2011' }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: successFn,
error: errorFn
});
});
You should make your JSON data match the parameter name in the web service method.
var testdate = "{'DateInput' : '12/02/2011'}";
my target is to create form that validated in the client side, and only when it is valid, send ajax call to asmx web service. i manage to do that two separately: client-side validation and ajax send to web service, and i want to combine this two. how?..
i have this form (i simplify everything for simple example):
<form id="ContactForm" runat="server">
<label for="name">Full Name</label>
<input type="text" name="name" id="name"/>
<input id="submit" type="button" />
</form>
the client validation looks like:
$(document).ready(function() {
$("#submit").click(function() {
var validator = $("#ContactForm").validate({
rules: { name: { required: true } },
messages: { name: errName }
}).form();
});
});
and the ajax send looks like this:
$(document).ready(function() {
$("#submit").click(function() {
var myMailerRequest = {name: $('#name').val()};
var data = JSON.stringify({req: myMailerRequest});
$.ajax
({
type: "POST",
url: "ContactFormMailer.asmx/SendContactForm",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxSucceeded(msg);
}, error: AjaxFailed
});
});
});
Thanks!
You can use the submitHandler option of .valdiate() for this, it only executes when a valid form is submitted (it has an invalidHandler for the opposite), like this:
$(function() {
$("#submit").click(function() {
var validator = $("#ContactForm").validate({
rules: { name: { required: true } },
messages: { name: errName },
submitHandler: function() {
var myMailerRequest = {name: $('#name').val()};
var data = JSON.stringify({req: myMailerRequest});
$.ajax({
type: "POST",
url: "ContactFormMailer.asmx/SendContactForm",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
}
}).form();
});
});
Since you're not using this though, it might be much more readable in 2 functions, like this:
$(function() {
$("#submit").click(function() {
var validator = $("#ContactForm").validate({
rules: { name: { required: true } },
messages: { name: errName },
submitHandler: ajaxSubmit
}).form();
});
function ajaxSubmit() {
var myMailerRequest = {name: $('#name').val()};
var data = JSON.stringify({req: myMailerRequest});
$.ajax({
type: "POST",
url: "ContactFormMailer.asmx/SendContactForm",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
}
});
The only other change was shortening your call to AjaxSuceeded (maybe this can't be done, only because of your simplified example), but other than that...just submit the form from the submitHandler callback and you're all set.
Here is a snippet of my html:
<input id="btnGetDate" type="submit" value="Get Date" />
<div id="Result"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#btnGetDate").click(function() {
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
});
});
</script>
My Page Method id defined as follows:
[System.Web.Services.WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
When I click the Get Date button, I saw the date flash on the screen for a second, but since the whole page is loading, it disappears and when I view it in firebug, I see it is doing the POST, but quickly disappearing. Any ideas on how to resolve this?
Try returning false from your $("#btnGetDate").click() event handler:
$("#btnGetDate").click(function() {
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
return false;
});
karim79's solution will do the job in Internet Explorer - but to make sure that it works in Firefox and other browsers as well, you probably want to add an input argument to the click handler that will take the click event, and stop the event.
$("#btnGetDate").click(function(ev) {
ev.stopPropagation();
$.ajax({
type: "POST",
url: "Date.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#Result").text(msg.d);
}
});
return false;
});