Question

I have to write a simple plugin for ajax load.
Page code. (result by razor)

<a ajaxLoad="page" href="/Brand">Brand List</a>

<div id="plc1">
  some content
</div>

<script type="text/javascript">
        $(function () {
            $("#plc1").ajaxPageLoad();
        });
</script>

In js code.

jQuery.fn.ajaxPageLoad =
function () {
    $('a[ajaxLoad*="page"]').click(function () {
        $(this).empty();
        $(this).load(this.href);
        return false;
    });
}

in page without this implementation empty() work properly but plug-in there is no effect.
what is wrong?

Thanks.

Answer 1

Seems that you’re hoping this will refer to both the div and the a at the same time.

If I understand your code, you want to empty the element on which your plugin was called when the <a> element is clicked.

Currently, in the click() handler, this is the <a> element. You need to retain a reference to the <div> against which your plugin was called outside the handler.

jQuery.fn.ajaxPageLoad = function() {
      // reference the <div> container (or whatever it ends up being)
    var container = this;

    $('a[ajaxLoad*="page"]').click(function() {
        container.empty();           // empty the container
        container.load( this.href ); // load into the container from the href
        return false;                //    of the <a> that was clicked
    });
};

$(function() {
    $("#plc1").ajaxPageLoad();
});