1
<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

Support Team
  • 51
  • 1
  • 1
  • 5

3 Answers3

8

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

David G
  • 94,763
  • 41
  • 167
  • 253
  • What exactly are you trying to do in this fiddle? Please click the check on my answer if you found it helpful. – David G Jul 01 '12 at 21:44
  • Run the fiddle you provided me on your own site and see what happens. You can't load a completely different website from another site. – David G Jul 01 '12 at 21:45
  • I tried to run the script on localhost but still its not responding...It load data in buffer but can't append to the `div` – Support Team Jul 02 '12 at 03:22
3
<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.com/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 common convention of a variable named self).

Maxy-B
  • 2,772
  • 1
  • 25
  • 33
  • you have `self=$(this)`, then later do `$(self)`...you only need to select it once. i.e make it simply `self = this` – nbrooks Jul 01 '12 at 17:17
  • @nbrooks: true, but jQuery is smart enough that `$()` applied to a jQuery object (the result of a previous `$()`) just returns its argument. – Maxy-B Jul 02 '12 at 14:21
2

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

Community
  • 1
  • 1
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164