CODEWITHSUNDEEP
javascriptjquery
Sandro Benevides
Sandro Benevides

Reputation: 631

Why this img element is not being altered by javascript?

I'm trying to change the src attribute of an img tag, deppeding on the result of an ajax request. This request returns a json and is everything ok with it, my if test is reaching the right portion of code, it shows the expected output at browser console but the src attribute is not being altered.

I already tried to remove this img element with:

$('#l'+generatedId).remove();

and than create a new one inside the parent element by doing:

$('#msgid'+generatedId).append('<img id="l'+generatedId+'" src="newpath" />');

but I had no success, nothing happens.

the "full" code:

var generatedId=0;

function doSomething(){

$('#msg').append('<p class="msg2" id="msgid'+generatedId+'" data-sid="msgid'+generatedId+'">'+$('#msgtxt').val()+'<img id="l'+generatedId+'" src="url/load.svg" /></p>');

$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){
        $('#l'+generatedId).attr('src','url/ok.png');
            }
          }
});
generatedId++;
}

I also wanted to change the "data-sid" attribute of the respective img tag with the ID msgid value returned by the json but currently it also doesn't changes, what I think it's the same problem.

As I said, the console output in browser console window is as expected:

{"status":"ok","msgid":"8"}

-- Edit1:

guys, I added some code into the if "ok" condition

console.log('Before:'+$('#l'+generatedId).attr('src'));
$('#l'+msgnova).attr('src','url/msgok.png');
console.log('After:'+$('#l'+generatedId).attr('src'));


The result is First: undefined / After: undefined. So I guess the element is not being found. So the conlusio is the element is not in the DOM. Does anyone had this problem? I also tried to create the <p> parent first and then append the <img> but it doesn't work also.

Upvotes: 0

Views: 56

Answers (4)

Sandro Benevides
Sandro Benevides

Reputation: 631

I think it was a scope problem, for some reason the success block was not being able to "see" the element using jquery selector. The solution was create a variable and attribute the element on it:

var generatedId=0;

function doSomething(){

$('#msg').append('<p class="msg2" id="msgid'+generatedId+'" data-sid="msgid'+generatedId+'">'+$('#msgtxt').val()+'<img id="l'+generatedId+'" src="url/load.svg" /></p>');
**var createdElem = $('#l'+generatedId);**
$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){

        //line below was altered
        createdElem.attr('src','url/ok.png');
        //instead of $('#l'+generatedId).attr('src','url/ok.png');

            }
          }
});
generatedId++;
}

Upvotes: 1

Hasta Tamang
Hasta Tamang

Reputation: 2263

$.ajax is asynchronous, and you have generatedId++; right after ajax request. You need to move it inside the success function after you have changed the src.

When your POST response comes back, your generatedId has already incremented and unable to find the generatedId in DOM.

$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){
            $('#l'+generatedId).attr('src','url/ok.png');
            generatedId++; // move here
        }
    }
});

Upvotes: 0

mynd
mynd

Reputation: 794

Remove the # in id attribute when appending the img Tag. You dont want the actual id attribute to have an '#' in it, it's only required as jquery selector:

$('#msgid'+generatedId).append('<img id="l'+generatedId+'" src="newpath" />');

Upvotes: 0

StonksMan9000
StonksMan9000

Reputation: 311

When you're trying to create a child element inside the parent by 

$('#parentElement'+generatedId).append('<img id="#img'+generatedId+'" src="newpath" />');

make sure the parent node actually exists or the append() method will not work. Maybe try creating $('#parentElement'+generatedId) this element first (by appending) and then append the child image. I would've commented this but don't have those privileges yet. Hope this helps a bit.

Upvotes: 0

Related Questions