2

I have the following HTML markup :

<a class="link1" href="javascript:load(0,1);">Click here</a><span class="loader"></span>

The load function is defined as follows :

function load(flag,id){

    /*Load Forum*/
    if(flag==0){
        $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
    console.log("Here");
    //....Some code follows

So what I want is the preloader gif should appear beside the link when it is clicked. The 'console.log' is printing 'Here' to the console but the image is not appearing. The image is located at the correct address. I think there is problem in the way I am using the 'this' keyword. Any help would be appreciated. Thanks. :)

Updated: As it was pointed out by some, I passed reference to the element by passing this as an argument. Here is my code now but it does not work still :

<a class="link1" href="javascript:load(0,1,this);">Click here</a><span class="loader"></span>


function load(flag,id,ref){
/*Load Forum*/
if(flag==0){
    if(ref){ $(ref).next("span.loader").html("123");console.log("Here"); }
Improve this question

7 Answers 7

Reset to default
4

If you bind your event handler with jQuery instead of using the "href" (which is a really bad habit anyway), then your this value would be correct.

$(function() {
  $('a.link1').click(function(e) {
    e.preventDefault();
    if ($(this).data('flag') === '0') {
      $(this).next('span.loader').html('<img/>', { src: './images/loader.gif' });
      // ...
    }
  });
});

That also implies that the markup would change:

<a class='link1' href='#' data-flag='0'>Click here</a>

Binding the handler through jQuery means that the library will make sure that this refers to the element for which the handler is being invoked; that is, the <a> tag. The way you have it (with the "href" pseudo-URL), that would not be the case.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The answer to your question is to use javascript:load.call(this, 0, 1) but Pointy is right.

Improve this answer

1 Comment

Actually I'm wrong, meder is correct about the javascript pseudo protocol causing the issue. you could however do href='#' onclick='load.call(this, 0, 1)'
0

The context is window because you're referencing it with the javascript: pseudo protocol. I would unobtrusively attach it.

<a id="link" href="#">jkfds</a>
<script>
   (function(){
        var l = document.getElementById('link');
        l.onclick = function() {
           load.call( this, 0, 1 );
           return false; // if needed
        };
        function load(one,two){ alert(one); alert(two); alert(this.nodeName); }
   })();
</script>

The context defaults to the anchor since we're not executing it in global context, since the anonymous function is attached to the DOMElement ( anchor node ) and the context is passed via .call.

If you need the parameters on the DOM element itself, just use data- attributes and reference them with .getAttribute ( assuming it works consistently in IE6 )

Improve this answer

Comments

0

Try: 

<a class="link1" href="#" flag="0">Click here</a><span class="loader"></span>

and

$("a.link1").click(function() {
    if($(this).attr("flag") ==0){
        $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
        console.log("Here");
    }
})
Improve this answer

3 Comments

It would probably be advisable to use a data attribute rather than making one up. flag=0 would become data-flag=0 and the jQuery would be $(this).data("flag") == 0
Shane, Interesting. Is there a performance difference between the two methods?
not aware of the performance difference, but the method I mention is the HTML5 standard for defining data (from what I understand, anyway...) which would lead me to expect native browser support at some point...
0

untested

<a class="link1">Click here</a><span class="loader"></span>

    $('.link1').click(function() {
        load(flag, id);
    }

    function load(flag,id){

        /*Load Forum*/
        if(flag==0){
            $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
        console.log("Here");
        //....Some code follows
    }
Improve this answer

Comments

0

Pointy is right that there are better ways to do this, but if you can't refactor, you can pass this as another parameter of your javascript call...

Improve this answer

Comments

0

Here's a working example that assumes you were using the load(flag, id) function multiple places: http://jsfiddle.net/jfriend00/GRcXS/. The main issue was that the value of "this" is the browser window, not the element when you assign the event handler using javascript:. Since you have jQuery, it's much better to use jQuery to hook up the click event and it will then set the this point appropriately.

HTML:

<a class="link1" data-flag="0" href="#">Click here</a>
<span class="loader"></span>

Javascript:

function load(flag,id){
    /*Load Forum*/
    if(flag == 0) {
        $(this).next("span.loader").html("<img src='http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg'/>");
        console.log("Here");
        //....Some code follows
    }
    return(false);
}

$(".link1").click(function() {
    return(load.call(this, $(this).data("flag"), 1));
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.