javascript - $(this).html not working in jquery - Stack Overflow

<globemedia id="1"></globemedia>

<script type="text/javascript">
        $("globemedia").each(function(index, value) {
            var globeIDxMedia = $(this).attr("id");
            $.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
                $(this).html(a);
            });
        });
</script>

The above Script i use to load content to my customized tag say <getmedia id="1"></getmedia>

script works fine till getting data from the page getmedia.jsp but when i use $(this).html(a); its not loading the data.

Got Answer from jquery forum It'll work with custom tag as well

<script type="text/javascript">
        $(document).ready(function(){
            $("div[data-globalmedia]").each(function(index, value) {
                var globeIDxMedia = $(this).attr("id");
                $(this).load("getmedia.jsp?mediaID="+globeIDxMedia);
            });
        });
</script>

jQuery expert gave me solution you have to use $(document).ready(function(){}); and it works like a charm

<globemedia id="1"></globemedia>

<script type="text/javascript">
        $("globemedia").each(function(index, value) {
            var globeIDxMedia = $(this).attr("id");
            $.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
                $(this).html(a);
            });
        });
</script>

The above Script i use to load content to my customized tag say <getmedia id="1"></getmedia>

script works fine till getting data from the page getmedia.jsp but when i use $(this).html(a); its not loading the data.

Got Answer from jquery forum It'll work with custom tag as well

<script type="text/javascript">
        $(document).ready(function(){
            $("div[data-globalmedia]").each(function(index, value) {
                var globeIDxMedia = $(this).attr("id");
                $(this).load("getmedia.jsp?mediaID="+globeIDxMedia);
            });
        });
</script>

jQuery expert gave me solution you have to use $(document).ready(function(){}); and it works like a charm

• javascript
• jquery

Share Improve this question Follow edited Jul 2, 2012 at 4:01 Support Team asked Jul 1, 2012 at 17:00 Support TeamSupport Team 5111 gold badge11 silver badge66 bronze badges 2

• why you are using custom tag ? can't you use any other tag? – Adil Shaikh Commented Jul 1, 2012 at 17:19
• jsfiddle/QStkd/566 help me with this – Support Team Commented Jul 1, 2012 at 18:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Keep a reference to $(this) outside the $.get() function.

<script type="text/javascript">
    $("globemedia").each(function(index, value) {
        var globeIDxMedia = $(this).attr("id");
        var self = $(this);
        $.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){
            $(self).html(a);
        });
    });
</script>

The meaning of this is different within the callback of $.get than it is within the callback of the outer $().each. You can read more about the semantics of this here: http://www.sitepoint./javascript-this-gotchas/

As a rule, if you want to refer to the "outer" value of this within a callback function, you first have to bind it to a variable that is accessible within the callback (in this case, I've used the mon convention of a variable named self).

You can't this ( which refers to globemedia ) within $.get() callback function scope. Within $.get() callback function this refers to something else but not globemedia.

So, get keep reference of this outside of $.get() which refers to globalmedia like following:

      $("globemedia").each(function(index, value) {
            var globeIDxMedia = $(this).attr("id");

            // keep referece to this
            // ie. globemedia

            var media = $(this);
            $.get("getmedia.jsp?mediaID="+globeIDxMedia,function(a){

                // here self refers to
                // globemedia element

                media.html(a);

            });

        });

Note

I think $("globemedia") should be $(".globemedia"). That means you should use a class selector.

You can't make your own custom HTML tag. See HERE

As you can't create you own HTML tag (here, globalmedia), instead of that you can use data attribute to them. For example:

<div data-globalmedia="media1" id="id_1">Media 1</div>
<div data-globalmedia="media2" id="id_2">Media 2</div>

and so on. And for jQuery you can use:

$('[data-globalmedia]').each(function() {
    var globeIDxMedia = $(this).attr("id");

    // keep referece to this
    // ie. globemedia
    var self = $(this);
    $.get("getmedia.jsp?mediaID=" + globeIDxMedia, function(a) {

        // here self refers to
        // globemedia element
        self.html(a);

    });
});

Working sample