$.noConflict() breaks ninja
Closed this issue · 2 comments
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
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.
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.