jQuery Basic插件-从另一个页面加载

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);

Answer 2

It seems almost right.

Take a look at the syntax here .

$("div", obj) ? What is obj for? Also, this is probably just an example, but you'll need #div . Also, remember the #div has to exist, or the call won't even be executed.

Also, take a look at the javascript error console, maybe that gives you any hints to why it is not working? Any error perhaps?

Answer 3

This line -

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

is the equivalent of -

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

So you're searching for a div inside obj which, in your example is a div with nothing inside it. So that code will return no elements and your load function won't work. You could load straight into $(obj) or write some code that checked what element(s) your plugin was been called on before deciding where to inject the load content.