I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".
Here is the HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch">
</label>
<select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">
<option value="off">gps</option>
<option value="on">manual</option>
</select>
</fieldset>
</div>
and here is my JavaScript:
$('#toggleswitch').change(function(){
console.log("toggle");
});
At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.
EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.
Your id on the select element is toggleswitch3, but in the JavaScript code you use toggleswitch. The names need to match in HTML and JavaScript, otherwise it can't work.
Did you put the code in the dom ready callback?
$(function() {
$('#toggleswitch').change(function(){ console.log("toggle"); });
});
PS: If you use id selector, no need to specify the element type.
Edit:
Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.
Related
I want to disable/enable a html select element programatically. My project is using jQuery mobile 1.4.5 and jQuery 2.1.4.
To disable the element in jQuery I do:
$('#filter_refn').prop('disabled', true);
Results after rendering in:
<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
<option value="" selected="">Referenznummer auswählen</option>
</select>
This "somehow works. As the user can not select anything, however the box is still active and not disabled as it would be by doing it directly in html.
I noticed that the disabled property by jQuery does not contain "true"
example in jQuery mobile:
native html:
How can I disable the element in a similar way then in HTML?
You need use the functions provided by the jquery mobile API to change the state of their components.
Selectmenu Widget: disable():
$( ".selector" ).selectmenu( "disable" );
The styling of those elements is done by css rules and those utilize the [disabled] selector.
But if you do $('#filter_refn').prop('disabled', true); on a none user input element, then only the property disabled changes, but not the attribute. For elements like select, button, input, ... the $('#filter_refn').prop('disabled', true); will change both property and attribute.
Writing $('#filter_refn').prop('disabled', true).attr('disabled', true); would most certainly also change the visual appearance, but you still should use the functionality provided by the API.
How is your HTML doctype declared? In XHTML the "disabled" attribute must have a value, while in HTML it doesn't need to have a value. Also it may have something to do with your browser, so it'd be more helpful if you can provide more info on the DOCTYPE declaration and the browser you are using to test the page.
For my latest version desktop Chrome browser
<select name="ref_id" id="filter_refn" data-mini="true" disabled>
<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">
all produce the same result when the doctype is html5, which should be the correct case.
However if your browser or doctype require the "disabled" attribute to have a value, you may use the jQuery "attr" function, that somehow
$('#filter_refn').prop('disabled', true);
produces
<select name="ref_id" id="filter_refn" data-mini="true" disabled>
while
$('#filter_refn').attr('disabled', true);
produces
<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">
and see if that does what you want?
I have a project im working on, that needs a javascript OnChange Script for a dropdown box on media upload page.
I have a drop-down box with 2 options -'Yes' and 'No'. If the user selects 'No' i don't want the form to submit and possibly display a message saying why.
Is anyone able to provide a script to do this? I have to enter this on the attribute itself (eah attribute has the ability to have a OnChange script), i can change the attribute references to the specific ones needed. More of a general 'formula' for the script is needed.
Maybe i'm too vague and its not possible to make on the information i have given you.
Thanks in advance,
T.
first, write javascript code like this
<script>
function output()
{
var input = document.getElementById('input').value;
if(input==0){
alert("WHY???");
document.getElementById("out").value="why?";
}else{
document.getElementById("out").value="Ok";
}
}
</script>
and for the html code
<form>
<select name="input" id="input" onchange="output()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="out" name="out">
</form>
note: javascript not java
My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
I'm building a simple 1 page app that allows someone to curate a list of json feeds. I'm running into an issue with trying to bind a mouseenter/mouseleave event to all the inputs on the page with a given class. Simply, put the first works and the second does not.
I have to following jquery:
$(".feed").on("mouseenter", ".publish", function(){
console.log("feed")
}); //this is for test purposes
$(".feed").on("mouseenter", ".keys-input", function(){
console.log($(this));
$(this).siblings(".delete").fadeIn(75);
});
$(".feed").on("mouseleave", ".keys-input", function(){
$(this).siblings(".delete").fadeOut(75);
});
and the following html:
<div class="feed"><!-- sorry for the confusion -->
<div class="feed-header">
<h2>pga-2013.json</h2>
<button class="publish button-white-bg button-save">Publish</button>
</div>
<div class="kvRow collapsed">
<span class="delete icon">x</span>
<input type="text" class="keys-input" value="free" disabled=""/>
<input type="text" class="values-input" value="0" disabled=""/>
</div>
</div>
The reason I ask if there is a max number of elements you can bind to is because the ".feed" event triggers and there are only 11 of them on the dom whereas the ".keys-input" event does not and there are 7266 of them on the dom. Either that or I'm blind and doing something dumb...
here's a fiddle with fewer elements but the same code that works http://jsfiddle.net/khLPc/
this is the issue: Event on a disabled input the inputs are disabled so they won't fire events which is bananas to me...
The event is not triggered on the disabled element.
Enable the input and it will work.
Check here, I've enabled one of the input fields:
http://jsfiddle.net/balintbako/khLPc/1
Apparently I have to include some code too:
<input type="text" class="keys-input" value="free"/>
here is my simple html code for drop down list:-
<span id="Div_List">
<label for="Gender">For:</label>
<select name="Gender" id="Sex">
<option value="1">1000mtr</option>
<option value="2">1500mtr</option>
<option value="3">2000mtr</option>
</select>
</span>
i want to create one textbox inside select.
how its possible?
if any way to do this please suggest your idea.
thanks.
I guess you're looking for something like this.
Its impossible using strict html. You have to emulate it.
For example chosen is really nice plugin which you can check.
You can use jQuery .comboBox() in jQuery.It will hide the selectbox and it creates a text box to enter the data which is going to autopopulate
Read this for more info:
I hope it helps.