Search code examples
jqueryselectprototypejsconflictupdates

Prototype.js erase select on jQuery trigger update

I found a strange thing. On my website I need using both jQuery and Prototype.js, so I have jQuery in non-conflict mode and it works fine. But I have a jQuery script, that styles select boxes, and when item is chosen, the script triggers jQuery update method.

But for some reason, the Prototype.js is highjacking this update call and removes all the content of the select box, which I don't want. Here is the example code: 

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">jQuery.noConflict(); </script>
        <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>      
    </head>

    <body>  
        <select id="test">
            <option>1</option>
            <option>2</option>
        </select>

        <span onclick="jQuery('#test').trigger('update');">update</span>        
    </body>
</html>

`

And here is the fiddle to test: http://jsfiddle.net/verify/xq9rb/

I think it might be related to Prototype's own Update method, which needs to receive some content, which replaces the original but I have no idea how to get rid of this.

Solution

  • You are right - because of the way that jQuery triggers events - it will try and run any method on the element first (or travel up the prototype chain) and then trigger the event.

    I suggest namespacing the event to prevent conflicts similar to the way that PrototypeJS handles events.

    jQuery('#test').trigger('vendor:update');