Not able to find div in Ajax call

Question

I have made an AJAX call on div having class 'mydiv' as below:

But in success part, I am not able to find the parent div. HTML:

<div class="mydiv">
    <a href="/jewelry/asscher-cut-diamond-side-stone-ring-with-white-diamond-in-14k-white-gold/antique-scroll-ring/269p2m7s1c" target="_blank"><img alt="White Gold Asscher Cut Diamond Filigree Engagement Ring" class="img-responsive" height="220" src="http://3aef1d7506efae8a24d3-e7821b1789d66a252f67999ba68e5823.r99.cf2.rackcdn.com/asscher-cut-diamond-shank-wave-side-stone-engagement-ring-in-14K-white-gold-FDENS3543ASR-NL-WG.jpg" width="220" /> </a>
    <h4>
        <a href="http://www.fascinatingdiamonds.com/jewelry/asscher-cut-diamond-side-stone-ring-with-white-diamond-in-14k-white-gold/antique-scroll-ring/269p2m7s1c" target="_blank">White Gold Asscher Cut Diamond Filigree Engagement Ring</a></h4>
    <div class="boxprices1"></div>  
</div>

Javascript Code:

$('#Tab-block .mydiv').each(function(){
var prodinfo =$(this).find('a').attr("href");
//*** here read the value successfully ***

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Services/Service.asmx/GetProductPriceRating",
    dataType: "json",
    data: "{'customize_code':'" + prodinfo + "'}",
    success: function (data) {

        $(this).find(".boxprices1").append("<b>$ " + data.d + "</b>");
        //*** issue here: this append is not happening ***

    },
    error: function (err) {
        //  alert(err);
    }
});
})

How to find parent div inside AJAX success?

`$(this)` is not what you think it is inside the AJAX success callback. You need to check the question / answer linked above (this question is a duplicate0 — random_user_name, Sep 01 '17 at 12:50
https://stackoverflow.com/a/45679547/5076162 has a viable solution that I answered a week or so ago. It leverages intervals that scan the page waiting for a success of the ajax call before any DOM manipulation can be fired. The success triggers an add a class to the body, and the intervals fire condition (and cancel condition) is based on finding that class on the body. — Alexander Dixon, Sep 01 '17 at 12:58
That is a 1) not the issue here and 2) is the incorrect solution to the question you've answered it on @AlexanderDixon — Liam, Sep 01 '17 at 13:00

score 0 · Answer 1 · answered Sep 01 '17 at 12:52

0

this inside ajax refer to ajax call

$('#Tab-block .mydiv').each(function(){
var that = this;
var prodinfo =$(this).find('a').attr("href");
//*** here read the value successfully ***

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Services/Service.asmx/GetProductPriceRating",
    dataType: "json",
    data: "{'customize_code':'" + prodinfo + "'}",
    success: function (data) {

    $(that).find(".boxprices1").append("<b>$ " + data.d + "</b>");
    //*** issue here: this append is not happening ***

    },
    error: function (err) {
        //  alert(err);
    }
});
})

Either hold this into some variable & use it. I've used that variable to store this reference.

Hope this will help you.

answered Sep 01 '17 at 12:52

Shiladitya

12,003
15
25
38

[Should I answer (a duplicate) ? No, not if you think it's a duplicate.](https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled) – Liam Sep 01 '17 at 12:54
by the way 'that' is not working with me – Vikrant Sep 01 '17 at 12:57
@Vikrant What error you are getting? – Shiladitya Sep 01 '17 at 12:59

score 0 · Answer 2 · answered Sep 01 '17 at 12:52

This is a scoping issue. In your success function, this is your ajax object. Just find a new reference to your parent div:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Services/Service.asmx/GetProductPriceRating",
    dataType: "json",
    data: "{'customize_code':'" + prodinfo + "'}",
    success: function (data) {
        $('.mydiv').find(".boxprices1").append("<b>$ " + data.d + "</b>");
    },
    error: function (err) {
        //  alert(err);
    }
});

[Should I answer (a duplicate) ? No, not if you think it's a duplicate.](https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled) — Liam, Sep 01 '17 at 12:54

score 0 · Accepted Answer · edited Mar 16 '18 at 06:56

0

This is how your code should look like. You can assign the value of this to a variable and use it inside AJAX.

var parent = $(this); //assign the value of this to a variable & use it inside AJAX
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Services/Service.asmx/GetProductPriceRating",
    dataType: "json",
    data: "{'customize_code':'" + prodinfo + "'}",
    success: function (data) {
        parent.find(".boxprices1").append("<b>$ " + data.d + "</b>");
        //*** here: Use that parent dic to append data ***    
    },
    error: function (err) {
        //  alert(err);
    }
  });
})

edited Mar 16 '18 at 06:56

Vikrant

4,920
17
48
72

answered Sep 01 '17 at 12:54

l.varga

851
6
14

@Vikrant are you getting an error or what exactly isn't working? Are you doing anyhing else with the success callback? – l.varga Sep 01 '17 at 12:56
no error, just append is not happening, bcuz with `$(this)` not able to find control – Vikrant Sep 01 '17 at 12:57
@Vikrant I don't know what's not working for you as there is no `$(this)` in the code I posted for you. What you will do with the rest of the data (eg append it to HTML) - that's up to you, I just showed you how to select an HTML element within ajax callback before actually appending data from ajax callback to the page itself, as that is something you weren't doing in your code either. – l.varga Sep 01 '17 at 13:01
`parent` is working on finding div. – Vikrant Mar 16 '18 at 06:53

Not able to find div in Ajax call

3 Answers3