We Keep Coding

qTip2 html content removal when hide event triggered

I want to set content of qTip2 with a div. The first show event (mouseover) shows the div correctly. However, after I trigger hide event (mouseout), the div is cleared and qTip2 shows a blank tooltip.
By using firebug, I noticed that as I mouseover, the div is copied to the qtip and after mouseout is triggered, it's gone forever.
jquery clone is an option, I tried that but my div consists of a DataTables object so the pagination stops working after clone.
I need to find a way to make qtip not remove the div item after it's copied to it. I need a hide/show mechanism I suppose. What do you suggest?
Thanks,
content: function()
{
var qtipItem = this.id();
var item = "#"+qtipItem+"_Detailed";
var div_item = $("#detailedDiv").find(item);
return div_item;
}

Not a great solution but here is how I handled the issue:
Re-create the div that is destroyed by qtip hide event...
events: {
hide: function(event, api) {
if (qtipItem != null && detailedData != null && isqtipEmpty == false) //re-create hidden(destroyed by qtip2) table
contructDetailedRes(qtipItem, detailedData[qtipItem]);
}
},

Dynamic menu for a RichCombo box in CKEditor

I've written a plugin which adds a RichCombo box to my CKEditor. I want to be able to update the content in the ListBox within this RichCombo
Here's my code.
var merge_fields = [];
CKEDITOR.plugins.add('mergefields',
{
requires: ['richcombo'], //, 'styles' ],
init: function (editor) {
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = merge_fields; //new Array();
// Create style objects for all defined styles.
editor.ui.addRichCombo('tokens',
{
label: "Merge",
title: "title",
voiceLabel: "voiceLabel",
className: 'cke_format',
multiSelect: false,
panel:
{
css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
voiceLabel: lang.panelVoiceLabel
},
init: function () {
// this.startGroup("mergefields");
for (var this_tag in tags) {
this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
}
},
onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertText(value);
editor.fire('saveSnapshot');
}
});
}
});
Unfortunately this list is not update when merge_fields changes. Is there a way to reinitialize the plugin, or failing that remove it and re-add it with updated content?
Note Id prefer NOT to have to remove the entire editor and replace it, as this looks very unpleasant to the user
UPDATE
As requested, here's a jsfiddle to help
http://jsfiddle.net/q8r0dkc4/
In this JSFiddle, you'll see that the menu is dynamically created the first time it is accessed. It should should the checkboxes which are selected. However, every subsequent time it is accessed, it keeps the same values and is not updated. The only way to update it is to reinitialise the editor using the reinit button I have provided, but this causes the editor to disappear and reappear, so I don't want to have to do this.
200 points of a bounty to someone who can make the dropdown dynamically update EVERY TIME it is called.

How about using CKEditors custom events something like this ?
First get reference to CKEditors instance
var myinstance = CKEDITOR.instances.editor1;
Since the checkboxes are outside the scope of CKEditor add a change handler to checkboxes
$(':checkbox').change(function () {
myinstance.fire('updateList'); // here is where you will fire the custom event
});
Inside plugin definition add a event listener on the editor like this
editor.on("updateList", function () { // this is the checkbox change listener
self.buildList(); // the entire build is created again here
});
Instead of directly attaching events on checkboxes (which are outside the scope of CKEditor) inside the plugin, I am using CKEditor's custom events. Now the editor instance and checkboxes are decoupled.
Here is a DEMO
Hope this helps
Update
Option 2
Plugin's methods can directly be called like this
$(':checkbox').change(function () {
CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});
Even though this seems very straightforward, I don't think it is completely decoupled. (But still works)
Here is a demo for option 2

I think I've got a fix for you.
In your richCombo's init function add this line:
$('input').on('click', rebuildList);
Pretty simple JQuery fix, but every time I click those input boxes it will rebuild the list.
Fiddle for proof: https://jsfiddle.net/q8r0dkc4/7/

how to add data dynamically in jQuery? [duplicate]

This question already has an answer here:
How to add data dynamically with jQuery?
(1 answer)
Closed 8 years ago.
Can you please tell me how to add data dynamically? I am not able to make same as static.
http://jsfiddle.net/eHded/1537/
Please check this fiddle and open panel it show menu as well as submenu options.
Now I need to make same on button click. I have add button. I want add menu option (which is submenu of Additem in panel) can we do this.
I get the button click event, but that is not working fine.
http://jsfiddle.net/eHded/1538/
$('#add').click(function(){
// alert('e')
$('#tree li').append('<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
})

Try this instead:
$('#add').click(function(){
var data = $('#tree li').html();
$('#tree li').html(data+'<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
});
JsFiddle

You did not close your <ul> and <li> tag.
Also, you probably don't want to add the new element to every <li> in the tree.
Try the following instead (http://jsfiddle.net/eHded/1541/):
$(function() {
var tree = $('#tree').goodtree({
'setFocus': $('.focus')
});
$('.slider-arrow').click(function() {
var anchor = this;
var removeClass = "show";
var addClass = "hide";
var diff = "+=300";
var arrows = "«";
if ($(anchor).hasClass("hide")) {
diff = "-=300";
removeClass = "hide";
addClass = "show";
arrows = "»";
}
$(".slider-arrow, .panel").animate({
left: diff
}, 700, function() {
// Animation complete.
$(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
});
});
$('#add').click(function() {
$('#tree').children().last().append('<ul><li><span>jjjj</span></li></ul>');
$('.goodtree_toggle').off();
$('#tree').goodtree({
'setFocus': $('.focus')
});
})
});
There also seems to be a problem with the goodtree plugin you are using.
The items only expand every second time you click them.
Ideally the plugin would use event delegation to make sure that the expanding still works even if you change the tree, without having to re-initialize. Since you re-initialize the tree after every insertion, there are multiple event handlers attached to the nodes. So when you have an odd number of nodes inserted, it will toggle the element an even times (since you initialized it in the very beginning when it was empty), giving you no result.
You can fix it by removing all event handlers on the toggle before you re-initialize:
$('.goodtree_toggle').off();
I would really look for a better plugin instead.

Sencha Touch list and scrollToRecord

I have a long sencha touch list and I am trying desperately to scroll that list into somewhere in the middle on startup.
The function
btnScroll:function() {
var list = Ext.getCmp("myList");
var position = 4;
list.scrollToRecord(list.getStore().getAt(position));
}
works if I tap the button: scrollBtn.setHandler(btnScroll);, but it does not work in
MyList.constructor:function() {
...
this.callParent();
this.btnScroll();
}
It just fails without error message. Same goes if I do it in the calling function:
btnOpenList:function() {
var list = new MyList();
list.show();
list.btnScroll();
}
It works sometimes(!) if I use setTimeout(this.btnScroll,70); instead, but never if I use setTimeout(this.btnScroll,50); or setTimeout(this.btnScroll,120);
I think it happens because the list elements are not rendered/positioned. But I did not find any afterrender event.
So how would I define a scroll position in which the list should start?

You could do it in painted event. just add to your list or to container that contains all components that u need to bind the painted event.. and then get your list there and add event to btn.. or whatever you want.. by the template:
element.clearListeners();
element.addListener('tap',function(){
//...
});

jQuery UI - Slider unbinds after one use

I'm still a novice, so please go easy on me!
I'm making a JavaScript game. The game works fine, as do the basics of the user interface, like making menu selections or switching screens. But I'm also trying to implement jQuery UI sliders in one of my options menus, which is where I run into trouble.
I can only use the slider once, after which it becomes "stuck." It responds to mouseover - it'll highlight as though it's ready to scroll - but will not budge if I try to move it again.
So far, I've ruled out any problems with the build of jQuery/jQUI I'm using; the demo page works fine.
I have no idea what the problem might be, but I suspect it has something to do with the way I've put together my UI. The way my UI works is by creating a "View" object that contains pointers to a parent DOM element. I then use jQuery to construct its children and use the "loadElement" method to add it to the view's list of children elements:
function CView (parent, target, visible, jQElements) {
this.parent = parent;
this.visible = visible;
this.parentDisplay = parent.css("display");
this.parentPosition = parent.css("position");
this.elements = [];
for(element in jQElements) {
this.elements.push(element);
}
if (!this.visible) {
this.parent.css({ // Default to hidden state
"opacity": 0,
"display": "none"
});
}
this.parent.appendTo(target);
};
CView.prototype.loadElement = function(element) {
element.appendTo(this.parent);
this.elements.push(element);
return element;
};
All these elements can be shown and hidden together with a method call on the View object. Currently, hiding a view unbinds all event listeners in the elements of that view. I don't think this is the problem, since I get this problem immediately after creating a new view.
The issue, I think, might be in this code, which is for swapping views- Perhaps I'm unbinding some kind of document-level listener that jQUI uses?
var swapView = GameUI.swapView = function(view, callbacks) {
$(document).off(); // unbind key listeners
currentView && currentView.hideView(); // also unbinds event listeners
currentView = view;
view.showView(callbacks);
};
There's one more thing that might be relevant, the way I construct the slider and put it in:
var $volumeSlider = jQuery("<div/>", {
class: "options-menu-volume-slider"
});
var resetVolumeSlider = function () {
$volumeSlider.slider({
range: "min",
value: GameUI.options.volume,
min: 0,
max: 100
})
};
resetVolumeSlider();
If you need to see more code, let me know. I really am not sure what's going wrong here. Any and all help is appreciated. (Also, I don't know how to host my game online to demo it. It's basically just an HTML page that runs a bunch of JS.)

It turns out that this problem was caused by my call to $(document).off(), which I used to remove potentially dangling document-level keypress handlers. This had the unfortunate result of also destroying event handlers for jQuery UI.
In the future, my views will have keypresses bound at the parent div level with tab indices set for each div, so that I don't have to make the call to $(document).off() and can simply use hideView() to unbind.