We Keep Coding

Change 'src' attribute of images by AJAX response

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.

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(){
...
});
}
});

Having Issue in showing dialog box inside ajax success bracket

I have a problem in my ajax script it wont show the dialog box after ajax success if i put datatype: 'json' and if I remove the dataType: 'json' the dialog shows pop after ajax success.
my script only shows my dialogbox if i remove the dataType.
$('#OppaForm').ajaxSubmit({
type: "POST",
url: "Oppa/view/editOther.php",
data: $('#OppaForm').serialize(),
cache: false,
success: function (response) {
$("#dialog-confirm-updateOther").dialog("open");
}
});
And I have an ajax script that shows the dialog box even the dataType is pressent.
$('#OppaForm').ajaxSubmit({
type: "POST",
url: "Oppa/view/photo.php",
dataType: "JSON",
data: $('#OppaForm').serialize(),
cache: false,
success: function (response) {
if (Number(response) == 1)
{
$("#dialog-confirm-changedImage").dialog("open");
$('#imageInput').replaceWith($('#imageInput').val('').clone(true));
}
}
});

if (Number(response) == 1)
this line will cause problem , beacuse response will not be 1 in case you need data type json
you can not compare like this
you will need to iterate through your json contents

express.js - dynamic pageloads via ajax

ok i'm that far:
app.get('/mypartial', function (req. res) {
res.render('mypartial', {layout: false, data: data});
});
this renders out my jade with the data and sends it as html to the client
now i need to fetch this via js and to render it out using
$('#idofparentelementofyourpartial').html(responseHTML);
so i would need something like:
//// Pseudocode
var locat = window.location.pathname;
on locat change{
prevent default // because i want to use the ajax call (not standart browser call)
ajax({
url: locat,
type: "GET",
dataType: "json",
success: $('#idofparentelementofyourpartial').html(data);
});
}
the strange thing is that "layout: false" still trys to render something: i would expect that it just puts stuff into the dom

You may have a look at jQuery load() to load partial html into a defined container.
ajax({
url: locat,
type: "GET",
dataType: "json",
success: $('#idofparentelementofyourpartial').html(data);
});
Datatype JSON is not what you want.

Why jQuery does not execute Javascript if only a part of received HTML is inserted into DOM?

I have the following file which will be loaded through AJAX:
<div id="container">
<div>I need this in AJAX and the following scripts too</div>
<script type="text/javascript">
alert('I am executed');
</script>
<script type="text/javascript" src="some_included_script.js"></script>
</div>
<div>I do not need this in AJAX</div>
If I load it the following way:
$.ajax({
url: url,
type: "GET",
cache: false,
dataType: "html",
success: function(data) {
$('#my_big_container').html(data);
}
});
then all the scripts get executed and also some_included_script.js gets requested from server and executed. No problems.
But if I need just the part inside of "container" and try the following code:
$.ajax({
url: url,
type: "GET",
cache: false,
dataType: "html",
success: function(data) {
$('#my_big_container').html(
$(data).filter('#container').html()
);
}
});
then none of the scripts get executed and there is also no request for some_included_script.js (although the plain HTML contents of "container" get inserted into 'my_big_container' correctly).
Why the scripts get executed when I use entire 'data' but not when I filter just a part of it?
How can I load just a part of received data and get inner scripts executed automatically?

I think this works:
Instead of this:
success: function(data) {
$('#my_big_container').html(
$(data).filter('#container').html()
);
}
Try this:
success: function(data) {
$('#my_big_container').html(
$("<div>").html(data).find('#container')
);
}