CODEWITHSUNDEEP
javascriptjquery
colindunn
colindunn

Reputation: 3163

jQuery: Call a function twice

I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:

$('div').each(function truncate() {
    $(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});

$('.truncate').click(function() {

    if ($(this).parent().hasClass('closed')) {
        $(this).parent().removeClass('closed').addClass('open').children().show();
    }

    else if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open').addClass('closed');
        $('div').truncate();
        $(this).show();
    }

});

The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?

Edit jsFiddle here: http://jsfiddle.net/g6PLu/

Upvotes: 2

Views: 4485

Answers (4)

Ruan Mendes
Ruan Mendes

Reputation: 92274

I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code

(function($) {
    $.fn.truncate = function() {
        this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
    };
    $.fn.untruncate = function() {
        this.removeClass('closed').children().show();
    };                
})(jQuery);

$('div').truncate();

$('.truncate').click(function() {
  var $parent = $(this).parent();
  if ($parent.hasClass('closed')) {
    $parent.untruncate();
  } else {
    $parent.truncate();
  }
});

Upvotes: 0

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Another approach is to establish, then trigger, a custom event :

$('div').on('truncate', function() {
    $(this).......;
}).trigger('truncate');

Then, wherever else you need the same action, trigger the event again.

To truncate all divs :

$('div').trigger('truncate');

Similarly you can truncate just one particular div :

$('div#myDiv').trigger('truncate');

The only prerequisite is that the custom event handler has been attached, so ...

$('p').trigger('truncate');

would do nothing because a truncate handler has not been established for p elements.

Upvotes: 0

Kumar
Kumar

Reputation: 95

What's the error message do you get?

You should create function and then call it as per requirement

Define the function

function truncate(){
  $('div').each(function(){

  });
}

Then call the function 

truncate();

Upvotes: 0

SLaks
SLaks

Reputation: 887451

That's a named function literal.

The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.

Instead, create a normal function and pass it to each():

function truncate() { ...}

$('div').each(truncate);

Upvotes: 4

Related Questions