I am using jQuery Nestable http://dbushell.github.io/Nestable/ and have converted all of the items into a text box so they can be updated, now the problem is that when you click on the item it starts to move them and will not let you select the textbox.
To combat this I have used the below
event.stopPropagation()
However this only works on the first item, is there any way to get it to work for all items?
use:
event.preventDefault();
This should help you.
From comments, I think this is what you are needing:
$('input[type=text]').mousedown(function(){
event.preventDefault();
});
Related
Normally, when a user selects an item in a <select>, the 'change' event gets fired.
However, when you change the value of the same <select> with $('select').val('something'), the event doesn't get fired.
I know I could do:
$('select').val('something').trigger('change');
but that's not the problem I'm trying to solve...
Is there a way to get the change event working, without manually triggering it?
I put together a quick JsFiddle to better explain the problem, check it out:
http://jsfiddle.net/W723K/1/
Cheers
It's not possible, unless you manually trigger the change function. If you don't like typing that code several times, extend the jQuery object. Fiddle: http://jsfiddle.net/W723K/2/
(function($){
$.fn.changeVal = function(value){
return this.each(function(){
$(this).val(value).trigger('change');
});
}
})(jQuery);
//Usage:
$('select').changeVal('something');
I am new to jQuery and found a couple of different approaches for this online but nothing worked for me so I hope someone can help me.
I have a number of Selects. Each of them has one option with a class "defaultSel" to indicate that this should be selected as the default when a certain event is triggered.
My approach was the following which does change the Selects value but I can't get it to actually trigger the change (neither adding .change() nor .trigger('change') worked for me here).
Also, if there is a way to avoid .each here at all please let me know as well.
My jQuery:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('.defaultSel').each(function(){
$(this).prop('selected', true).change();
});
Many thanks in advance for any help,
Mike
If your option is the thing with the defaultSel class then this should work:
$(this).closest('div').nextAll('div.hiddenDiv').show().find('select:has(option.defaultSel)').each(function(){
$(this).find('option.defaultSel').prop('selected', true).end().change();
});
Just changing two things here:
find('select:has(option.defaultSel)')
will get the select set you're actually wanting, and
$(this).find('option.defaultSel').prop('selected', true).end().change();
this here is the select so you need to find the default option, then end() will return you to the select and you can trigger change() on it.
Currently I have written a jQuery statement which "highlights" a specific item in a drop down.
$('#mylist>option:eq(2)').prop('selected', true);
The above will highlight the second item and have it appear at the top of the list.
There's still a problem though, because subsequent code that I have written is behaving as though no option was chosen from the list.
Is there a way, using jQuery, to simulate the actual "clicking" on an item in a select list?
After the line you have above, you should try $('#myList').trigger('click'); I don't know if that will fix your problem, but that triggers a click event on this element.
As directly from the jQuery docs you can simulate as follows:
$( "#target" ).click();
See: http://api.jquery.com/click/
Is there a way to 'undo' functions in jQuery? Let me explain.. I have a function which recreates exactly the select html tag. As you know with a select tag, clicking on a list item select that one, when clicking outside the select tag, the whole dropdown list closes. The selecting works fine, but the closing isn't. I though this would work with the event.stopPropagation() event object but it doesn't. Is there any other solution for this?
Demo: http://jsfiddle.net/cmAtc/
There is really nothing like what you are asking for that is built into jQuery natively. You have to do it on your own.
My suggestion would be to bind to the document:
$(document).on('click', function () {
$(".dropdownlist li").parent().children(":not(.selected)").hide();
});
You already have the stopPropagation that would prevent this from being triggered when you click the list too.
http://jsfiddle.net/cmAtc/1/
Note: The answer marked as the answer, answers the questions in the Title. However, my underlying problem, using type ahead dropdowns, is solved by moving to IE8.
I have a drop down list that when I CLICK a NEW selection I want to cause a postback ("this.form.submit()") But only if the click on the dropdown list just changed the selection.
Note that OnChange will NOT work because when the selection is changed by the keyboard I would not want to postback because it is a type ahead dropdown list.
I also suppose I could use OnChange and check if the change was caused by the mouse.
Maybe if we can come up with both solutions and i'll see which works better?
Thanks so much for your help!!!!!
EDIT: More information:
AutoPostback = true; will not work. (don't want it to post back when the selection is changed by the keyboard)
onBlur = doPostBack; I tried this, but the result is not optimal. The user has to click off the ddl after making a selection with the mouse.
Another way to state what I want to do, i think, is do a postback when both the OnChange and OnClick events fire at the same time.
On the OnClick event I have javascript that sets the ddl.value = true;
On the OnChange event I check to see if ddl.Value = true if so I postback and set it to false.
On the OnKeyDown I set ddl.Value = false so that when I click on the ddl it only posts back if I change the selection with the mouse, if I press a key to use the type-ahead-feature it will not postback.
Not the most elegant solution but it works and you have to give me creadit for creativity.
Note: This solution work in combination with a script that fires on OnKeyDown that runs the type-ahead-ddl(ie. moves you to the closest selection when you press a key) and postsback when you press enter.
Did you try AutoPostBack="true" ?