Migrating js file from prototype to jQuery does not work

Question

I'm migrating files from prototype to jQuery.

prototype:

function hideEditableMarkers() {
   $$('.edit_marker').each(function(el) {
  el.hide();
});
   $$('.show_marker').each(function(el) {
    el.show();
    });
}

Event.observe(window, 'load', hideEditableMarkers);

jQuery:

function hideEditableMarkers() {
  jQuery('.edit_marker').each(function(el){
    el.hide();
    });

  jQuery('.show_marker').each(function(el){
    el.show();
    }); 
}

jQuery(document).ready(hideEditableMarkers());

I don't know why it does not work.

Stphane · Accepted Answer · 2013-10-21 08:21:58Z

2

The first parameter of the each callback function is the index of the element not the reference to it

so here is the jquery code

function hideEditableMarkers() {
  $('.edit_marker').each(function(idx,el){
    $(el).hide(); // You may use 'this' variable in here as it points to the current element as well
    });

  $('.show_marker').each(function(idx,el){
     $(el).show();
    }); 
}

edited Oct 21, 2013 at 8:21

answered Oct 21, 2013 at 8:12

Stphane

3,4765 gold badges36 silver badges49 bronze badges

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

Comments

Anthony Grist · Accepted Answer · 2013-10-21 08:13:54Z

0

This:

jQuery(document).ready(hideEditableMarkers());

should be:

jQuery(document).ready(hideEditableMarkers);

You need to pass the function reference to ready so it's executed as the callback handler for the DOM ready event. What you're currently doing is executing the function immediately (when the elements don't exist), then passing the return from that function (nothing) as the callback for .ready().

answered Oct 21, 2013 at 8:13

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

bipen · Accepted Answer · 2013-10-21 08:16:05Z

0

use $(this) inside each so it takes the current element... what you have is index and use index as jquery selector el.hide()

try this

function hideEditableMarkers() {
 jQuery('.edit_marker').each(function(el){
   $(this).hide();
 });

 jQuery('.show_marker').each(function(el){
   $(this).show();
  }); 
 }

jQuery(document).ready(function(){
  hideEditableMarkers() ;
});

//or

jQuery(document).ready(hideEditableMarkers);

answered Oct 21, 2013 at 8:16

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Emil A. · Accepted Answer · 2013-10-21 08:27:30Z

0

I believe a function should be reusable:

/*global jQuery */

function toggleMarkers (hideSelector, showSelector) {

    jQuery(hideSelector).each(function () {
        jQuery(this).hide();
    });

    jQuery(showSelector).each(function () {
        jQuery(this).show();
    });

}

jQuery(document).ready(function ($) {
    toggleMarkers('.edit_marker', '.show_marker');
});

answered Oct 21, 2013 at 8:27

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

Migrating js file from prototype to jQuery does not work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related