FancyBox, Obtaining an ATTR of the item clicked

Question

I have the following lines of code:

    $("a.quickview").fancybox({
        ajax : {
            type    : "POST",
            data    : 'itemID=' + $(this).attr("name")
        }
    });

Which is binding on:

<a name="614" class="quickview" href="/URL/index.cfm">quick view</a>

I want data to post as itemID=614, but $(this).attr("name") is coming back as undefined? What am I doing wrong?

Thanks

Answer 1

If you are using Fancybox 2.0, you can do this:

$("a.quickview").fancybox({
    ajax : {
        type    : "POST",
        data    : 'itemID=' + $(this.element).attr("name")
    }
});]

Source: Code snippet from fancyBox Github issue (this works) =>

$(".fancybox").fancybox({
  beforeShow : function() {
    this.title = $(this.element).attr('fancybox-title');
  }
});

Answer 2

This did it for me:

onComplete: function( instance, slide ) {

// Clicked element
console.info( slide.opts.$orig );

}

Answer 3

The way you wrote it $(this) is not what you expect. this in this context isn't the a clicked on but whatever this is when you run $("a.quickview").fancybox({...}).

Use this code instead

$("a.quickview").each(function() {
    var a = $(this);
    a.fancybox({
        ajax : {
            type    : "POST",
            data    : 'itemID=' + a.attr("name");
        }
    });
});

or if there is only one a.quickview you want to bind fancybox to use this simpler code

var a = $("a.quickview");
a.fancybox({
    ajax : {
        type    : "POST",
        data    : 'itemID=' + a.attr("name");
    }
});