I have form with many textbox and select tags. When i click the select tag its not opening the dropdown menu instead it move focus to next control that i have not selected.
This issue occurs only in iPhone.
Please anyone help me to solve this.one.
To Stop automatically closing dropdown issue or stop switching to other element issue use
preventDefault() method in touch event of the select element.
Example
$("#dropDownID").on('touchstart', function (e) {
e.preventDefault();
});
Related
I am using Select2 and I am adding a custom button to the start of it using the following code:
$("#select2-ddlCustomer-container").off().on('click',
function() {
$("#ddlCustomer-add").remove();
$("#select2-ddlCustomer-results")
.before("<div id='ddlCustomer-add'><i class='fas fa-user-plus'></i> Create new customer</div> ")
.promise().done(function() {
$("#ddlCustomer-add").off().on('click',
function() {
alert('test');
});
});
});
However as soon as the select box opens it automatically highlights the first option even though I have not hovered over it, this means that when I hover over my "Create new customer" button the first option in the list is also highlighted which looks confusing to the end user.
Does anyone know how I can stop it highlighting an option by default and only highlight an option if the mouse is actually hovered over it?
I have got around this issue by adding the following code to remove the highlight class from all the options when I hover over my "Create new" button, this doesn't technically unselect the option and it doesn't resolve the issue with the first option in the list being highlighted when the dropdown is opened even though I haven't hovered over it but it is a workable solution for now:
$("#ddlCustomer-add").hover(function () {
// Un-highlight all options
$('.select2-results__option').removeClass('select2-results__option--highlighted');
});
I have a kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
I am trying to use the ShowHide effect that comes with Kevin Moore's widget package here:
http://dart-lang.github.io/widget.dart/#showhide
Not sure how to use this. Anyone got an example I can look at ?
Basically all I want is for a dropdown to show with one of those effects if a certain event happens.
Your tips appreciated.
Thanks.
You need to add a listener for an event to an element in the DOM, and then use ShowHide.toggle(element, effect) to trigger an effect. Here is an example which listens for a click on a button, and toggles FadeEffect on an image each time it is pressed:
var button = query("#fadeButton")
..onClick.listen((event) {
ShowHide.toggle(query("#fadeImage"), effect: new FadeEffect());
});
If you wanted to fade in/out a dropdown when you click on a menu bar, then substitute "fadeButton" for the menu which listens for clicks, and "fadeImage" with the dropdown element.
Also, any other effect can be substituted for FadeEffect, such as DoorEffect, ScaleEffect, ShrinkEffect, etc.
I have a problem with JQuery UI Autocomplete.
I want it to behave like this:
If I have positioned my mouse right under the input and entering values, so the autocomplete appears and press enter, the script will select the value from the autocomplete list. I'd rather want the script to just close and select the user entered value.
In short form: I want autocomplete just to replace the input text if a user actually clicks on a suggestion.
Is this possible somehow?
Best Regards
You can play with the select event:
select : function(event, selectedObject) {
jQuery(this).val(selectedObject.item.value);
}
I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));