I'm doing PhoneGap project for my company.. Here goes on..
I have json file named city.json
[{"CityID":1,"CityName":"Magelang"},{"CityID":2,"CityName":"Jayapura"},{"CityID":3,"CityName":"Aceh"}]
I only want to get this city data for the option in my html select box named "city".. I had searched on the web, but couldn't find any solution for this JSON pattern.. I have tried this code, but it didn't work..
$(document).ready(function(){
$.getJSON('city.json',
function(data){
var html = '';
var len = data.length;
for (var i = 0; i< len; i++) {
html += '<option value="' + data[i].CityID + '">' + data[i].CityName + '</option>';
}
$('#city').appendTo(html);
});
});
I have imported the jquery javascript plugin too.. I really have no idea to make it works..
Please help me..
Use .append() not .appendTo(). The way you are doing it you are trying to append $("city") to your html variable.
Related
I'm trying to execute this and be able to get a different value for "new_id", the data is correct when getting this API call and there are 7 different id's. However, no matter what I select produces 7 as the new_id value. Please help, sorry for my noob question in advance!
I've tried making data[0] instead of data[i] but I really don't know where to start
var new_id = "";
$(document).ready(function () {
$.ajax({
"url":api_base+"/endpoint",
"type":"GET",
"contentType":"application/json",
"success":function(data){
var s = '<option value="-1">Please Select</option>';
for (var i = 0; i < data.length; i++) {
s += '<option value="' + data[i].check_id + '">' + data[i].check + '</option>';
new_id = data[i].check_id
}
$("#check_list").html(s);
}
});
I'd like to get a different result each time I select a different value.
#Dan Winnick - So where ever the select tag is, add these attributes - id="mySelect" onchange="dropDownChangeEvent()" and in js file add - function dropDownChangeEvent() { new_id = document.getElementById("mySelect").value; }
I am looking for browser (chrome/firefox) extension to list all iframe src in the current page.
This is pretty trivial to do in JavaScript:
var allIframesOnPage = document.querySelectorAll('iframe');
var len = allIframesOnPage.length;
window.console.log('There are ' + len + ' iframes on the page.');
for (var i = 0; i < len; i++) {
var current = allIframesOnPage[i];
window.console.log('iframe[' + i + '].src == "' + current.src + '"');
}
Combine that with a bookmarklet generator such as this one, and you should be good to go.
I am using JQuery mobile for the first time. I want to populate a combobox from the JSON result. Here is the markup of the combobox:
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>
The JSON response is like this:
[{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}]
And this is the JavaScript function I have written:
$(document).on('pagecreate', '#mainPage', function () {
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
if (condition === 'ONLINE') {
var options = '';
$.ajax({
url: '/GetChaptersList',
type: 'GET',
success: function (data) {//populate the combobox
for (var i = 0; i < data.length; i++) {
options += '<option value="' +
data[i].chapterId + '">' +
data[i].chapterName + '</option>';
}
$("#comboChapters").html(options);
},
});
}
else
alert('Please connect to the internet.');
});
The above code does not work. I have even tried the following code:
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
Can someone point out how it can be done? I need the same functionality for checkbox list as well.
Populating the combobox appears to work. Check this:
<select name="comboChapters" id="comboChapters" data-native-menu="false">
var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
http://jsfiddle.net/qsafmw5g/
Are you sure your request gets the data properly? Is "/GetChaptersList" the right URL?
Edit:
To make it work with jquery mobile you need to add this after the code that populates the options:
$('#comboChapters').selectmenu('refresh', true);
Edited jsfiddle: http://jsfiddle.net/qsafmw5g/1/
I'm trying to populate a HTML select list from a text file located on the server. The file is setup like this:
ttt1111,John Doe
xxx2222,Jane Doe
etc....
The first column would be the <option value=""> and the second would be the displayed text. I read in the file and then split it into an array by each line. I'm having trouble trying to figure out the code to create the correct append line using the two values.
I'm extremely new to this so any help at all is appreciated, even just links to examples. This is my code so far, but it just assigns the entire line to the value and the text output.
function PopulateSupervisorList() {
var Suplist=[];
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
var SuperID=[];
$.get(SupervisorFile,function(data) {
Suplist = data.responseText.split("\n");
for (var i=0; i < Suplist.length; i++) {
DDL.append("<option value='" + SuperID[i] + "'>" + Suplist[i] + "</option>")
}
});
}
You have to split each line in columns
try this
function PopulateSupervisorList() {
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
$.get(SupervisorFile,function(data) {
var suplist = data.responseText.split("\n"),
cols;
for (var i=0, len=suplist.length; i<len; i++) {
cols = suplist[i].split(','); //split the line in columns
//so cols[0] -> ttt1111
//and cols[1] -> John Doe
//and so on for the rest lines
DDL.append("<option value='" + cols[0] + "'>" + cols[1] + "</option>");
}
});
}
How do I use
<select>
<option>numbers1-100</option>
</select>
I have to use 1 to 100 numbers in my option list.Typing all the options takes time and makes code bigger.I guess we have to use javascript to make it work using for loop and document write.But I dont know how to put the code in the right way.How do i list the options list using java script? I mean the java script should be beside my label;example
number : 1-1oo \\ here the options list should be printed
and number can be anywhere but the script should print options list beside the number.How do i make it ? Unable to figure it out.Been trying from an hour or so.
Place this function in your <script> tags or include it within a script. Than call the function, createSelectOption() whenever you need the select box to be created.
Here is how you would have it loaded on page load with just javascript: `
function createSelectOption() {
var select_option = '<select>';
for(i = 1; i <= 100; i++) {
select_option += '<option value=' + i + '>' + i + '</option>';
}
select_option += '</select>';
document.getElementById('div').innerHTML = select_option;
}
I have included a jsfiddle demo to show you that it should be working/
You shouldn't really use javascript for this, it would usually be better using a server-side language such as php. You could use a for loop or a while loop to do this quite easily
Here's one way to do this.
http://jsfiddle.net/ryh7k/1/
var selectEle = document.getElementById('mySelect'),
optionEle = undefined;
for (var i=1;i<=100;i++) {
optionEle = document.createElement('option');
optionEle.setAttribute('value', i.toString());
optionEle.innerText = i.toString();
selectEle.appendChild(optionEle);
}
Simplest case:
<select>
<script>
for (var i = 1; i < 101; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
But there are of course problems with this. First, people without JS will not see any options and having a SCRIPT tag inside a SELECT is not that nice either.
<select id="container"></select>
<script>
var s = document.getElementById('container');
var opts = '';
for (var i = 1; i < 101; i++) {
opts += '<option value="'+i+'">'+i+'</option>';
}
s.innerHTML = opts;
</script>