By mplungjan


2013-01-13 08:38:25 8 Comments

I have this jsfiddle

which uses toggle event - not to be confued with toggle - jQuery version set to EDGE

It suddenly stopped working and removed the cell I wanted as a trigger, since it obviously reverts to toggle.

I cannot find any deprecation tags or such

http://api.jquery.com/category/deprecated/ gives a 404

If I add the Migrate module my jsFiddle then works and I see the warning in the console (elaborated by https://github.com/jquery/jquery-migrate/blob/master/warnings.md as posted by Frédéric Hamidi)

I see Deprecate fn toggle and issue 24 and Ticket #11786 but not in places I would expect to see it.

What am I missing and where do I find the replacement and documentation for it?

NOTE: I understand the reason for deprecation, I just can't find official documentation for the deprecation

$('#tbl .xx').toggle(
  function() {
    $(this).siblings().each(function(){
      var t = $(this).text();
      $(this).html($('<input />',{'value' : t}));
    });
  },
  function() {
    $(this).siblings().each(function(){
      var inp = $(this).find('input');
      if (inp.length){
        $(this).text(inp.val());
      }
    });
  }    
);

Code in MIGRATE:

jQuery.fn.toggle = function( fn, fn2 ) {
  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
    return oldToggle.apply( this, arguments );
  }
  migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
  // Save reference to arguments for access in closure
  var args = arguments,
  guid = fn.guid || jQuery.guid++,
  i = 0,
  toggler = function( event ) {
    // Figure out which function to execute
    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
    // Make sure that clicks stop
    event.preventDefault();
    // and execute the function
    return args[ lastToggle ].apply( this, arguments ) || false;
  };
  // link all the functions, so any of them can unbind this click handler
  toggler.guid = guid;
  while ( i < args.length ) {
    args[ i++ ].guid = guid;
  }
  return this.click( toggler );
};

UPDATE I have asked if they could keep the code as fn.toggler so it is a rename instead of a remove

4 comments

@Randy Skretka 2014-08-06 00:14:37

Deprecation of jquery .toggle() is now documented at api.jquery.com. I found a nice replacement for it at forum.jquery that I am now using. It works great :)

$.fn.toggleClick = function() {
  var functions = arguments,
      iteration = 0;
  return this.click(function() {
    functions[iteration].call();
    iteration = (iteration + 1) % functions.length;
  });
}

Usage:

$("#target").toggleClick(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

Edit Aug. 6, 2014: I reconsidered the original code and found that .apply is not the right thing to use. Changed that to .call with no args passed in.

@Matthew Lock 2017-03-08 04:13:36

I ended up adding "this" into functions[iteration].call(this); as some old code I was using was referencing "this" in the toggle handlers

@Cuarcuiu 2013-05-22 21:35:55

The code that I use:

$('#example').click(function()
    {
    isClicked=$(this).data('clicked');
    if (isClicked) {isClicked=false;} else {isClicked=true;}
    $(this).data('clicked',isClicked);

    if(isClicked)
        {
        ...do stuff...
        }
    else
        {
        ...do stuff...
        }
    });

The optimized code (suggest by mplungjan) is:

$('#example').click(function()
    {
    $(this).data('clicked',!$(this).data('clicked'));

    if ($(this).data('clicked'))
        {
        ...do stuff...
        }
    else
        {
        ...do stuff...
        }
    });

@mplungjan 2013-05-23 04:19:09

That is not very slick. You can toggle the isCicked with !isClicked but whoever uses your code needs to be aware that you toggle before you test so the if has to be reverse of what one would expect. $(this).data('clicked',!$(this).data('clicked'));

@Cuarcuiu 2013-05-23 09:40:34

beautiful! I usually use a readable code without "compressing". Thanks!

@mplungjan 2013-05-23 09:42:26

You are welcome. Just a note: Your code only handles TWO clicks. The code for fn.toggle handled ANY clicks. So 5 or 10 clicks or whatever could have a different effect for each click.

@Cuarcuiu 2013-05-23 13:38:10

Ah, ok. I simply wanted to make a version of the code easier for those who needed quickly instead the deprecated toggle method. Hello and thank you!

@Mike Sherov 2013-01-13 14:34:26

jQuery 1.9 isn't final yet. As per the upgrade guide:

"For now, this guide serves as an appendix to the standard jQuery API documentation, and those pages may not describe the behavior of version 1.9. Please be patient while we update the documentation for the individual pages at api.jquery.com to reflect the changes in 1.9."

In this case, we just haven't documented it yet. You SO folk are faster than us! Please file a documentation ticket here: http://github.com/jquery/api.jquery.com

@Frédéric Hamidi 2013-01-13 10:05:28

You can find official documentation about toggle()'s deprecation in the list of warnings emitted by the jQuery Migrate plugin:

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

Cause: There are two completely different meanings for the .toggle() method. The use of .toggle() to show or hide elements is not affected. The use of .toggle() as a specialized click handler was deprecated in 1.8 and removed in 1.9.

Solution: Rewrite the code that depends on $().toggle(), use the minified production version of the jQuery Migrate plugin to provide the functionality, or extract the $().toggle() method from the plugin's source and use it in the application.

@mplungjan 2013-01-13 10:09:17

Thanks for pointing me at that. That is however not where I expected it. Is there an official deprecation at the API or did I miss something? As you saw, I already applied the MIGRATE but hadn't found the .md file that elaborated on it

@Frédéric Hamidi 2013-01-13 10:12:31

@mplungjan, you did not miss anything, the documentation page for toggle() has not yet been updated with this information. The API docs have just been revamped/updated, though (they now say then() is the same thing as pipe() for instance), maybe toggle() will be part of the next batch.

Related Questions

Sponsored Content

6 Answered Questions

19 Answered Questions

[SOLVED] Where should I put <script> tags in HTML markup?

20 Answered Questions

[SOLVED] Best way to remove an event handler in jQuery?

  • 2008-10-16 15:28:47
  • Randy L
  • 715770 View
  • 1064 Score
  • 20 Answer
  • Tags:   jquery html-input

16 Answered Questions

[SOLVED] jQuery find events handlers registered with an object

  • 2010-03-25 18:47:08
  • ages04
  • 419748 View
  • 558 Score
  • 16 Answer
  • Tags:   jquery events dom

27 Answered Questions

[SOLVED] How to delay the .keyup() handler until the user stops typing?

  • 2009-12-15 18:33:27
  • ajsie
  • 270110 View
  • 660 Score
  • 27 Answer
  • Tags:   javascript jquery

1 Answered Questions

[SOLVED] form._raw_value(fieldname) gone in Django 1.9

  • 2016-09-06 12:17:21
  • guettli
  • 280 View
  • 1 Score
  • 1 Answer
  • Tags:   django deprecated

1 Answered Questions

[SOLVED] Where is the last bracket gone in this expression

Sponsored Content