I have 3 selects:
country, region, city
When choosing a country to be updated select the region on the country.
here's the code. like written logically. but the region is not updated
$(document).ready(function() {
$('select[name=ad_country]').change(function() {
current_country = $(this).val();
$.getJSON('./core/AJAX/advertisement_changecountry.php', {country: current_country},
function(data) {
$('select[name=ad_region]').empty();
$.each(data.region, function(key, val) {
$('select[name=ad_region]').append('<option value="'+val.id_parent+'">'+val.name+'</option>');
});
$('select[name=ad_city]').empty();
$.each(data.city, function(key, val) {
$('select[name=ad_city]').append('<option value="'+val.id_parent+'">'+val.name+'</option>');
});
});
}
);
}
you have an error on your clossing tags
You have missed the '}' at the end.Now try this Code :
$(document).ready(function () {
$('select[name=ad_country]').change(function () {
current_country = $(this).val();
$.getJSON('./core/AJAX/advertisement_changecountry.php', { country: current_country },
function (data) {
$('select[name=ad_region]').empty();
$.each(data.region, function (key, val) {
$('select[name=ad_region]').append('<option value="' + val.id_parent + '">' + val.name + '</option>');
});
$('select[name=ad_city]').empty();
$.each(data.city, function (key, val) {
$('select[name=ad_city]').append('<option value="' + val.id_parent + '">' + val.name + '</option>');
});
});
});
});
Related
I would like once the user selects a different item in the drop box list which was taken from a mysql database, that specific data to that field be displayed.
Currently, I am able to get the value of the item in the drop down box but I am unable to use it.
<h3>Drop down Menu</h3>
<select id="dmenu">
<option selected="selected" id="opt">Choose your station</option>
</select>
<div id="optionT"></div>
$(document).ready(() => {
window.onload = ajaxCallback;
function ajaxCallback(data) {
var data;
var myOptions;
var output;
$.ajax({
url: 'http://localhost:5000/alldata',
type: 'GET',
datatype: 'json',
success: (data) => {
//$.each(data, function (index, value) {
var output = [];
$.each(data, function(key, value) {
output.push('<option value="' + key + '">' + value.Station +
'</option>');
});
$('#dmenu').html(output.join(''));
}
})
}
});
$('#dmenu').on('change', function() {
//alert( this.value );
//alert($(this).find(":selected").value());
function stationData(data) {
var stationName = $(this);
alert(stationName.val());
//var stationName = $(this).value();
//var stationName = $(this).find(":selected").value()
$.ajax({
url: 'http://localhost:5000/alldata',
method: 'POST',
data: {
station: stationName
},
success: (data) => {
$.each(data, function(i) {
data[i]
//console.log(i);
var station_loopOp = '';
//console.log(JSON.stringify(data[i].Station));
station_loopOp += '<li>ID: ' + JSON.stringify(data[i].ID) +
'</li>' +
'<li>Station: ' + JSON.stringify(data[i].Station) +
'</li>' + '<li>Address:
'+JSON.stringify(data[i].Address) +
'</li>' + '<li>' +
Sales: JSON.stringify(data[i].Monthly_CStore_Sales) +
'</li>' + '<li>Operator: ' +
JSON.stringify(data[i].Operator) + '</li>' +
'<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) +
'</li>' +
'</<li>' + '<br/>');
$('#optionT').html(station_loopOp);
}
});
}
});
You are just defining the function stationData(data){....} inside the callback function but not calling it anywhere inside of it .
Add this line into your function : stationData(<your-data>);
I have a library which looks like the following
(function (bindDropdownAndSetValue) {
function allFunction() {
function bindDropDownValue(response, dropdownObject) {
$.each(response, function (i, e) {
$('#' + dropdownObject.id).append('<option value=' + e[dropdownObject.value] + '>' + e[dropdownObject.text] + '</option>');
});
}
function dropdownValues(id, value, text) {
this.id = id;
this.value = value;
this.text = text;
}
}
bindDropdownAndSetValue.allFunction = allFunction;
} (bindDropdownAndSetValue));
in the above example when I call bindDropdownAndSetValue.allFunction I want to excess the functions inside allFunction but it didn't appear to work
and when I changed the library to like the following
(function (bindDropdownAndSetValue) {
function bindDropDownValue(response, dropdownObject) {
$.each(response, function (i, e) {
$('#' + dropdownObject.id).append('<option value=' + e[dropdownObject.value] + '>' + e[dropdownObject.text] + '</option>');
});
}
function dropdownValues(id, value, text) {
this.id = id;
this.value = value;
this.text = text;
}
bindDropdownAndSetValue.bindDropDownValue = bindDropDownValue;
bindDropdownAndSetValue.dropdownValues = dropdownValues;
} (bindDropdownAndSetValue));
this works fine, but the problem here is that I need to right extra line of code, to assign function one by one to bindDropdownAndSetValue.
Is there any other better way to right this code?
Keep it short and simple:
bindDropdownAndSetValue.bindDropDownValue = function(response, dropdownObject) {
$.each(response, function (i, e) {
$('#' + dropdownObject.id).append('<option value=' + e[dropdownObject.value] + '>' + e[dropdownObject.text] + '</option>');
});
};
bindDropdownAndSetValue.dropdownValues = function(id, value, text) {
this.id = id;
this.value = value;
this.text = text;
};
(function (bindDropdownAndSetValue) {
function bindDropDownValue(response, dropdownObject) {
$.each(response, function (i, e) {
$('#' + dropdownObject.id).append('<option value=' + e[dropdownObject.value] + '>' + e[dropdownObject.text] + '</option>');
});
}
function dropdownValues(id, value, text) {
this.id = id;
this.value = value;
this.text = text;
}
Object.assign(bindDropdownAndSetValue, {bindDropDownValue, dropdownValues });
} (bindDropdownAndSetValue));
I've a form when I click one radio button to load a subform.
Ok this work perfectly, but has 3 selectors that I need external data when only this subform loaded.
So, I did in this way:
$(document).on('focus', '#reemb', function () {
$.getJSON("/banks.php", function (json) {
$('#bank').empty();
$.each(json, function (i, obj) {
$('#bank').append($('<option>').text(obj.name).attr('value', obj.code));
});
});
$.getJSON('/statecity.json', function (data) {
var items = [];
var options = '<option value="">State</option>';
$.each(data, function (key, val) {
options += '<option value="' + val.name + '">' + val.name + '</option>';
});
$("#state").html(options);
$("#state").change(function () {
var options_city = '';
var str = "";
$("#state option:selected").each(function () {
str += $(this).text();
});
$.each(data, function (key, val) {
if (val.name == str) {
$.each(val.city, function (key_city, val_city) {
options_city += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#city ").html(options_city);
}).change();
});
});
This work fine, but everytime that I need to change one date the selectors clear and load again.
I tried to add tag onload to start the function to load selectors in this subform, but don't works. Also tried change events to .on, but also don't work.
How I need to do this?
Thx!!
Not knowing what #reemb is, I would empty the relevant sub selects:
If the container holding the selects is ALSO emptied, you need to delegate all even handlers of objects inside too - like $(document).on("change","#bank", function() {
$(document).on('click', '#reemb', function() {
$.getJSON("/banks.php", function(json) {
$('#bank').empty();
$.each(json, function(i, obj) {
$('#bank').append($('<option>').text(obj.name).attr('value', obj.code)).change();
});
});
$('#bank').on("change", function() {
$('#city').empty();
$.getJSON('/statecity.json', function(data) {
var items = [];
var options = '<option value="">State</option>';
$.each(data, function(key, val) {
options += '<option value="' + val.name + '">' + val.name + '</option>';
});
$("#state").html(options).change(); // if needed
});
$("#state").on("change", function() {
var options_city = '';
var str = "";
$("#state option:selected").each(function() {
str += $(this).text();
});
$.each(data, function(key, val) {
if (val.name == str) {
$.each(val.city, function(key_city, val_city) {
options_city += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#city ").html(options_city).change(); // if needed
});
});
});
i need help parsing the following:
{
"data": [
{
"Function": "Administration",
"SubFunction": "Facilities,Maintnce,Bldg Svcs,Other,Secretary"
},
{
"Function": "Communications",
"SubFunction": "Internal Communications,Marketing Comm,Other"
},
{
"Function": "Customer_Services",
"SubFunction": "Customer Engineer,Dispatcher,NonQuota Acct Supp Mgr,Other,PreSales-Network,Process and Systems,Quota Acct Supp Mgr,Remote Support Services,Rework,Service Offer Development,Services Logistics,Services Planning,Technology Consultant"
}
]
}
My jQuery code is:
$select3.html('');
$select4.html('');
$.each(data.data, function(key, val){
$select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');
$.each(this.SubFunction, function(){
$select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');
})
})
What should happen: The first option box should be filled with the "Function" and the second with the "SubFunction" upon the "Function" selection.
What is happening: The first option box does load up the "Function" values correctly, but the second drop down has all of the "Subfunction" from all "Function" with multiple instances of them.
Please help.
Thank You.
You need a change handler for this. This should do the job:
$select3 = $('#select3');
$select4 = $('#select4');
$.each(data.data, function() {
addOption($select3, this.Function);
});
$.each(data.data[0].SubFunction.split(','), function() {
addOption($select4, this);
});
$select3.on('change', function() {
$select4.html('');
$.each(data.data, function() {
if ($select3.val() === this.Function) {
$.each(this.SubFunction.split(','), function() {
addOption($select4, this);
});
}
});
});
function addOption($target, value) {
$target.append('<option id="' + value + '">' + value + '</option>');
}
http://jsfiddle.net/m88u76eL/
DEMO
Here is how to do it. You could use a data attribute to store the options for each function in the the option elements of select3, then when each of these options is selected, the value in the data attribute is read and parsed and used to populate select4 on-the-fly.
$select3.empty();
$.each(data.data, function(key, val){
$select3.append(
$('<option/>',{id:val.Function,text:val.Function,'data-sub-function':val.SubFunction})
);
});
$(function() {
$select3.on('change',function() {
$select4.empty();
$.each($('option:selected', this).data('sub-function').split(','), function(i,val){
$select4.append(
$('<option/>', {id:val,text:val})
);
});
})
.change();
});
You are already looping in data Object why are you doing a extra $.each ?
$select3.html('');
$select4.html('');
$.each(data.data, function(key, val){
$select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');
$select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');
});
This just work just find? Not tested tho just a quick post to help out
I am new to jQuery and Java script. I need to parse a JSON file that has arrays, I use this code:
$.getJSON('mat.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {'class': 'my-new-list', html: items.join('')}).appendTo('body');
});
For this JSON file:
{
"#file_name": "materials",
"materials": [{
"#site_name_English": "N/A",
"#site_name_Spanish": "N/A",
"#site_number": "1",
"zoom": [{
"#zoom_name_English": "Main Reservoir",
"#zoom_name_Spanish": "Depósito principal",
"#zoom_number": "1",
"icon": [
{
"#icon_name": "Info Icon 1",
"#icon_pin": "1"
},
{
"#icon_name": "Info Icon 2",
"#icon_pin": "2"
}
]
}]
}]
}
But my result is:
materials
[object Object]
How can I change my code so I will get the objects also when the loop meets them?
Use this:
$.each(data, function(key, val)
{
if(typeof val === 'object') {
$.each(val, function(keys, value)
{
items.push('<li id="' + keys + '">' + value + '</li>');
}
} else {
items.push('<li id="' + key + '">' + val + '</li>');
}
});
You need to check that value is object or not.
EDITED:
function checkObj(key, val, items){
if(typeof val === 'object') {
$.each(val, function(keys, value)
{
if(typeof value === 'object') {
checkObj(keys, value, items);
} else {
items.push('<li id="' + keys + '">' + value + '</li>');
}
});
}
}
And in the $.each function use this:
$.each(data, function(key, val)
{
if(typeof val === 'object') {
checkObj(key, val, items);
} else {
items.push('<li id="' + key + '">' + val + '</li>');
}
});
The program shows how to read json and store data into textbox
$(document).ready(function(){
$.getJSON("Test.json",function(data){
$.each(data,function(key,value){
alert(data[key].attrib1name);
alert(data[key].attrib2name);
$('input').val(data[key].enterpriseName);
activities=data[key].activities;
console.log(value);
});
});
});