I have this jquery code:
var baseURl = 'http://www.testdomain.com';
bindItemImage("230015");
function bindItemImage(_itemCode) {
$.ajax({
url: baseURl + 'v3/api/itemimage/' + _itemCode,
type: 'GET',
contentType: "application/json;charset=utf-8",
success: function (data) {
var item = $.parseJSON(data);
var file = baseURl + item.File;
$('.itemPhoto').attr('src', file);
}
});
}
it displays the image just fine in firefox but not in IE or chrome.
Chrome and IE return the right data but I get a JS error message "Cannot read property 'File' of null"
here is the JS fiddle
http://jsfiddle.net/C8Xjy/3/
Thank you
When you're expecting a json response you set dataType to "json", using contentType: "application/json;charset=utf-8", is for when you're sending json in your request. Also when you specify json as the data type it will already be parsed when passed to the success handler.
$.ajax({
url: baseURl + 'v3/api/itemimage/' + _itemCode,
type: 'GET',
dataType: "json",
success: function (data) {
var file = baseURl + data.File;
$('.itemPhoto').attr('src', file);
}
});
DEMO
Related
I have a canvas in my .aspx form page where one can sign a signature, I would like to send the base64 data from the JQuery client side to the C# Asp.Net side. Here I want to upload this base64 data to a database.
(a couple things I tried)
Jquery:
$("#savebtn").bind("click", function () {
var base64 = $('#sketch')[0].toDataURL("image\png");
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: '{ data: "' + base64 + '"}',
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
$.post("EvaluatieForm.aspx", { data: base64 }); // another thing i tried
C#:
var d = Request.Params["data"];
The variable d is null when i put a breakpoint at it.
Does anybody see how I can tackle this hurdle, or make it easier?
(note: I do not have a lot of experience with JQuery)
Your JSON with base64 could be available as request body.
using (StreamReader reader = new StreamReader(context.Request.InputStream))
{
string text = reader.ReadToEnd();
}
If you replace
url: 'EvaluatieForm.aspx'
by
url: 'EvaluatieForm.aspx?data=' + base64
and remove
data: '{ data: "' + base64 + '"}',
then it will work.
Try this:
Just a small change in your existing code, used JSON.stringify to post data.
$("#savebtn").bind("click", function () {
var base64 = $('#sketch')[0].toDataURL("image\png");
var objectToPasss = {data: base64};
var postData =JSON.stringify(objectToPasss );
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: postData,
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
$.post("EvaluatieForm.aspx", { data: base64 });
Try this:
$("#savebtn").bind("click", function () {
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: {
sketch: $('#sketch')[0].toDataURL("image\png")
},
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
where
var d = Request.Params["sketch"];
The data argument in the jQuery ajax() function works in conjunction with the contentType. As you are setting it to application/json, then it stands to reason that data will be serialized, so setting the sketch variable seems about right.
With ajax you can try xhr.
maybe this thread helps you out! :)
How can I upload files asynchronously?
I'm calling Ajax like below
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: path,
dataType: "json",
data: '{ "jsondata":' + jsondata + ',"key":"' + getValue('id') + '"}',
success: function (data) {
callback(data);
},
error: function (error) {
callback(error.responseText);
}
});
I want to get the "Data" value at calling time because after the call the execution doesn't goes to the desired web method and the error is showing like
""Message":"Invalid web service call, missing value for parameter: \u0027obj\u0027..."
I have to track the the Ajax posting value during Ajax call and find out what is the problem with posting data.Is there any tricks to get the data value before Ajax calling?
Any help will be appreciated.
Edit: I'm sending the jsondata value like below
var jsondata = '{ "pagenumber":"' + pagenumber + '","sortColumn":"' + sortColumn + '","sortDirection":"' + sortDirection + '","rowPerPage":"' + rowPerPage + '"}';
Thanks.
I was just checking with below code -
please have a look. please check beforesend content
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/dummy',
dataType: "json",
data: '{dummy:"dummy"}',
success: function (data) {
alert(data);
},
error: function (error) {
alert(error);
},
beforeSend: function(data,data1) {
console.log('before'+data1.data)
},
});
})
});
var path = "test_ajax.php";
var jsondata = "Testing123";
var test = "test";
var data = {jsondata : jsondata,key : test};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: path,
dataType: "json",
data: data,
success: function (data) {
alert("success:"+data);
},
error: function (error) {
alert("failure"+error.responseText);
}
});
I am trying to pass parameter using Get method in Asp.Net. But in address bar url did not change.
Please any one help me to pass parameter using ajax call through url.
Some try from my side is as below Consider url as below
var obj = { templateName: templateName, pageIndex: pageIndex };
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "result.aspx/DisplayResult",
// data: "{'templateName':'" + document.getElementById('txtSearch').value + " &pageIndex : '" + pageIndex + "'' }",
data: JSON.stringify(obj),
dataType: "json",
success: OnSuccess,
error: function (result) {
alert(result.value);
}
});
Your AJAX request looks fine, but there's no reason it'd change the URL. If your request is successful, it will be handled by the OnSuccess function. However, I don't see where you've defined the function referenced by onSuccess. Try this:
var obj = { templateName: templateName, pageIndex: pageIndex };
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "result.aspx/DisplayResult",
// data: "{'templateName':'" + document.getElementById('txtSearch').value + " &pageIndex : '" + pageIndex + "'' }",
data: JSON.stringify(obj),
dataType: "json",
success: function (response) {
// You should see the response object in your dev console
console.log(response);
// If you want to manipulate the URL for some reason after a successful callback,
// do that here, or better, call a function referenced elsewhere that does it.
},
error: function (result) {
alert(result.value);
}
});
[This][1] is the link of my json file and i want to access its data into my ajax success function. tell me how can i do this?
$.ajax({
type: "GET",
url: "abc" + imageId,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d.data;
alert(storyImage);
}
})
Problem is that the object response is:
{
"http://www.livemint.com/template/features/webapps/encodeImage?loid=2.1.1521199245": {
"data":"data:image/jpg;base64,/9j/4AAQSk..."}
}
So you can't say d.data you will have to do d["http://www.livemint.com/template/..."]
But you can do something like this:
var imageId = "2.1.1521199245"
var url = "http://www.livemint.com/template/features/webapps/encodeImage?loid=" + imageId;
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d[url].data;
alert(storyImage);
}
})
Here is a working fiddle: http://jsfiddle.net/cA396/
You need parse JSON into Object
http://www.json.org/js.html
If you do a crossdomain request $.ajax will be not work. See
jQuery AJAX cross domain
I have searched a lot and not been able to find a working solution to why my post request is not sending it's data to the server. I can send the request without data and I get my results from the server, but I just cannot send my data to the server. I have narrowed it down to the "data" attribute and assume I am just doing something wrong. Thank you.
Client
var scriptURL = "default/scripts/serverside/Scripts.aspx";
$.ajax({
type: "POST",
url: baseURL + scriptURL + "/SaveItem",
data: "{}", //works (to return a result)
//data: "{sendData: '" + dataPackage + "'}", //does not work
//data: dataPackage, //does not work
//data: { sendData: dataPackage }, //does not work
//data: { "sendData": dataPackage }, //does not work
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
de("server result:" +result);
}
});
Server
[WebMethod]
public static string SaveItem(string sendData)
{
string result = "received: " + sendData;
return result;
}
Please help, I just cant seem to get it working and know it has got to be a syntax issue...
Similar problems I have found (but no working answers):
https://stackoverflow.com/questions/7258933/jquery-ajax-data-parameter-syntax
https://stackoverflow.com/questions/7262940/webmethod-not-being-called?lq=1
Try this one:
$.ajax({
type: "POST",
url: baseURL + scriptURL + "/SaveItem",
data: $.toJSON({ sendData: dataPackage }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
de("server result:" +result);
}
});
The toJSON will convert your JS object into a proper JSON string. You could also use JSON.stringify
Try this:
var scriptURL = "default/scripts/serverside/Scripts.aspx";
$.ajax({
type: "POST",
url: baseURL + scriptURL + "/SaveItem",
data: {sendData: "string to send" }
dataType: "json",
success: function (result) {
de("server result:" +result);
}
});