We Keep Coding

Modify the output of the Select2 dropdown selection when used with jQuery X-Editable library

I have been trying to use X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ for weeks now without much luck.
Originally I was trying to load in data from AJAX request and then use the library but all I could see if old code that supposedly worked with the older versions of both libraries.
To slightly simplify things I have now decided to load in my data separately so that X-Editable and Select2 only have to deal with an array of data that is already available.
My problem now is modifying the display of the data.
By default I am happy with the look of the edit field which looks like "tags" being selected.
When editing is completed and on initial page load, it shows my selected items as a comma separated string. I would like to modify that part to look different.
I saw some examples that worked as I want it to however they do not seem to work with the newer versions.
This JSFiddle here http://jsfiddle.net/jasondavis/j72k110m/ shows my desired output and functionality...almost but the catch is this demo is using older versions of the Select2 library. It has Select2 version v3.4.4 and X-Editable version v1.5.1
The latest version of Select2 is version v4.0.0
X-Editable is up to date at v1.5.1 as it has not been updated in a while.
On initial load and after selecting new value it should look like this below which means it wraps our selected value in a span:
When clicked to edit the selected values, it should look like this which looks like "tags" however it should not show the <span> part!
In this JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
I have updated Select2 to the new version and I am trying to replicate the functionality from the other JSFiddle above by showing the selected values as "tags".
Another issue with this version is that when selecting values, it does not remove an option from the dropdown list. So even though 1 item is selected already, it still shows up as an option to click on again!
The other issue is that new selected items do not get added on the non-edit screen.
More images below to show what I mean...
Image below shows the intial screen load selected items and also items that are selected and not in edit-mode. The issue is that it is not updating with new items that are selected. Also it shows the selected ID's instead of a title/name
My end goal is to simply use Select2 on my X-editable field to allow the selection of an Assigned User. Selected assigned users will show a gravatar thumbnail image and the user name.
Both Select2 and X-Editable allow the use of a template style output to modify there output however when they are working together, there default functionality is different and those output modification functions do not work the same as they do when running either library on it;s own.
I know what I want can be done since the 2 libraries are meant to work together, it's just a matter of getting the newer versions of Select2 to work with the older version of X-Editable which has not been updated in a long time sadly!

The final jsfiddles that I was testing on are at https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/ (poshytip-editable).
Here are some observations I made while trying to make Select2 4.0.0 work with X-Editable.
You were setting data-value to apples, oranges, pie (note the spaces), which is technically not correct. The ids are supposed to match up exactly, but due to an unfortunate mistake a feature in older versions of Select2, extra whitespace was completely ignored.
Removing the spaces solves the main issue, which was Select2 not matching options correctly (and as a result not displaying them).
Your source did not contain any of the values you were passing in through data-value, so Select2 had no way of displaying them. By lining some of the id attributes up, Select2 was one step closer to displaying the selected values when the popover was displayed.
You were using both tags and source, which X-Editable does not allow. The plugin appeared to prioritize tags over source, so nothing was actually being passed into Select2 and your source was totally ignored.
But that doesn't matter too much, because X-Editable isn't displaying the values correctly in the first place. You'll notice that the data-value is being displayed as a single tag, instead of being split up and displayed as multiple tags. In order to get X-Editable to cooperate with this, you need to set separator: ',' in your Select2 options. While this option is no longer supported for Select2, X-Editable completely ignores the viewseparator option in favor of this one.
In order to get the tags to update after they are edited, you need to check if value in the display method is an array or not. This is because X-Editable just passes back a string to the display method, instead of the array that one would expect.

How to hide the select value from the form

I have a form which have a select drop down. i have disabled it by default and will re enable it based on some conditions. i don't want anybody to access the select option values when it is disabled(now it can be viewed by inspecting the element from browser). how do i make it secure?

I don't think you can. You might be better off populating it when it's needed instead of enabling it. You could do that with an Ajax call.

You need to use ngIf directive.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Usage
<select ng-if="someCondition"></select>

If you use a simple binding library like knockout.js you can use container-less binding which will only render the select DOM when you want.
Knockout is is a great little library which plays nicely with most other libraries so shouldn't cause any trouble, all you ned to do is import the js file.
Container-less binding will only render the DOM when it needs to, so inspecting the page element will not display the select box.
<!--ko if: IsShown -->
<select>Render Me</select>
<!--/ko-->
Here is a simple fiddle to show you how to make it work.
Knockout Containerless Binding

You could avoid rendering it, which would hide it from the DOM inspector, but the data would still be in the browser and available to a user who cared to look in the right place.
If you don't want the user to see the data, then don't send it to the client in the first place.
When you want to display the select element, make an Ajax request to the server. Then perform authentication and authorisation to make sure the user is allowed to see the data. Then return it in the response and have Angular generate the select using that data.

There is no way to hide part of code from viewing by user in browser, because browsers have to see the code to run it, so it can be viewed by user. But, using php can help you to generate content for page only when it's needed. I think you can generate content for your drop-down, or the whole dropdown using that way.

CKEditor, initialize widget added with insertElement

I have some widgets created, they on initial startup they load fine, but i add more of this type of widget to the editor through:
ckeditorInstance.insertElement(
CKEDITOR.dom.element.createFromHtml('<html></html>'));
It inserts just fine, but the ckeditor does not recognize the element inserted as a widget, so the widget editable fields are not getting enabled like they should.
Is there any way to make ckeditor do a rescan of its content to initialize any new widgets that it has not already initialized?

Data formats
First of all - there's a separation for data format of a widget (how widget is represented in data) and internal format (how it is represented in editor). You may be familiar with the upcast and downcast functions - they make the transition between those formats (upcasting means transforming data format to internal format).
Upcasting and downcasting work only if data string is processed, but if you insert content using editor#insertElement there's no processing, so there's no upcasting.
Inserting
You've got two solutions:
Use editor#insertHtml instead of editor#insertElement. Your widget will be upcasted before insertion, so it will be inserted in a good format.
Take care of upcasting (if needed) yourself and use editor#insertElement.
Initializing
This was a first step of widget's life - it has to be inserted. Second is to be initialized.
There's a bug currently (it will be fixed in two weeks), that widgets inserted by the insertHtml method are not initialized. So, at this moment, after inserting widget with editor#insertHtml you need to call:
editor.widgets.checkWidgets()
If you use editor#insertElement you need to take care of initializing widget. To do that call:
editor.widgets.initOn( element, 'widgetName' )
In both scenarios initialize widget after inserting it.
Check out the Widgets API for more details.
See also my answer explaining how to know if an element is a widget and how to insert them into editor.

How to reload format-box in CKEDitor 4 dynamically?

I want to populate the format-box in CKEditor toolbar dynamically (depending on what the user selects in another select box).
Is it possible to change the options of the format-combo box dynamically , without reloading the whole CKEditor ?

The shortest answer is: no. However...
The plugin responsible for this box is the format plugin. It gathers all the data during the init function called when editor is being initialized. If you want to have this thing dynamically populated, you need to change some logic of this plugin on your own.
You might be interested in onRender callback for rich combos which is used by the plugin to dynamically change the value of the combo. Another handful thing might be add() method of rich combo used by format plugin. I'm pretty sure you got to extend the richcombo plugin to remove items.
Good luck anyway!

Wordpress widget adding variables

I want to add a filter feature to my wordpress widget. For this, I must be able to add as many filters i want. For its implementation, I am adding filter select box and text box to accept filter value, on the fly through javascript.
My problem is;
How can i save these values to widget instance variable. So the next time they should be visible.
How will I access these values for processing.
Please let me know if I am not clear on some point.