Change 'src' attribute of images by AJAX response - javascript

I'm trying to change src attribute of image by ajax request,
$.ajax({
url: "/l/"+id1,
type: "get",
dataType: "json",
success: function (data) {
$data = $(data);
$("#like" + id1).attr("src",$data");
}
});
Response is something like /uploads/like.png
Without dataType: "json" , I receive error:
Syntax error, unrecognized expression: /uploads/like.png
(So Ajax works and response is received) , after adding dataType:"json" error gone but nothing more happens.
HTML part (produced by server):
(every image has different id1, e.q id1=33 , so response goes to each selected image.)
<img id="like33" src="/uploads/default.png" />

You could do something like this:
$.ajax({
url: "/l/"+id1,
type: "get",
dataType: "json",
success: function (data) {
$("#like" + id1).attr("src", data);
}
});
If you are receiving the string /uploads/like.png in the ajax response, you can just pass it into the attr() method.
Hope it helps.

Related

Show Ajax error response as a webpage

from an Ajax call that was build up like this:
function GetData() {
$.ajax({
type: "POST",
url: "#Model.RouteForAjaxLastValue",//"/RCharts/AjaxMethod",//
data: "{Id: " + lastID+ "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
})
I sometimes get responses like this:
I can see that this is meant to be displayed as a webpage since its an entire page html formatted.
But is there a way to display that directly as a new page mabye?
It cuts of the rest of the message in the alert before I can even get to read what the error may be...
Use $("html").html(response.responseText); inside your success function .
success : function(response){
$("html").html(response.responseText);
}
You should probably use console.log()
but this should append it to the body:
$('body').append(response.responseText);

Post data don't send using jQuery Ajax request

how to send large base64 data Array using jQuery Ajax. Here is my code :
$.ajax({
type: "POST",
url: "addPhoto.php",
data:{photosArray:photosArray},
dataType: "json",
success: function(data) {
$(data).each(function(){
...
});
}
});
photosArray contains between 3 and 12 very long strings like :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0...
Is there any limit for POST data size in Ajax?
Open your php.ini file and find the line stating upload_max_filesize. The default it set to 2M, which is 2MB. Try increasing it to 3MB and see if you are still receiving the error.
And use
"cache": false
Is your data properly declared ? It can be either String, object or array. try following
$.ajax({
type: "POST",
url: "addPhoto.php",
data:"{photosArray:photosArray}",
dataType: "json",
success: function(data) {
$(data).each(function(){
...
});
}
});

Populate a html div with json data received from a server

I need to have a html div populated with the json data received from the server which is a json-rpc server and it retruns an application/jsson-rpc content type and i can see the result in the chrome and firefox dev tools... I need to view it as part of the page inside a given div
i have this script to populate the mybox div but it gives nothing
var returnedinfo;
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
I also tied having the populating function outside the ajax block when the request is done
request.done(function(msg) {
$("#mybox").text(msg);
});
This just return an empty array like this
[object Object]
and nothing else help will be appreciated.
you need to append the key of the json item.
$("#mybox").html(json.key);
Add dataType to your ajax request.
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
try this my working example
look contentType and html function to replace html of mybox element
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
url: 'url',
success: function (dataRes) {
$('#mybox').html(dataRes);
},
error: function(a,b,c) {
}
});
Note that in this case dataRes in success function is an html string like <strong>test</strong>. If your server side function returns a json object you should add dataType: 'json' to ajax request and then you can use properties of dataRes object like here $('#mybox').html(dataRes.property1);

Submitting a form using jQuery and Ajax changing the action

I have a form, which I am trying to submit using jQuery and AJAX. I am triggering the submit by clicking on a link, which I've added an onclick method. Below are two code samples to submit the same form - the first works, but isn't AJAX, while the second method gives me a 404 error.
function submitmyform(formid) {
$(formid).submit();
}
The second example attempts to use AJAX, given the same parameters:
function submitmyformajax(formid) {
$.post({
type: "POST",
url: $(formid).attr('action'),
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
}
An alternate way I tried with the submitmyformajax is:
function submitmyformajax(formid) {
$.post({
type: "POST",
url: 'somehardcoded/url',
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
}
For some reason, this continues to give me a 404 error, though the action on the form is correct (the URL it shows me is not the same as the action on the form).
I checked the error console, and it shows the 404 error as pointing to somehardcoded/[object%20Object] instead of what I specified in the method.
What am I doing wrong?
I think you are getting $.post and $.ajax mixed up. $.post is short hand for $.ajax, as such takes a string url as first parameter, an object as the data, and a function as the callback. $.ajax on the otherhand takes an object as configuration, as you are doing
i.e. Post signature is
$.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
which is shorthand for
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
You seem to be using a mixture of both, and hence getting strange behavior, as it is calling toString on the first parameter you are passing in to the $.post which is [object Object] and then that is url encoded to [object%20Object]
Either use
$.post($(formid).attr('action'),
$(formid).serialize(),
function(data) { alert(data); })
or
$.ajax({
type: "POST",
url: $(formid).attr('action'),
data: $(formid).serialize(),
success: function(data) { alert(data); }
});
use this instead..
$.post(
'somehardcoded/url',
{data:$(formid).serialize()},
function(data) {
alert(data);
}
);

jQuery and Rails ajax request and response

Trying the basic stuff,
request with data and response with data and print it with jQuery and Rails
This is the front code.
$("#internal_btn").click(function() {
//window.alert("clicked internal btn!");
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/room/test",
//data: "{'data1':'" + value1+ "', 'data2':'" + value2+ "', 'data3':'" + value3+ "'}",
data: {name:"ravi",age:"31"},
dataType: "json",
success: function (result) {
//do somthing here
window.alert("success!!");
},
error: function (){
window.alert("something wrong!");
}
});
});
in here, if the user clicks internal_btn this event happens and goes to the servide
room/test action.
ok this is fine. But I'm not sure how to send the data.
If i run this, i have an error like this.
MultiJson::LoadError
795: unexpected token at 'name=ravi&age=31'
Can i know what the problem is?
Also, is there are good example with this request and response with json format?
I googled a lot, but not satisfied with the result :(
Try to use stringify your data or use GET method like,
data : JSON.stringify({name:"ravi",age:"31"}),
Full Code,
$.ajax({
type: "POST",// GET in place of POST
contentType: "application/json; charset=utf-8",
url: "/room/test",
data : JSON.stringify({name:"ravi",age:"31"}),
dataType: "json",
success: function (result) {
//do somthing here
window.alert("success!!");
},
error: function (){
window.alert("something wrong!");
}
});

Categories