How to correctly validate option value that uses Select2? I have a problem when some value is set before changing to any other. It looks correctly, but validation error is shown until I'll change value. Thank you for any help.
Try this solution.
How to make jQuery validation engine works well for select2()?
In select2.js file
Find this (Line 341)
if (this.indexOf("select2-") !== 0) {
And replace with
if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {
I had the same problem. So in select2.min.js find this strokes (should be 2 strokes in script):
D(this.container,this.opts.element,this.opts.adaptContainerCssClass)
and add this code right after stroke you've found
,this.container.removeClass("validate[required]")
this should solve your problem.
add this css to your head tag.
.has-error {
border-color: #dd4b39 !important;
}
and this is how i am calling select2 for Jquery validation engine.
$("#form").validate( {
ignore: ".ignore, .select2-input",
rules: {
txtproduct: "required",
txtwarehouse: "required",
//txtdescription: "required",
txtquantity: {required:true,number:true},
txtrate: {required:true,number:true},
txtdiscounttype: "required",
txtdiscount: {required:true,number:true},
txtamount: {required:true,number:true},
},
highlight: function ( element, errorClass, validClass ) {
$(element).addClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").removeClass('has-error');
}
}
} );
}
Select2 library make the original selector hidden, and validation engine can not work for hidden element, so first is make the visible, then the validation engine can see it. The second is we need to make the selector element hidden for us, there are about 2 ways to do, such as set it’s opacity into “0”, or make it’s height/width as “0px”, actually we need both.
Below is the code example:
$("select").select2();
$.each($(".select2-container"), function (i, n) {
$(n).next().show().fadeTo(0, 0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
$(n).prepend($(n).next());
$(n).delay(500).queue(function () {
$(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
$(this).dequeue();
});
});
Reference: http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/
Related
I added as a callback custom string to afterLabel in chart.js tooltip.
tooltips: {
callbacks: {
afterLabel: function (tooltipItems, data) {
return 'my nice string'
}
}
},
I am using default tooltip and if possible would like to continue so. Problem is that "afterLabel" comes at a new line and I haven't found where to define the width (or remove line break). Question is similar. How do I define width of tooltip and/or remove the line break.
I'm attempting to have an element's draggable functionality depend on a click event. I'm using jquery-ui's draggable method (within a vue.js instance).
In my Vue instance I have these two data properties: isVisible and a isDraggable. They assume a truthy or falsy value each time the user clicks a button. On my methods object I have the following:
methods: {
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
}
}
I'm using the destroy method in order to have the targeted element return to its original position (documentation here). However, I am not getting the intended result, as can be seen in the jsfiddle below. The following is one of many (unsuccessful) attemtps to tackle this issue:
ready: function() {
this.$nextTick(function() {
if (this.isDraggable == true) {
$('.box').draggable({
containment: "window"
})
} else if (this.isDraggable == false) {
$('.box').draggable(
"destroy"
)
}
})
}
Jsfiddle here. I wonder what I'm doing wrong here? Any hint appreciated.
The ready function only gets called once, during initialization of the vm element. Whenever you click on the "toggle" button, there's nothing that tells the nextTick method to execute. I'm not at all familiar with the vue api, so there probably will be a way to do what you want using the nextTick method.
Given my lack of knowledge regarding the api, I came up with a solution that seemed the most straightforward for your requirements i.e. updating the toggleBox method to check the isDraggable property and resetting the position of the box according to its value.
If you introduce other elements, you'd need to implement a solution that takes into account all of the default positions and re-apply them when you click the "toggle" button.
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
if (this.isDraggable) {
$('.box').draggable({
containment: "window"
})
} else if (!this.isDraggable) {
$('.box').offset({ top: 8, left: 8});
}
}
Fiddle example
Adding to #Yass's answer above, if instead of hard-coding the offset's top position of the element .box , you wanted to calculate it, here's one way to do it (which is useful in those cases where the browser's window changes size for instance):
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
var body = document.body.getBoundingClientRect();
var element = document.querySelector('.box').getBoundingClientRect();
var topPos = body.height - element.height;
if (this.isDraggable) {
$('.box').draggable({
containment: "window"
})
}
else if (!this.isDraggable) {
$('.box').offset({
top: this.topPos,
left: 8});
}
}
How do I refer to the disabled option from inside a create event?
The code below works, but I would like to do it slightly cleaner and shorter by not referring to $(this), but instead to the "event" and "ui" parameters. I lack the knowledge to understand or know how to work with these parameters.
$(".myDroppables").droppable({
create: function (event, ui) {
//If class is full then set option disabled to true.
if ($(this).hasClass('full'))
$(this).droppable("option", "disabled", true);
}
});
I imagine that it would look something like this:
$(".myDroppables").droppable({
create: function (event, ui) {
if ($(this).hasClass('full'))
this.disabled = true;
}
});
How do I do it?
The callback arguments are documented in the droppable widget's overview:
All callbacks receive two arguments: The original browser event and a
prepared ui object:
ui.draggable - current draggable element, a jQuery object.
ui.helper - current draggable helper, a jQuery object.
ui.position - current position of the draggable helper { top: ,
left: }
ui.offset - current absolute position of the draggable helper {
top: , left: }
That said, the ui argument passed to a dropcreate callback won't expose any of these properties (fiddle), probably because it's too early in the widget's lifecycle for them to have any meaning.
In your particular case, you're more or less forced to use this in order to apply the disabled option. However, you can cache the return value of $(this) to slightly improve performance:
$(".myDroppables").droppable({
create: function(event, ui) {
var $this = $(this);
// If class is full then set option disabled to true.
if ($this.hasClass("full")) {
$this.droppable("option", "disabled", true);
}
}
});
I've got some jQuery code written to enable autocomplete on an input field.
I'm having two issues with it that I can't seem to fix.
Tabbing away from the field will not populate the input. What I need is for either the FIRST suggestion to populate the field if nothing is selected(clicked or selected via up/down) OR for the highlighted item to be populated in the field. (note: highlighting is done via up/down arrows)
When using the up/down arrows I need the input to display the "LABEL" and not the "VALUE" Currently pressing up/down will populate the input the the VALUE.
Any advice will be greatly appreciated.
Here is my JSBIN testing ground.
http://jsbin.com/iyedo3/2
Note: the <input id="dummy" /> field is just there to give you something to "tab" over to. If it's removed the help area is expanded.
I think I've figured this out. Using the jQuery AutoComplete Helper
$(function () {
$(label_element).autocomplete({
source: json_string,
selectFirst: true,
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
$(value_element).val(ui.item.value);
$(label_element).val(ui.item.label);
return false;
}
});
});
And the following Select First Script
(function ($) {
$(".ui-autocomplete-input").live("autocompleteopen", function () {
var autocomplete = $(this).data("autocomplete"),
menu = autocomplete.menu;
if (!autocomplete.options.selectFirst) {
return;
}
menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first());
});
} (jQuery));
Now anywhere I need to add autocomplete, I just use this.
<script type="text/javascript">
var json_string = // My Autocomplete JSON string.
var label_element = "#RegionName";
var value_element = "#RegionID";
</script>
I won't to give a different hover colors to my jquery dialog buttons. For example when the user will hover over the "Ok" button the hover color will be blue and when he hovers over the cancel button the hover color will be gray.
Can anyone tell me how can I do it?
$(document).ready(function() {
$(":button").hover(function() {
$(this).css('background', 'url(' / images / buttons / green_26.png ')');
});
$(":button").mouseout(function() {
$(this).css('background', 'url(' / images / buttons / grey_26.png ')');
});
});
Basic theory: use one or more css classes which you add to your html object dynamically on mouse-in, and remove on mouse-out. You can take a look at the jQuery hover event and some examples of how to work with attributes in jQuery to get an idea of how to do it.
In detail: There are two different ways to approach this that I can immediately think of, depending on where you want to make the ok/cancel button "decision".
Add two different classes to your stylesheet with different background colors, and add one class to each element. That means you'll need two very similar jQuery methods, but most of it can be factored out to avoid duplication.
Hard-code different class names on your buttons (or use button id's or someting) and make two different css selectors, for example something like .ok .hover { your style here } and .cancel .hover { your style here }. Then you just need one jQuery call, that hits both buttons with the jQuery selector and adds/removes the hover class.
You can use this function:
function changeButtonClass(buttonIndex, classes) {
var selector = 'div[class^=ui-dialog-buttonpane] > button';
var buttonConcerned;
if (buttonIndex >= 0) {
buttonIndex++;
buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')');
} else {
return;
}
buttonConcerned.removeClass();
buttonConcerned.addClass(classes[0]);
buttonConcerned.
hover(
function() {
$(this)
.removeClass()
.addClass(
classes[1])
},
function() {
$(this)
.removeClass()
.addClass(
classes[0])
})
.focus(
function() {
$(this)
.removeClass()
.addClass(
classes[2])
})
.blur(
function() {
$(this)
.removeClass()
.addClass(
classes[0])
});
}
And then call your function with this (for a 3 buttons dialog):
var classes = new Array('myClass', 'myClass2', 'myClass2');
changeButtonClass(0, classes);
var classes = new Array('myClass3', 'myClass4', 'myClass4');
changeButtonClass(1, classes);
changeButtonClass(2, classes);
And so it works ;)