All the code works will. When I put console.log(value.rental_id), all the rental_id pop out in the console, meaning I suspect the problem is in the append code, but I have tried a lot of methods, till can't fix it.
The json data is coming out too, working fine
Appreciate your help
$(document).ready(function() {
var url = "rental_id_json.php";
$.getJSON(url, function(data) {
$.each(data, function(index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
console.log(value.rental_id);
$('#rental_id').append('<option value="' + value.rental_id + '">' + value.rental_id + '</option>');
});
});
});
<select type="text" name="rental_id" id="rental_id" class="input">
<option value="-" selected>Rental ID</option>
</select>
enter image description here
Related
I have a dropdown list which is initially empty:
<div>
<label>Boarding Point </label>
<select title="Select pickup city" id="boardingDropdown">
</select>
</div>
I want to update it from the json data obtained from an API.
I can print the data obtained from API in the console, but I cannot
add it to the dropdown using jquery.
here is my jquery code
$.getJSON(busApi, function(boardingPoints) {
$.each(boardingPoints, function(index, value){
let $boardingOption = $("<option>" + value + "</option>");
$("#boardingDropdown").append($boardingOption);
});
});
The dropdown just shows undefined without any other data.
I have tried other similar questions (like this and this) but they did not solve my problem.
Could somebody tell me what am I doing wrong?
Thanks.
Edit:
console.log(value) shows the output
Kathmadnu
Birgunj
Pokhariya
Langadi Chowk
Bhiswa
Birgunj
which is the expected output from the api.
I created a list with this data
let buses=["Kathmadnu",
"Birgunj",
"Pokhariya",
"Langadi Chowk",
"Bhiswa",
"Birgunj"
];
Now the list still show undefined initially, but if I click on it, it shows the dropdown list as expected.
Does it mean there is problem with the API? But I can see the data obtained from the API in the console?
Try this solution:
$.each(items, function (i, value) {
$('#boardingDropdown').append($('<option>', {
value: value_value,
text : text_value
}));
});
The output should be something like this:
<select title="Select pickup city" id="boardingDropdown">
<option value="value_value">text_value</option>
</select>
Instead of:
let $boardingOption = $("<option>" + value + "</option>");
you should use:
let boardingOption= "<option>" + value + "</option>";
And in your code:
$(#boardingDropdown").append($boardingOption);
you missed a quote mark, it should be: $("#boardingDropdown")
Finally, according to my corrections, it should become:
$("#boardingDropdown").append(boardingOption);
Found the problem:
I had given id to the <select> tag and was adding the options to this tag.
<select title="Select pickup city" id="boardingDropdown">
</select>
Instead, what I did was to create a <div> tag above the <select> tag, and append <select>, then <option> and then </select> from the jquery.
<div>
<label>Boarding Point </label>
<div id="boardingDropdown"></div>
</div>
Then in the jquery, I appended the <select> tag as well:
$.getJSON(busApi, function (boardingPoints) {
let opt = '<select>';
$.each(boardingPoints, function (index, value){
opt += '<option value="' + index + '">' + value + '</option>';
});
opt += '</select';
$("#boardingDropdown").append(opt);
});
Now it is working as expected. :)
I'm struggling with modifying some code I have that dynamically creates a select box based on column values from a sharepoint list.
at the moment the code:
function getAjaxFilter(name, internalName) {
$.ajax({
url: $().SPServices.SPGetCurrentSite() + '/_layouts/filter.aspx?ListId=' + listID + '&FieldInternalName=' + internalName + '&ViewId=' + viewID + '&FilterOnly=1&Filter=1' + filterFieldsParams,
success: function(data) {
$('#filterField' + internalName).html(name).append($("<div></div>").append(data).find("select"));
//clear current onChange event
$("#diidFilter" + internalName).attr("onchange", '');
// add change event
$("#diidFilter" + internalName).change(function() {
FilterField(viewID, internalName, encodeURIComponent(this.options[this.selectedIndex].value), this.selectedIndex);
});
}
Creates the following html:
<div id="filterFieldSub_Category">
Sub Category
<select title="Filter by Sub_Category" id="diidFilterSub_Category">
<option>(All)</option>
<option>(Empty)</option>
<option value="Test">Test</option>
</select>
What I'm trying to achieve is to get it to produce a select class so I can apply it to a 3rd party selectbox styler like bootstrap select. so It needs to look like:
<select class="selectpicker" id= "filterFieldSub_Category">
<option>(all)</option>
<option>(empty)</option>
<option>test</option>
</select>
I'm not sure where to start, so if anyone could point me in the right direction that would be a huge help :)
You could add the class using addClass() :
$("#diidFilter" + internalName).addClass('selectpicker');
Hope this helps.
I want to display data in select box option from ajax response.
here is my view file
<select class="form-control" name="vendor" id="vendor_list" required style="width: 159px;">
<option value="">Vendor 1</option>
</select>
Here is my ajax success function
success: function(data) {
$.each(data, function(i, value) {
console.log(value);
$('#vendor_list').append('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');
console.log(value);
});
}
here is my ajax response json data
[{"vendor_name":"scscss"},{"vendor_name":"xzcdsfdx"}]
How to display value in select box.
giv me suggestion.thanks
I think the problem is with
$('#vendor_list').append('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');
It will be much better if you create a option string & append it after entire data has been iterated
Since it is not possible to replicate the ajax , so I have directly use the ajax response
You can put the entire code inside success block , but you will not need var x because data will play role of var x=[...] in your case
var x = [{"vendor_name":"scscss"},{"vendor_name":"xzcdsfdx"}]
var _options =""
$.each(x, function(i, value) {
_options +=('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');
});
$('#vendor_list').append(_options);
Check this jsFiddle
What i want to achieve
I have got one static select html options, these options do not change but will determine what the other select boxes output.
<select id="firstselectbox">
<option value="first">This is the first</option>
<option value="second">This is the second</option>
<option value="third">This is the third</option>
<option value="fourth">This is the fourth</option>
<option value="fifth">This is the fifth</option>
</select>
Currently, the code i have written doesnt want to output the following:
Select 1: option selected first
Select 2: checks jSon file, finds first and all of the nodes (second layer) and list them. When a user selects that.
Select 3: displays the third layer
Please note the * is the option selected below - select 1 is static and select 2 and 3 are dynamic.
Select 1 Select 2 Select 3
first* London Famous Famous
second Jersey London Famous
third North*
fourth South East
fifth South West
sixth
What have i done so far
var datajson = {"first":[{"jesery":[{"id":"jesery","name":"Jesery","jesery":[{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"second":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"third":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"forth":[{"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"fifth":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"southeast":[{"id":"southeast","name":"South East","southeast":[{"id":"distance","name":"Distance"}]}]}]}
$("#firstselectbox").on('change', function() {
$("select#firstselectbox").html('');
var locations = datajson[$(this).val()];
var locationString = '';
$.each(locations, function(i, item) {
console.log(locations[i]);
locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>';
});
$('#secondselectbox').html(locationString);
});
Issue?
The following code is locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>'; is outputting unidentified.
However console.log(locations[i]); is outputting the array that that is selected from the static select box (first, second etc..). However, trying to separate that out seems to fail.
The current code is outputting unidentified.
Use unobtrusive JavaScript so you won't have to hunt bugs like this one:
$('#secondselectbox').empty()
$.each(locations, function(i, item) {
$("<option/>",{id:locations[i].id, value:locations[i].id, text:locations[i].name})
.appendTo('#secondselectbox')
})
Edit: Also there is a problem with your JSON structure. You basically have an array which contains a single object, so when you foreach the array you are at one level lower than where you need to be.
I'm fairly new to both jQuery and JavaScript so can anyone please point out what I'm missing here?
I have a form with multiple pairs of select fields, where the content of the second field relies on the selection of the first one.
Once a value is chosen from the first one then a piece of jQuery code empties the corresponding second select options, gets new values as JSON and inserts them as new select values. All of this works with the code I've written.
However if a user has chosen a second value, I'd like to restore it if possible (meaning if the new values also include the one previously selected).
I tried to do this by first saving the second value and then trying to set it once the new options have been inserted. This did not work. However when trying to debug I inserted an alert() just before restoring the second value and with that in there it does work...
Am I missing something very basic here? Any help would be appreciated.
HTML:
<select name="party-0-first" id="id_party-0-first">
<option value="" selected="selected">---------</option>
<option value="1">first_value1</option>
<option value="2">first_value2</option>
<option value="3">first_value3</option>
<option value="4">first_value4</option>
</select>
<select name="party-0-second" id="id_party-0-second">
<option value="" selected="selected">---------</option>
<option value="1">second_value1</option>
<option value="2">second_value2</option>
<option value="3">second_value3</option>
<option value="4">second_value4</option>
</select>
<select name="party-1-first" id="id_party-1-first">
...
JavaScript:
$.fn.setSecond = function() {
var divName = $(this).attr("name");
divName = divName.replace('-first', '');
divName = divName.replace('party-', '');
// Save the currently selected value of the "second" select box
// This seems to work properly
setValue = $('#id_party-' + divName + '-second').val();
// Get the new values
$.getJSON("/json_opsys/", { client: $(this).val() },
function(data){
$('#id_party-' + divName + '-second').empty();
$('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>');
$.each(data, function(i, item){
$('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>');
});
});
// Here I try to restore the selected value
// This does not work normally, however if I place a javascript alert() before
// this for some reason it does work
$('#id_party-' + divName + '-second').val(setValue);
$(document).ready(function(){
$('[id*=first]').change(function() {
$(this).setSecond();
});
});
Well, it looks like your getJSON() call is involved in that issue.
Remember, from the start, all ajax request are ASYNC, means your last line of code
there is most likely executed before the getJSON() success eventhandler is called.
When you set the variable "setValue", try declaring it with var:
var setValue = $('#id_party-' + divName + '-second').val();
But I don't think that's the problem. The problem is that you're trying to reset the value in some code that's going to run before the getJSON is actually done. Try moving the thing that sets the value inside the function that's passed to getJSON.
$.getJSON("/json_opsys/", { client: $(this).val() },
function(data){
$('#id_party-' + divName + '-second').empty();
$('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>');
$.each(data, function(i, item){
$('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>');
});
$('#id_party-' + divName + '-second').val(setValue);
});