Custom jQuery function - selector doesn't find element

Question

I'm playing around with making a REST api and I'm working on some javascript functions.
The idea here is to run for example: $('#main').get('car/ford'); and the data returned will be added in the element provided.

Here is all the javascript:

$.fn.extend({
    get: function (path) {
        request(this, 'GET', path);
    }
});

function request(element, type, path) {
var dees = $(element);
    $.ajax({
        type: type,
        url: '/request/'+path,
        success: function(data) {
            console.log('Success');

            a = $(element);
            b = $('#fileList'); // this is a control

            dees.html(data);
        }
    });
}

(function() {
    console.log('running');
    $('#fileList').get('car/ford');
})();

The problem I'm having is that when I run a.html(data);
Nothing will change. But if i run b.html(data); Everything works like it should.

So there is a difference between those two selectors.
On a the element is not found a.length == 0
and on b the element is found b.length == 1

Why isn't the element found by the selector and how can I fix it?

Patrik · Accepted Answer · 2012-09-22 18:48:42Z

2

The problem was solved by adding $ in front of the calling function.

From:

(function() {
    console.log('running');
    $('#fileList').get('car/ford');
})();

To:

$(function() {
    console.log('running');
    $('#fileList').get('car/ford');
});

answered Sep 22, 2012 at 18:48

Patrik

2,2573 gold badges30 silver badges50 bronze badges

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

Comments

Nelson Benítez León · Accepted Answer · 2012-09-22 18:31:50Z

1

You could try the following:

function request(element, type, path) {
   var dees = $(element);
   $.ajax({
           type: type,
           url: '/request/'+path,
           success: function(data) {
               console.log('Success');
               dees.html(data);
           }
   });
}

in case the $(this) variable is conflicting with own $(this) variable of ajax() block.

answered Sep 22, 2012 at 18:31

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

1 Comment

Patrik Over a year ago

Doesn't seem to be working. dees.length returns 0. But both you and Adil have the same answer so maybe there is another error.

Adil · Accepted Answer · 2012-09-22 18:56:29Z

1

Change element to $(element)

When request is call request(this, 'GET', path); this represents javascript object and it should be jQuery object. You need to pass jquery object or convert it to jquery object after being pass as I did.

$.fn.extend({
    get: function (path) {
        alert(this.tagName);
        var objToPass = $(this);  
        request(objToPass, 'GET', path);
    }
});
function request(javascriptObj, type, path) {  
    element = $(javascriptObj);   
    $.ajax({
        type: type,
        url: '/request/'+path,
        success: function(data) {
            console.log('Success');

            a = $(element);
            b = $('#fileList'); // this is a control

            a.html(data);
        }
    });
}

Update

The call to get function should be instantiated on document.ready which could be done by simply adding $

Change

(function() {
    console.log('running');
    $('#fileList').get('car/ford');
})();

To

$(function() {
    console.log('running');
    $('#fileList').get('car/ford');
})();

edited Sep 22, 2012 at 18:56

answered Sep 22, 2012 at 18:28

Adil

148k25 gold badges217 silver badges207 bronze badges

4 Comments

Patrik Over a year ago

Doesn't seem to be working. element.length still returns 0. But both you and Nelson have the same answer so maybe there is another error.

Adil Over a year ago

There might be problem in calling function then, I have updated my answer and changed the caller function as well. Could you please give it a try.

Patrik Over a year ago

Found the error (function() { doesnt work but $(function() { does

Adil Over a year ago

Good, You did a great job. Now converting javascript object to jquery will do its job.

Collectives™ on Stack Overflow

Custom jQuery function - selector doesn't find element

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related