I'm working with Yii and select2. How can I initilize all the results in the dropdown disabled and enable them dynamically? Actually I did this for disable all the results:
$('#select2').on('open', function(e) {
$('#select2 option').each(function() {
$(this).attr('disabled', true);
});
});
I checked the options in the html code an all are disabled:
<option value="222" disabled="disabled> first </option>
But I can still choose them.
Thank you
for disabling dropdown
<script>
$(document).ready(function(){
$("#select2").prop("disabled",true); // do it like this
});
</script>
Related
When I have a click handler in a div that is repeated with v-for, it seems like changes made in that click handler will not be updated in the DOM.
Why?
https://jsfiddle.net/AndersBillLinden/109uzsx7/27/
html:
<div id="vue">
<input type="checkbox" v-model="force_update"/> force update
<div v-for="e in arr">
{{e.id}} = {{e.text}}
click
<span v-show="e.clicked"> clicked</span>
</div>
</div>
js:
new window.Vue(
{
el: '#vue',
data:
{
arr: [{id:1,text:"one"}, {id:2, text:"two"}, {id:3, text:"three"}],
force_update: true
},
methods:
{
on_link_clicked(e)
{
e.clicked = true;
if (this.force_update)
this.$forceUpdate();
}
}
});
clicking link 1
unchecking force update
clicking the 2nd link
(nothing happens)
checking "force update"
Now the changes in the previous step are rendered.
The conclusion is that we sometimes needs to force the update, but it is unclear why.
Change e.clicked = true; to this.$set(e, 'clicked', true) so it adds reactivity to the property which is not already in the model.
When the user double-clicks this:
<div
class="open-select"
v-if="!editable"
#dblclick="editable=true">{{ name }}
</div>
I'd like this multiselect to be open and focused:
<multiselect
v-else
v-model="name"
:options="names"
track-by="id"
tabindex="0"
autofocus
#select="editable=false"
></multiselect>
The double-click event shows the multiselect element fine, but the multiselect still requires the user to click it to open. I'd like it to open automatically after appearing.
Things I've tried:
focusing the multiselect:
tabindex="0"
autofocus
When I try to select the focused item in jQuery, $(':focus')[0], I get 'undefined'
Heyo!
You can put a ref on the component and then trigger focus which will open the dropdown.
<multiselect ref="vms" v-bind="yourAttributes" />
And then in your created hook you add
this.$refs.vms.$el.focus()
A simplest solution - Toggle Vue Multiselect dropdown
You can use 2 events (#open, #close) on VueMultiselect
anda ref in multiselect
like
ref="multiselect"
keep in
data(){
isOpen: false
}
then add to the 2 events
#close="isOpen = false"
#open="isOpen = true"
and use a method
toggle() {
if (this.isOpen) {
this.$refs.multiselect.$el.blur()
this.isOpen = false
} else {
this.$refs.multiselect.$el.focus()
this.isOpen = true
}
}
Finally figured out how to do this (ref didn't work for me):
STEP 1: I was focusing on the wrong element.
So a vue-multiselect element is structured like this (shorthand to only show important parts):
<div class="multiselect"> // <= This is the element to focus on
<div class="multiselect__tags">
<input> // <= Not the input
</div>
</div>
Typically you want to put your tabindex on the input, instead you should put it on the parent with a class of multiselect. This also goes for things like jQuery's focus(). So...
No: $('.multiselect input').focus()
Yes: $('.multiselect').focus()
STEP 2: Correcting tabindex.
Another issue is when vue-multiselect puts a tabindex="-1" on all .multiselect elements. This removes them from the natural order of tabindexes, so you need to reassign all the tabindexes:
In mounted and updated (if necessary) you need code to reassign all the tabindexes:
mounted: function() {
$(document).ready(()=>{
// you may need to delete all tabindexes first.
$('[tabindex]').each( (i,v) => {
$(v).removeAttr('tabindex');
return true;
});
// add new tabindexes
$('input, textarea, button').each(( i,v ) => {
var isMultiSelect = $(v).hasClass('multiselect__input');
if(isMultiSelect){
$(v).parents('.multiselect:first').attr('tabindex', i + 1);
else{
$(v).attr('tabindex', i + 1);
}
});
});
}
I'm trying to use Bootstrap 3 with Bootstrap Tags Input and typeahead but it doesn't show the tags inside the input.
It is difficult to explain... It is better to see in jsfiddle:
https://jsfiddle.net/claudiosw/5cww4fcg/3/
I have tried to use typeahead.js but the result was the same.
Here is the code:
<input type="text" class="form-control" rows="3" value="Test1,Test2" data-role="tagsinput" />
<script>
$(document).ready(function() {
$('input').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});
});
</script>
Thanks in advance!
To fix it do two things:
To show the tags inside the input dont use both data-role="tagsinput" and tagsinput(). Instead, init it only with in the js.
To clear the plaintext after a tag is added you should add:
afterSelect: function() {
this.$element[0].value = "";
}
to the tagsinput() options.
See updated JSFiddle
I have this code on my View
<h2>#ViewBag.FileContent</h2>
#using (Html.BeginForm("ShowWebSiteLinks", "Home"))
{
<label>WebSite URL:</label>
<input type="text" id="ft" name="fturl" value="http://localhost/search/?sr=100" style="width:350px"><br>
<label>Save to file:</label>
<input type="text" id="filename" name="links_filename" value="links.txt" style="width:200px"><br>
<input id="btnSubmit" type="submit" value="Start" />
}
After i click on submit button, controller call function fine, but submit button stays enabled. I want to prevent multiple clicks on button and want to disable it but not sure how. Ive tried with this javascript but it does not work.
$(document).ready(function () {
$('btnSubmit').click(function (e) {
$(this).attr('disabled', true);
});
});
Can someone help me with this?
Your javascript is almost correct, but the selector is wrong. Try this:
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('disabled', true);
});
});
Notice the "#" in the selector. This tells jQuery to find by element ID. If you don't put the "#" it will find by element name (i.e. "input", "div", etc...)
Edit:
Here's a good cheat sheet on selectors: http://refcardz.dzone.com/refcardz/jquery-selectors
Edit 2:
Update to use "$(this).prop(...)" rather than "$(this).attr(...)"
Edit 3:
I recommend you place your javascript code at the end of the page (not the head). Something like this:
<html>
<head>[...]</head>
<body>
[...]
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('disabled', true);
});
});
</script>
</body>
</html>
The above answer isn't working for me. I've noticed that if you bind to the click event and immediately disable, you'll actually prevent the form submission from happening.
Instead, I do the following:
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function (e) {
$(this).prop('hidden', true);
});
$('#myform').bind('invalid-form.validate', function () {
$('#btnSubmit').prop('hidden', false);
});
});
</script>
That hides your submit button when the action is clicked but still allows the action to go through. The second statement is there to re-show the button if validation fails. More details on that can be found here: ASP.net MVC Validation Hook
I am using jquery jqModal script for popup windows.
I have one html page with two jqModal windows. I would like one to load when the page opens, and another one opens separately via onClick.
My script is not working. The onLoad works (#success), but the onClick (#dialog) opens both up at the same time.
Here is my current script:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
</script>
here is the updated code u can try
$(document).ready(function() {
$('#dialog').jqm( {trigger:'#dialog'} );
// $('#dialog').jqmAddTrigger('#dialog');
$('#success').jqm().jqmShow({});
});
Let me know if its working for you
Here you need to add trigger when the modal window will open up
The code you presented works without problems for me. Here is the complete snippet I used:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
function showModal() {
$('#dialog').jqmShow({});
}
</script>
<div id="dialog" class="jqmWindow">test</div>
<div id="success" class="jqmWindow">test</div>
<input type="button" value="Show Modal" onclick="showModal()"/>