Member_2_1242703
asked on
Jquery/JSON passing value from one function to another
I'm struggling in passing a value from one function to another. When doing this:
Everything works perfect.
This however does not:
Is this line correct: data: '{name: "' + x + '" }',
if so, what am I doing wrong here?
<script type = "text/javascript">
$(document).ready(function () {
$('.btnClick').click(function () {
var tbNotes = $(this).closest('tr').find('.tbNotes');
SetGig(tbNotes.val())
});
});
</script>
<script>
function SetGig(x) {
alert(x);
}
</script>
Everything works perfect.
This however does not:
<script type = "text/javascript">
$(document).ready(function () {
$('.btnClick').click(function () {
var tbNotes = $(this).closest('tr').find('.tbNotes');
SetGig(tbNotes.val())
});
});
</script>
<script>
function SetGig(x) {
$.ajax({
type: "POST",
url: "request.aspx/GetPSNData",
data: '{name: "' + x + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert("gigety");
}
</script>
Is this line correct: data: '{name: "' + x + '" }',
if so, what am I doing wrong here?
If you wan to send data as JSON then you should change data: '{name: "' + x + '" }', with JSON.stringify({name: x})
Please post the Response from the request as shown in the console (F12)
Firefox
F12
Select Console
Make sure network events is turned on
Find the call to request.aspx/GetPSNData
Expand it
Select the response tab
Screen grab the response and / or cut and paste here
Chrome
F12
Select Network
Make sure XHR is selected
Click the script reference on the left
Click the response tab on the right
Copy and paste the response.
Firefox
F12
Select Console
Make sure network events is turned on
Find the call to request.aspx/GetPSNData
Expand it
Select the response tab
Screen grab the response and / or cut and paste here
Chrome
F12
Select Network
Make sure XHR is selected
Click the script reference on the left
Click the response tab on the right
Copy and paste the response.
ASKER
<script type = "text/javascript">
$(document).ready(function () {
$('.btnClick').click(function () {
var tbNotes = $(this).closest('tr').find('.tbNotes');
SetGig(tbNotes.val())
});
});
</script>
<script>
function SetGig(x) {
$.ajax({
type: "POST",
url: "/request.aspx/GetPSNData",
data: { name: x },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert("gigety");
}
</script>
Gave me:
{"Message":"Invalid JSON primitive: name.","StackTrace":" at System.Web.Script.Serializ
<script type = "text/javascript">
$(document).ready(function () {
$('.btnClick').click(function () {
var tbNotes = $(this).closest('tr').find('.tbNotes');
SetGig(tbNotes.val())
});
});
</script>
<script>
function SetGig(x) {
$.ajax({
type: "POST",
url: "request.aspx/GetPSNData",
data: '{name: "' + x + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert("gigety");
}
</script>
Gave me:
{"Message":"Invalid web service call, missing value for parameter: \u0027rid\u0027.","StackTr
Message":"Invalid web service call, missing value for parameter: \u0027rid\u0027That response indicates an error was encountered in your server script - you are going to need to fix that before we can look at the JavaScript code.
Did you try Mukesh Yadav suggestion
JSON data property names must be enclosed in quotes
You had
data: JSON.stringify({name: x}),
JSON data property names must be enclosed in quotes
You had
data: '{name: "' + x + '" }',
Which in theory should bedata: "{'name': '" + x + "'}",
Note the name is enclosed in quotes. Doing it this way is extremely cumbersome and error prone. JavaScript has a function that turns a JavaScript object into a JSON string - as show in the first example. Try that and see what you get.
ASKER
I have no idea what that could be?? Here I have simplified my code (A little different, happens on change of a DDL) but am getting the same error.
HTML:
Code behind:
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type = "text/javascript">
function SetPSNData() {
$.ajax({
type: "POST",
url: "/test.aspx/GetPSNData",
data: '{name: "' + $("#<%=ddlTest.ClientID%>")[0].value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
$('#<%=lblTest.ClientID%>').val(response.d[0]);
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlTest" runat="server">
</asp:DropDownList>
<br />
<br />
<asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
<br />
</div>
</form>
</body>
</html>
Code behind:
public partial class test : basePage
{
protected void Page_Load(object sender, EventArgs e)
{
ddlTest.Attributes.Add("onchange", "SetPSNData()");
ddlTest.Items.Add("");
ddlTest.Items.Add("431");
ddlTest.Items.Add("giggety");
ddlTest.Items.Add("giggety!");
ddlTest.Items.Add("awllrite");
}
[System.Web.Services.WebMethod()]
public static ArrayList GetPSNData(string rid)
{
ArrayList arraylist = new ArrayList();
arraylist.Add(rid);
return arraylist;
}
}
ASKER
data: "{'name': '" + x + "'}", and data: JSON.stringify({name: x}),
produce invalid service call
produce invalid service call
Please try this - take the json header out.
<script>
function SetGig(x) {
$.ajax({
type: "POST",
url: "/request.aspx/GetPSNData",
data: { name: x },
}).done(function(Response) {
alert("gigety");
})
}
</script>
ASKER
That worked...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Geez, you're not going to believe this..
Changed:
to
Works fine. Thanks for pointing me in the right direction. Apparently the json data name and sting name have to match. :-\
Changed:
public static ArrayList GetPSNData(string rid)
to
public static ArrayList GetPSNData(string name)
Works fine. Thanks for pointing me in the right direction. Apparently the json data name and sting name have to match. :-\
Open in new window