CODEWITHSUNDEEP
javascriptjquerydomprototypejs
Synthesezia
Synthesezia

Reputation: 291

jQuery and Prototype methods interfering with each other

I'm working on a legacy project (before Rails 3.1) which has been around for years, so it has Prototype and jQuery all over the place with the general idea to rewrite all the Prototype in jQuery.

I'm working on a problem of an autocomplete style dropdown, which will populate an area in the DOM with some data. This works fine, but certain instances of this autocomplete have an item limit. So when adding the data, it will check to see if there are more than N of a certain selector and remove the last one.

My function to do this is straight forward:

function remove_items(num, selector) {
      while (selector.length >= num) {
          selector[selector.length-1].remove()
      }
  };

I pass in the limit and the array of the objects, selected with jQuery, I want there to be a limit on.

The problem appears to be that .remove() on an element in selector will remove it from the DOM using the Prototype method, even though it's a jQuery object. Then, because the selector array hasn't been changed, the loop runs again with the prototype method and it throws an error because now the element isn't in the DOM.

I made a count variable of the length of selector before the loop and reduce this by one each time, but obviously this is a less than ideal solution.

Anyone know why this is happening or how to stop it happening?

Upvotes: 1

Views: 127

Answers (3)

Alnitak
Alnitak

Reputation: 339816

If selector is a native array, you can truncate it to num items just using:

selector.splice(num);

If selector is a jQuery object, it would be bad practise to attempt to modify it in-place - other jQuery functions return a new jQuery object, i.e.

selector = selector.slice(0, num);

Note that in the latter case it makes little sense to wrap this code in a function, and that if you did, you would have to return the new object, not rely on the passed parameter being modified in-place.

Upvotes: 1

Guido Bouman
Guido Bouman

Reputation: 3275

This is not about jQuery.noConflict() at all.

jQuery's .remove() is meant to remove the item from the DOM, not from the array. With the .not() method you can remove items from your collection.

See: http://api.jquery.com/remove/ & /not/

So the code will become:

function remove_items(num, selector) {
    while (selector.length >= num) {
        selector = selector.not(':last');
    }
};

If you also want to remove the element from the DOM and from your array:

function remove_items(num, selector) {
    while (selector.length >= num) {
        selector.remove(':last');
        selector = selector.not(':last');
    }
};

jsFiddle: http://jsfiddle.net/h46WT/1/

Upvotes: 0

Muhammad Bekette
Muhammad Bekette

Reputation: 1434

you can use var jQuery=jQuery.noConflict() to avoid interfering

helpful ref: Replace "$"(dollar Sign) with "JQuery"

Upvotes: 0

Related Questions