How to make jquery load() in external javascript function?

Question

i'm trying to create my own tool in javascript, which will help me load some php functions/files into my div.

Here is my javascript:

$(document).ready(function () {
    $('.btn').click(function() {        
        $('#someid').testit();
        //   $('#someid').load('somefile');  it works
        return false;
    })   
});

function testit() { 
    $(this).load('somefile');
}

And my html:

<div id="someid"></div>
<form>
    <input type="submit" value="test" class="btn" />
</form>

I can't load the resource from external function - why is that?

It really does'nt work that way! you can't just create a regular function and chain it to a jQuery object, but you could use jQuery's $.fn constructor to make a chainable plugin, and it's all explained on the plugin authoring site of jQuery. — adeneo
– adeneo, Commented Dec 3, 2012 at 1:11
Thanks, but is it a way to fire my own JS function on some Jquery selector? — pawel
– pawel, Commented Dec 3, 2012 at 1:13
And again, it does'nt work that way? You could pass the element as a paremeter in the function, like : testit(filename, element), but you can't chain the function to the element. — adeneo
– adeneo, Commented Dec 3, 2012 at 1:15
Thanky you ; ) I'll try to do it that way - it's WAY more elegant : ) — pawel
– pawel, Commented Dec 3, 2012 at 1:22

jfriend00 · Accepted Answer · 2012-12-03 01:30:23Z

2

If you want to call something like:

$('#someid').testit();

Then, you have to create a jQuery plugin that defines the method testit. That code would look something like this:

jQuery.fn.testit = function() {
    return this.load('somefile');
}

Then, and only then can you use testit() as a jQuery method like this:

$('#someid').testit();

And, it will operate on the desired selector.

Here's some of the jQuery doc on writing plugin methods like this.

edited Dec 3, 2012 at 1:30

answered Dec 3, 2012 at 1:19

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

1 Comment

jfriend00 Over a year ago

I simplified the plugin function a bit since .load() already iterates the jQuery object for you.

xdazz · Accepted Answer · 2012-12-03 01:20:37Z

2

You need to do like below:

$.fn.testit = function () {
  return this.load('somefile');
}

answered Dec 3, 2012 at 1:20

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Owen · Accepted Answer · 2012-12-03 01:23:26Z

1

Unfortunately you can't chain functions like that out of the box, you'd have to put it into the jquery.fn prototype to make a plugin.

What you could do instead is use the .each() function on the selector to call your function.

In your case, if you were to call $("#someid").each(testit); jquery will then call the testit() function on each of the elements found.

answered Dec 3, 2012 at 1:23

Owen

5014 silver badges8 bronze badges

Comments

RichH · Accepted Answer · 2012-12-03 01:24:18Z

1

You can pass the element like this ...

$(document).ready(function () {
    $('.btn').click(function() {        
        testit($('#someid'));
        return false;
    })   
});

function testit(el) { 
    el.load('somefile');
}

Or create a JQuery plugin as jfriend00 mentions

answered Dec 3, 2012 at 1:24

RichH

6,1482 gold badges40 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to make jquery load() in external javascript function?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related