Question

I am very inexperienced with jQuery plugins, and only mildly experienced in jQuery itself.

I am trying to create a jQuery plugin that allows me to fill a div with content from another page with GET variables in the URL depending on the parameters that are passed to it.

Eg $('#mydiv').getstuff(1,2,3) would load it with code from engine.php?a=1&b=2&c=3.

Here is my code so far – I know there are problems with the way it takes in parameters but other than that I can’t figure out why it’s not working.

<script type="text/javasctipt" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    (function($){
        $.fn.extend({ 
            //pass the options variable to the function
            bookmark: function(options) {
                var defaults = {
                    number: 5,
                    order: 1,
                    user: '',
                };

                var options = $.extend(defaults, options);

                return this.each(function() {
                    var o = options;
                    var obj = $(this);
                    var container = $("div", obj);

                    $("div", obj).load("thing.php?number="+o.number+"&order="+o.order+"&user="+o.user);
                });
            }
        });
    })(jQuery);

    $(document).ready(function() {
        $('#thing').bookmark(1,2,3);
    });
</script>

<div id="thing"></div>

Answer 1

The problem I see is in these lines:

var obj = $(this);
$("div", obj).load("thing.php?number="+o.number+"&order="+o.order+"&user="+o.user);

That last line says, “Get all div tags within obj,” which is to say, all div tags within the current jQuery context, which is div#thing. Just change it to:

$(this).load("thing.php?number="+o.number+"&order="+o.order+"&user="+o.user);