Dynamically use SelectToUISlider - javascript

My current project creates user forms dynamically from a database. One of the tables defines what type of input a question should be formatted for the user. I am having difficulties getting a slider UI element working with this paradigm. SelectToUISlider, originally designed by the Filament Group, seems to be a good fit; however, I have been unsuccessful calling the UDF on the generic SELECT element from JQuery when there are more than one on a page.
If there is only a single SELECT I have no issues. If I hard-code the ID tag to be selected I have no issues. But getting it to use the ^= or |= selector has been completely unsuccessful.
Any help is appreciated.
$("select[id^='slider']").selectToUISlider();
http://jsfiddle.net/wolfphantom/zuvtpnLg/1/

As stated in the JsFiddle example you have provided it is working, isn't it?
So it seems you have a problem related to the dynamic select that gets populated at run-time after a certain operation...
So If you want to initiate the selectToUISlider on a single strip you can do is,
$(document).find("select[id^='slider']").selectToUISlider();
And i have created a Demo JsFiddle that includes a dynamic select being added in run-time.
But you want to implement selectToUISlider for each and every select individually, then why not run the loop on those element and initialize it individually.
$("select[id^='slider']").each(function(){
$(this).selectToUISlider();
});
So, the downfall, however will be, it will not work on dynamic elements, So you need to initialize those after the element is added to the DOM.
And here is the Demo JsFiddle for it.
P.S
I don't have a prior knowledge of the plugin, But I hope it will work for you.
Regards.

Related

How to use Cascade inside kendo grid dropdown?

Actually my requirement is to get the Activity Name when ever the WorkcenterName getting change i need to display corresponding activity in dropdown. Activity i will get from gridData(this is variable in my example).
I tried using cascadeFrom , I am not able to get the value. I hope i explained my requirement clearly.
Here with attached Dojo link. Please have a look my code and give the solutions for this.
http://dojo.telerik.com/APeVA
Thanks in advance..
I was able to find a couple of thing wrong with your dojo code and update your dojo here with a working sample. Here is a list of some of the problems I found, the solution was probably a combination more than 1 of these.
There was no cascadeFrom or cascadeFromField defined in your activity drop down.
I normalized your gridData data set, separating the activities into a separate list that I used to fill the activities drop down. I replaced it with an ActivityId in the gridData. Kendo data sources do not support a object or array field types.
Added a name attribute to the workCenterName drop down so it could be found by cascade setting.
Added an id to the gridData, this helped the edit/cancel/delete work properly.
I have done that in a .cshtml. Hope this can help you.
I have defined the columns as follows:
columns.ForeignKey(p => p.Servicio, (System.Collections.IEnumerable)ViewData["SER"], "CodServicio", "DesCorta").Width(75).EditorTemplateName("ServicioTemplate").Title(Recursos.Resource.SERVICIO);
columns.ForeignKey(p => p.Seccion, (System.Collections.IEnumerable)ViewData["SEC"], "CodSeccion", "DesCorta").Width(75).EditorTemplateName("SeccionTemplate").Title(Recursos.Resource.SECCION);
The secret here is .EditorTemplateName(). I have a folder, in a specific location. Not sure if you can change that, but I think it must be in Views/Shared/EditorTemplates and there I have defined both dropdowns, the second one with .CascadeFrom() property just as you would use it outside of a grid.
Hope this can help you, feel free to ask anything you need!

Ckeditor plugin functionality not working after using setData("hai");

I'm using the ck-editor(4.4.6). In Ck-editor's textarea I want to update my text, for that I use setData("hai"); that text updating correctly but some plugin functionality not working after use this setData(); (eg. restrict multiple enter if I reload the page it's working correctly).
editorInstance.setData("test text");
Anyway first time and after reload the page it working fine.
ruby on rails with jquery things are I'm using.
How can I solve this?
I don't know about ck-editor(4.4.6) but i can give you a way to solve it. You have to use based on your parent class. First time it works because it was same but after that it did't find the class/your specific term/attribute. So you have to use by calling parent class/id and under your activity.
You will need to call the update element function after setting the data, this will actually set the value in the field.
And, also you will need to specify the id of the textarea as given below.
CKEDITOR.instances.id_of_textarea.setData('hai');
CKEDITOR.instances.id_of_textarea.updateElement();
Finally, I got the answer instead of set data I just add my content to CKEditor text area as link this its working fine:
$('#cke_editor1 iframe').contents().find('body').html("Your text");

Easy Way to Batch Edit in Angular UI Grid

Angular UI Grid currently allows for double-clicking on fields for editing, but you can only do this one at a time. Currently, I need a user to click on a button and then have all rows show the editable input fields. I was unable to find a solution online and am now posting a question here.
Anyone else have a current or easy hack for this before I have to start customizing the UI grid library (something I don't want to do yet)?
Thanks!
It is plausible to do this by providing a custom cellTemplate where that template is the editableTemplate, or quite a bit of the editable template. This would mean the edit widgets were shown at all times.
Having said this, the reason that ui-grid doesn't show all the widgets at once is performance. When you have a table you tend to render a lot of DOM elements, and slower devices cant' reasonably render and scroll that many DOM elements. You may also get issues with row virtualisation - you may end up with your editors pointing to the wrong elements in the data.
Is editOnFocus perhaps an option for you?
So what i did is, i used an ng-show directive on cell template to show and hide text box by setting an attribute on entity object of ngRow. By default edit will be false. when you press edit button its is made as true and the text box will appear.
Please find the following plunker for your requirement
http://embed.plnkr.co/tdtCbI8pw6mdSjG4SflP/preview
Hope this helps!!!!!!

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.

How to use jsviews to render a a multiple selection listbox

I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.

Categories