Can you create a jQuery UI widget without using a selector? - javascript

I'm writing my first jquery UI widget: a date range control composed of two text boxes (start and end date) both of which will be using the jQuery UI DatePicker.
All the widget code examples I've seen online have you applying the widget behavior to a generic selector. In my case, I need exactly two elements in my selector (the two aforementioned text boxes) and will be applying different logic to each. For example, the start date text box will have different onblur events/behavior than the end date text box.
Is there a way to create a widget without a selector and instead have two named constructor arguments, one for start date and one for end date? If not, is there a better way I should be approaching this widget? Perhaps I should create a POJSO (plain old JS object) instead?

what's it matter what the selector is? widgets use selectors because most of the time it applies to the selected elements. but it's up to the widget to use the selected elements. technically, it could just ignore them and continue processing whatever. so why don't you just select the document (or like the parent container of the textboxes), and pass in an object as the parameter to your widget with values for "textbox1" and "textbox2" and then get those values on initialization. does that make sense?
for example:
$("#parent_container").yourWidget({
txtbox1: $("#txt_id1"),
txtbox2: $("#txt_id2"),
otherParam: true
});
and in your widget code, just ignore selected elements. process everything based on the parameter's values.

Related

How do I iterate over a container with KendoUI widgets and get their values using jQuery?

I'm working with jQuery and KendoUI for MVC. I have a ul called #overview and each list item has a different kind of KendoUI widget in it. Those widgets are the like of text boxes, multi select, ranger sliders and dropdown lists. There is a button that the user can click which runs a jQuery function to gather the content of all these widgets.
The problem I have is that these widgets have Kendo specific code to access their values and text attributes such as $("MyControl").data("kendoDropDownList).text();, I am using a .each loop to iterate over the li and I need a way to grab the data from the varying controls and I was wondering if there was a clean way to do that?
With so many controls available it will make for a complex piece of code to check for every possible control that may be there.
Any help is appreciated.
This is kinda tricky. There is an obscure method called kendo.widgetInstance() that whatever element you pass intto it, it will check for a widget and return it's instance.
var $date = $("#date").kendoDatePicker({ value: (new Date()) });
console.log(kendo.widgetInstance($date).value());
Demo

Make multiselect selected elements appear outside textbox

Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);

Setting Default Dynamic Values in Select2 2.4.0?

I'm currently using the most up-to-date version of Select2. The select2 box is used to display a list of skills. I am trying to set the default values (for when it's opened) to contain the current skills. I have the information in proper format, I just cannot understand how to set it. The closest I've gotten is using:
//b is array containing list of user selected options
//#e1 is select2 id
for($i=0;$i<b.length;$i++) $('#e1').val(b[$i]).trigger("change");
However, this only displays the LAST option. Which I think is because I'm not allowed to set it in a loop. However I'm unsure how else to do it??
Any current solutions are invalid as of Select v2.4.0 as initSelection and .select2("val", data etc.) was removed.
Any help is appreciated.
My solution was actually very simple and avoided for loops all together.
$('#e1').select2({
//info
}).val(b).trigger("change");
val() in jQuery also accepts arrays.

How to create a custom filter for searching full table with Tablesorter lib?

I would like to create an external custom filter based on full text search over all (or several) columns (also searching in child rows, with custom text extraction functions for all nodes). Is it possible using the Tablesorter.
Everything I found was an external custom filter, but only for a certain column, not for multiple columns
Yes, it is possible... do the following:
Set up a single custom search input for searching the table. Bind to it using this function: $.tablesorter.filter.bindSearch( $table, $('.search') );
$('.search') being the input.
Set the filter_anyMatch option (demo) to true to allow using a single search input to match contents in multiple columns.
Set the filter_childRows option to true to include child rows content.
Then set the filter_useParsedData option to true to only search through the parsed data (obtained via the custom text extractions)
Please be aware that the filter_anyMatch option does put some limitations of the types of filter searches. It's all detailed in the demo link shared above.

MVC3 - jQuery datepicker when multiple elements have the same ID

I have a weird situation (don't we all?) with datepickers and want to get some advice.
I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location. The Edit displays below the Edit link, and they can edit multiple locations at one time. This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).
So, when I load my View, javascript adds datepickers to any fields that need it like so:
$(document).ready(function () {
var elements = $(".NeedsDatePicker > td > input");
$(".NeedsDatePicker > td > input").datepicker();
$(".NeedsDatePicker").removeClass("NeedsDatePicker");
});
Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.
Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?
$("#DateOpened", "Location-134").doWhatever...
...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function? Or any other advice?
You should definitely keep IDs unique within an HTML DOM. Most, if not all, DOM manipulation libraries/frameworks, including jQuery, have this assumption built-in.
There are a few questions on SO WRT to avoid the same IDs in the form:
two forms with same input id in asp.net mvc
how to prevent html input id duplication on asp.net mvc 3 when a model contains multiple elements

Categories