I have a simple jquery select issue using Query Mobile that I have googled for and the answers I've found just aren't working. I have an html select as follows:
<select name=x id=Sel>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
</select>
I read the actual value from a database using an ajax call and then execute the line:
$("#Sel").val(result);
The screen still shows 1 as selected. I have verified that immediately before this line that result is equal to 2.
I know I've seen this somewhere, just can't remember where.
You need to refresh the jQM selectmenu widget after changing the value:
$("#Sel").val(2).selectmenu("refresh");
DEMO
Related
I'm experiencing some problems when sharing links on Facebook, they are opened inside Facebook instead of the default browser. Usually, I don't mind but I discovered that some features on my pages were simply not working and I don't know why.
I have for example this that works:
<input list="brandlist" name="brandlist" oninput="loadModel()" data-label="brand">
<datalist id="brandlist" >
<option value='Acer'>Acer</option>
<option value='Alcatel'>Alcatel</option>
<option value='Apple'>Apple</option>
<option value='Asus'>Asus</option>
<option value='Black'>Black</option>
<option value='Blackshark'>Blackshark</option>
<option value='Blackview'>Blackview</option>
<option value='Cubot'>Cubot</option>
</datalist>
This code works as expected, when I start typing something in the input field the content of <datalist> is filtered and I can select one of the options.
The following code doesn't work:
<input list="modellist" name="modellist" data-label="model">
<datalist id="modellist">
<option value="model1">Model1</option>
<option value="model2">Model2</option>
<option value="model3">Model3</option>
<option value="model4">Model4</option>
</datalist>
The difference between both is that the second one loads the options from an ajax call.
The content is displayed correctly on the screen, I see the filtered list when I start typing but as soon as I select one of the options the list disappears, and the content of the option tag is not propagated to the input field.
I also see differences in behavior with alert().
From what I understand it is impossible to force Facebook to open Chrome which means that I'll have to adapt my code but in order to do this, I need to understand why it is not working in Facebook while it works fine with Chrome or any other browser.
Any idea?
additional info: submit in JS to my API doesn't seem to work either.
I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.
I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});
You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)
Try this:
if($('#12').val()!='') {
// your code
}
I have a problem with JQuery & HTML.
I'm working on Wordpress 3.8.1, so my code is split up.
I've got this input (in sidebar.php):
<input type="hidden" name="lg" value=" ">
This input value needs to change when a option has been choosen from a select.
The select code is (in header.php):
<select class="langbox" name="lang" onChange="url_redirect(this.options[this.selectedIndex].value)">
<option >Language</option>
<option class="text-option" value="it">Italiano</option>
<option class="text-option" value="en">English</option>
<option class="text-option" value="de">Deutsch</option>
<option class="text-option" value="fr">Français</option>
<option class="text-option" value="ru">Pусский</option>
</select>
This is my function url_redirect():
function url_redirect(lang){
alert($('input[name="lg"]').val());
$('input[name="lg"]').val(lang);
alert($('input[name="lg"]').val());
window.location='http://www.myurl.com/'+lang;}
The first alert shows me that the value is " ", the second alert shows me the correct result (de, it, fr, en, ru), but the value of the input doesn't change, and I don't know why. I've tried everything but nothing works. The reason could be that the code is split in different files .php as wordpress needs? JS error?
P.S: the window.location works.
I think you can use cookie and set value to select,you can use jquery cookie plugin i think cookie functions is deprecate from jquery library
function url_redirect(lang){
$.cookie("selectindex",lang);
alert($('select[name="lang"]').val());
$('select[name="lang"]').val(lang);
alert($('select[name="lang"]').val());
window.location='http://www.myurl.com/'+lang;
}
if($.cookie("selectindex") !== undefined){
$('select[name="lang"]').val($.cookie("selectindex"));
}
I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>