Question

Yes I know, this title isn’t really helpfull but this is the exact problem. For some reason (I don’t know), I can’t manipulate my HTML in the beforeSend Function of my AJAX-Request.

This is the HTML:

<div class="right">
    <span id="observer-eye" original-title="Observe this Summoner" data-id="2">
        <img alt="" src="/lolreports/img/icons/observer_eye.png">
    </span>
</div>

And this is the AJAX-Request:

$.ajax({
    type: 'post',
    dataType: 'json',
    url: webroot + 'summoners/observe',
    data: 'data[Summoner][id]=' + id,
    beforeSend: function(XMLHttpRequest) {
        $(this).parent().empty();
    },
    success: function(data) {
        if(data.status == 'success') {
            $(this).find('img').attr("src", webroot + 'img/icons/observed_eye.png"');
        }
    }
});

My goal is to put an ajax-loader.gif inside the -Tag which I wanted to do with $(this).find(‘img’).attr(“src”, webroot + ‘img/icons/ajax-loader.gif”‘); – Nothing happened. I tested many ways to manipulate the image or the span, but nothing happens. I wondered if beforeSend gets ever executed, which I tested with an alert(). It worked. But no DOM manipulation.

I have no idea where to search, I hope you can help me.

Answer 1

Don’t use $(this) as it doesn’t rightly reference your intended element. There are of course many ways to do this, try this

$("#observer-eye").find('img').attr("src", webroot + 'img/icons/observed_eye.png"');

For the beforesend, don’t use $(this), do this instead

$('the-intended-selector').parent.empty()