CODEWITHSUNDEEP
jquery
Fernando
Fernando

Reputation: 7

JQuery functions

I'm looking for a function to load content into a page. If I use it this way works fine

$(document).ready(function() {

    $('#nav li a').click(function(){                      
        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;   
    });
});

but when I want to make it function

jQuery.addc = function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;   
};

stop working, when I call the function with onclick

<ul id="nav">

        <li a href="index.html" onclick="$.addc();"> Index </a> </li>
</ul>

I don't know whats happening because first code works fine, but second don't, If anyone can help me please I also try $.fn.addc = function () but don't work

Upvotes: -1

Views: 189

Answers (5)

ninjagecko
ninjagecko

Reputation: 91149

You are using this, which in the first case was passed in by jQuery, but in the second case it is up to you to pass it in.

e.g. onclick="addc(this);" and give your function a signature of function addc(this) {...}

(there is not need to overload the jQuery namespace for a custom and very specific function)

Upvotes: 0

beatgammit
beatgammit

Reputation: 20225

Your context is all wrong. In the original, you have:

$(document), so this will be the document (or maybe the jQuery wrapper for the document). You will need to set the context.

For example, create a new function:

function aoeu () {
    $.fn.addc.call(document);
}

I would change the $(this) to $(document) instead. This will make your life a whole lot easier.

Upvotes: 0

Tejs
Tejs

Reputation: 41256

This is because the context of this is changing. this in your first code snipped corresponds to the element of your selector; one of the elements in #nav li a. In your second snippet, this does not reference to same thing, so it doesnt work.

In addition, it's bad form to attach a "static" function to the jQuery object when it is specific to an implementation of yours. You should extract that logic into a method, and then call that like so:

onclick="myMethod();"

Upvotes: 0

Naftali
Naftali

Reputation: 146350

the whole idea (or at least a main one) is to remove inline js.

stick to your first solution,

or what you can do is:

var clicked = function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal',loadContent);
        function loadContent() {
            $('#content').append($('<div>').load(toLoad,'',showNewContent()))
        }
        function showNewContent() {
            $('#content').fadeIn('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false; 
    }

$('#nav li a').live('click', clicked);

Upvotes: 0

Eli
Eli

Reputation: 17825

Extract only the innards into a function:

$(document).ready(function() {
    $('#nav li a').click($.addc);
}); 

$.addc = function() {                    
    var toLoad = $(this).attr('href') + ' #content';

    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal',loadContent);

    function loadContent() {
        $('#content').append($('<div>').load(toLoad,'',showNewContent()))
    }

    function showNewContent() {
        $('#content').fadeIn('normal',hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }

    return false;   
};

Upvotes: 1

Related Questions