$.noConflict() breaks ninja

jasonGinza commented 13 years ago

In rails2.3.1 $.noConflict() breaks ninja's popup ui. If I put $ = jQuery above the code, then everything works, but this solution is unacceptable.

Description

When the button is pressed an empty popup shows up below it, but nothing is inside it. "Button Selected" is also printed to the console, so the button registers the select event.


<div class="group-button" style="display:none;">
    <span class="icon"><%= image_tag('tag--plus.png')%></span>
    <span>Groups</span>
    <span class="ninjaSymbol ninjaSymbolMoveDown"></span>
</div>

<li id="groups"></li>

<script>
  (function ($) {
    var $popupList;

    var $buttonPopupList = $.ninja().button({
      html: $('.group-button').html()
    }).select(function () {
            console.log('button selected')
      $popupList = $buttonPopupList.popup({
        html: $.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        }).select(function (event) {
          console.log('Stooge: ' + $(event.html).text());
          $popupList.detach();
        })
      });
    }).deselect(function () {
      $popupList.detach();
    });
    $('#groups').append($buttonPopupList);
  }(jQuery));
</script>
</script>

I placed a breakpoint inside the select event where "button selected was printed" and ran this code inside the console

Success

$.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        })

and it successfully returned

[
  <div class="ninja ninjaList">
  <div class="ninja ninjaListChoice">…</div>
  <div class="ninja ninjaListChoice">…</div>
  <div class="ninja ninjaListChoice">…</div>
  <div class="ninja ninjaListSpacer"></div>
  <div class="ninja ninjaListChoice">…</div>
  <div class="ninja ninjaListChoice">…</div>
  <div class="ninja ninjaListChoice">…</div>
  </div>
]

failure

when I did the same thing with this code

$buttonPopupList.popup({
        html: $.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        })})

it failed

<span class="ninja ninjaPopup ninjaInline ninjaShadow" style="min-width: 91px; border-top-left-radius: 0.3em 0.3em; border-top-right-radius: 0.3em 0.3em; border-bottom-right-radius: 0.3em 0.3em; border-bottom-left-radius: 0.3em 0.3em; top: 372px; left: 335px; ">…</span>

Conclusion

for some reason, it seems as if ninja.js is not handling the $buttonPopupList = $.ninja().button({ part of the code well

uipoet commented 13 years ago

Thank you for taking the time to provide the detail on this issue. We'll make sure that $.noConflict() has tests that pass in future builds.

uipoet commented 12 years ago

I believe this issue to be resolved with our latest rewrite of "dialog" and "list". Please reopen during our release candidate if you discover it is not resolved.

ninja / ui