jQuery Ajax jSon set value from database based on condition on loop - php

I have jQuery json to get data from database.
var list = ["Imsak", "Subuh", "Terbit", "Dhuhur", "Ashar", "Maghrib", "Isya"];
geo = [jsonStr.longitude, jsonStr.latitude, jsonStr.altitude];
timezone = jsonStr.timezone;
prayTimes.tune({ imsak: 2, subuh: 2, terbit: -2, dhuhur: 121, ashar: 2, maghrib: 2, isya: 2 });
var date = new Date(); // today
prayTimes.setMethod(jsonStr.calculationMethod);
var times = prayTimes.getTimes(date, geo, timezone);
$.ajax(
{
url: "chk",
type: "POST",
data:
{
},
dataType: "JSON",
success: function (jsonStr)
{
var sholatNameLen = jsonStr.sholatName.length;
for(var i=0; i<sholatNameLen; i++)
{
var sholatName = jsonStr.sholatName[i];
if(jsonStr.time10 == times[list[i].toLowerCase()] + ":00")
{
if(list[i] == sholatName)
{
alert(jsonStr.audio_before_adzan);
}
}
}
}
});
On my table, I have data
sholat_name | audio_before_adzan | iqamah
Subuh | Alfatihah.mp3 | 10
Dhuhur | Al-Baqarah.mp3 | 10
On my PHP jSon
$time10 = date("H:i:s", strtotime('+ 10 minutes'));
$qAdzanIqomah = mysqli_query($con, "SELECT * FROM tb_sholat WHERE active = 'Y'");
while($dAdzanIqomah = mysqli_fetch_array($qAdzanIqomah))
{
$sholatName[] = $dAdzanIqomah['sholat_name'];
$iqamah[] = $dAdzanIqomah['iqamah'];
$audio_before_adzan[] = $dAdzanIqomah['audio_before_adzan'];
}
$data = array(
"audio_before_adzan" => $audio_before_adzan,
'time10' => $time10
);
echo json_encode($data);
What I want is, when if(jsonStr.time10 == times[list[i].toLowerCase()] + ":00") is true then get audio_before_adzan based on sholatName.
I tried the above code, but this function if(list[i] == sholatName) is not correct maybe.

I think you're just messing up your for-loops. You seem to use the same variable i for 2 different loops. You should split the loops for it to be useful:
The code below is only the part in the success-function:
var sholatNameLen = jsonStr.sholatName.length;
for(var i=0; i<sholatNameLen; i++)
{
var sholatName = jsonStr.sholatName[i];
for (var j = 0; j < list.lenght; j++) {
if(jsonStr.time10 == times[list[j].toLowerCase()] + ":00")
{
if(list[j] == sholatName)
{
alert(jsonStr.audio_before_adzan[i]);
}
}
}
}

Related

delete records from store with checkbox selection

I have this ajax request that iterates through a store and deletes all selected records.
code
Ext.Ajax.request({
url: 'system/index.php',
method: 'POST',
params: {
class: 'LicenseFeatures',
method: 'delete',
data: Ext.encode({
feature_id: ( function(){
var e = "";
var sel = Ext.getCmp('featureGrid').getSelection();
var c = 0;
for( var i in sel ) {
var x = ( c == 0 ) ? e = sel[i].data.feature_id : e += "," + sel[i].data.feature_id;
c++;
}
return e;
})()
})
},
success: function( response ){
Ext.MessageBox.alert( 'Status', 'Record(s) has been deleted.' );
Ext.getStore('LicenseFeaturesStore').reload();
},
failure: function(){
Ext.MessageBox.alert( 'Status', 'Failed to delete records.' );
}
});
Currently the code retrieves 1 id from the grid and deletes it. What I need to do is get two Id's from the grid as I need to run a specific sql to the database. The sql needs two inputs, here is the sql
public function delete( $vars ){
$sql = "DELETE FROM `LicenseFeatures` WHERE feature_id in({$vars->data->feature_id}) AND license_id in({$vars->data->license_id})";
if( $result = $vars->db->query( $sql ) ) {
echo json_encode( array( "success" => true,"sql"=>$sql ) );
} else {
echo json_encode( array( "success" => false ) );
}
}
Try and change the data property to this.
data: Ext.encode(( function(){
var feature_id,
licence_id;
var sel = Ext.getCmp('featureGrid').getSelection();
var c = 0;
for( var i in sel ) {
if (c == 0) {
feature_id = sel[i].data.feature_id;
licence_id = sel[i].data.licence_id;
} else {
feature_id += "," + sel[i].data.feature_id;
licence_id += "," + sel[i].data.licence_id;
}
c++;
}
return {
feature_id: feature_id,
licence_id: licence_id
};
})())

AJAX request from Codeigniter view gives an error

CSRF protection is enabled.
I have a view
I am trying to insert the shifts to the database table via AJAX.
$('#insert_shift').click(function(e) {
e.preventDefault();
var empty_td = $('.td_shift[data-type=""]').size();
if (empty_td == 0) {
var date = $('#atdnc_date').val() + '-';
var arr = [];
var new_arr = [];
$('.td_shift').each(function() {
//if($(this).attr('data-day') != 0){
var data_type = $(this).attr('data-type');
var shift_atdnc_id = $(this).attr('data-typeid');
var user_id = $(this).attr('data-user');
var new_date = date + $(this).attr('data-day');
if (data_type == 'shift') {
var shift_strt_time = $(this).attr('data-start');
var shift_end_time = $(this).attr('data-end'); // Change new_arr to old
var new_arr = {
'shift': shift_atdnc_id,
'user_id': user_id,
'date': new_date,
'shift_strt_time': shift_strt_time,
'shift_end_time': shift_end_time,
'checkin_time': '00:00:00',
'checkout_time': '00:00:00',
'time_spent': '00:00:00',
'checkin_reason': 'NA',
'checkout_reason': 'NA',
'work_report': 'NA',
'attn_status': 0
};
} else if (data_type == 'attendance') {
var new_arr = {
'shift': shift_atdnc_id,
'user_id': user_id,
'date': new_date,
'shift_strt_time': '00:00:00',
'shift_end_time': '00:00:00',
'checkin_time': '00:00:00',
'checkout_time': '00:00:00',
'time_spent': '00:00:00',
'checkin_reason': 'NA',
'checkout_reason': 'NA',
'work_report': 'NA',
'attn_status': shift_atdnc_id
};
}
arr.push(new_arr);
//}
});
$.post(base_url + 'test_shift/insert_shift', {
a: arr,
csrf_test_name: csrf_token
},
function(data) {
alert(data);
if (data == 1) {
document.location.href = base_url + 'test_shift';
} else {
alert("error");
}
}
);
} else {
alert("Please fill all the shifts");
}
});
If there are only 2 rows of shift, the values are getting inserted. But if there are more, 3 in this case, nothing is getting inserted to db but getting an error in the console.
An Error Was Encountered The action you have requested is not
allowed.
When I did a search on this error I came to know that this is thrown in the case of CSRF issues. But I couldn't find a way to fix the issue. Could someone please help?
UPDATE
When I changed the order of data in the POST the above error has disappeared. But now another one came up.
A PHP Error was encountered
Severity: Notice Message: Array to string conversion
Filename: mysql/mysql_driver.php Line Number: 589
And a database error. The INSERT query goes like this
INSERT into table_name () values ('1','some_value'),('2','some_value2'),Array
The code used to generate the array of items is same but from arr[83] the problem starts. I have tried deleting the tds after 83rd day(which is day 23 in 3rd row) from browser and the code worked. I don't understand what is happening here. The 83rd array got chopped for some reason by PHP(or CI).
The issue is fixed. Some elements(starting from array(83)) of the array that is being passed to the controller by the AJAX POST was getting popped, which lead to a database error. I don't know the exact reason yet but after some research I found this thread. So instead of inserting all values in a single INSERT query I have inserted one employee's one month's shift in one insert query, to be safe.
Modified the javascript to this
$('#insert_shift').click(function(e) {
e.preventDefault();
var empty_td = $('.td_shift[data-type=""]').size();
if (empty_td == 0) {
var num_of_days = parseInt($('.th_day').last().text());
var num_of_users = parseInt($('.user_shift_row').size());
var insert_helper = 0;
var post_finish_helper = 0;
var date = $('#atdnc_date').val() + '-';
var arr = [];
var new_arr = [];
function insert_shift_per_user() {
$('.td_shift[data-inserted="0"]').each(function() {
insert_helper++;
var data_type = $(this).attr('data-type');
var shift_atdnc_id = $(this).attr('data-typeid');
var user_id = $(this).attr('data-user');
var new_date = date + $(this).attr('data-day');
if (data_type == 'shift') {
var shift_strt_time = $(this).attr('data-start');
var shift_end_time = $(this).attr('data-end'); // Change new_arr to old
var attn_status = 0;
var shift = shift_atdnc_id;
} else if (data_type == 'attendance') {
var shift_strt_time = "00:00:00";
var shift_end_time = "00:00:00";
var attn_status = shift_atdnc_id;
var shift = 0;
}
new_arr = {
'user_id': user_id,
'date': new_date,
'shift': shift,
'attn_status': attn_status,
'shift_strt_time': shift_strt_time,
'shift_end_time': shift_end_time
};
arr.push(new_arr);
if (insert_helper == num_of_days) {
$.post(base_url + 'test_shift/insert_shift', {
csrf_test_name: csrf_token,
a: arr
},
function(data) {
if (data == 1) {
arr = []; // clearing the array
new_arr = []; // clearing the new_array
insert_helper = 0;
$('.td_shift[data-user="' + user_id + '"]').attr('data-inserted', 1);
post_finish_helper++;
if (post_finish_helper == num_of_users) {
document.location.href = base_url + 'test_shift';
} else {
insert_shift_per_user();
}
} else {
alert("Error");
}
}
);
} //if insert_helper == num_of_days ends
});
} // FUNCTION insert_shift_per_user
insert_shift_per_user();
//var aa = jQuery.parseJSON(arr);
//console.log(arr);
} else {
alert("Please fill all the shifts");
}
}); //insert_shift ends here

Cannot populate JSON request with correctly formatted data

I am trying to populate JSON request with the data coming back from my phpsearch.php file (shown here)
<?php
include "base.php";
$name = $_GET["name"];
$query = "SELECT lat, lng FROM markers WHERE name = '".$name."'";
$result = mysql_query($query);
$json = array();
while($row = mysql_fetch_array ($result))
{
$bus = array(
'lat' => $row['lat'],
'lng' => $row['lng']
);
array_push($json, $bus);
}
$jsonstring = json_encode($json);
echo $jsonstring;
?>
The data shows in the console in this format:
[{"lat":"37.730267","lng":"-122.498589"}]
The route calculation function is at the bottom of the question, I previously had used an asynchronous JSON rewquest but this was causing the code to execjte before the origin value was set, now it is being set but it looks incorrect
How can I make sure my latitude and longitude results are in the correct JSON format? currently the JSON request looks like this:
Request URL:https://maps.googleapis.com/maps/api/js/DirectionsService.Route?4b0&5m4&1m3&1m2&1dNaN&2dNaN&5m4&1m3&1m2&1d37.738029&2d-122.499481&6e1&8b1&12sen-GB&100b0&102b0&callback=_xdc_._1rqnjk&token=80599
Route calculation code:
function calcRoute() {
var startname = document.getElementById('start').value;
var endname = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
$.ajax({
url:'phpsearch2.php',
dataType:'html',
data:{name:startname},
async:false,
success:function (result)
{
console.log(result)
origin = new google.maps.LatLng(result[0].lat, result[0].lng);
}});
var end = new google.maps.LatLng('37.738029', '-122.499481');
var request = {
origin: origin,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
document.write('<b>'+ origin +'</b>');
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Time for a Walkabout </b><br>';
summaryPanel.innerHTML += '<b>From ' + startname + ' </b>';
summaryPanel.innerHTML += '<b>to ' + endname + '('+ route.legs[i].distance.text +')</b><br>';
}
}
});
}
The LatLng constructor takes two numbers as arguments, you're passing it a JSON object. Get the latitude and longitude properties out and pass the numbers directly, like this:
function (result){
origin = new google.maps.LatLng(result[0].latitude, result[0].longitude);
}
I'm guessing on the specific properties, you may want to console.log(result) to see the exact object structure.

PHP jQuery JSON format

I have the following code in PHP which returns this JSON code. I can't return the values for "OK" because of the format, I must do some jQuery trick to get it, but I don't want it... Some advice will be appreciated.
PHP
while($row = sqlsrv_fetch_array($datBS)) {
$ahora = $row['servicio'];
if($ahora != $antes && $n == 1) {
$ok = array();$ko = array(); $rt = array(); $horas = array();
}
if($row['peticion_id'] == 0) {$ok[] = round($row['valor'], 3); $horas[] = $row['hora'];}
if($row['peticion_id'] == 1) $ko[] = round($row['valor'], 3);
if($row['peticion_id'] == 2) $rt[] = round($row['valor'], 3);
$datosBS[$ahora] = array(
"OK" => $ok,
"KO" => $ko,
"RT" => $rt,
"HORAS" => $horas
);
$antes = $ahora;
$n = 1;
}
while($row = sqlsrv_fetch_array($sqlTotalsBS)) {
$bs[$row['servicio']] = array(
"SUMOK" => intval($row["OK"]),
"SUMKO" => intval($row["KO"])
);
}
$banksphere = array_merge_recursive((array)$bs, (array)$datosBS);
$json = array_merge((array)$banksphere);
echo json_encode($json);
JSON
{"Servicing":{"SUMOK":923391,"SUMKO":1048,"OK":[184,69,28,14,15,15,0,11,13,0,14,21,19,3,8,0,5,17,13,0,8,30,5,3,13,18,26,24,46,116,342,790,2828,9795,15647,21394,23710,26214,27522,27038,26603,28939,29149,29222,28020,30061,29967,20139,21436,31416,31354,32472,32659,32435,33767,33623,33394,27204,28830,32562,34844,20197,11903,6923,6855,6133,6051,7456,7842,8366,9271,10127,10301,9845,9616,8391],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,4,9,17,20,11,29,30,35,65,89,56,52,59,26,35,70,39,39,60,28,15,12,27,20,37,20,20,12,8,5,3,8,10,5,12,4,11,9,9,10,11,4],"RT":[0.139,0.171,0.73,0.187,3.667,3.126,0,3.629,7.227,0,4.279,5.967,3.195,2.862,0.883,0,5.441,6.495,0.883,0,1.835,1.656,2.09,0.111,0.35,1.015,1.457,0.829,0.635,0.767,0.534,0.325,0.202,0.172,0.142,0.129,0.125,0.127,0.123,0.125,0.124,0.12,0.122,0.116,0.121,0.114,0.116,0.115,0.116,0.127,0.118,0.128,0.123,0.119,0.12,0.115,0.113,0.114,0.119,0.11,0.104,0.142,0.112,0.139,0.107,0.131,0.149,0.139,0.139,0.133,0.131,0.116,0.109,0.122,0.116,0.113],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Estructurales":{"SUMOK":58088,"SUMKO":453,"OK":[25,12,10,2,16,12,5,11,4,6,10,14,11,7,10,4,7,16,9,6,10,13,9,4,14,10,14,20,33,81,144,366,1562,5956,3671,2251,1976,1960,1600,1656,1475,1396,1473,1567,1412,1486,1553,1198,1046,1655,1636,1743,1711,1550,1417,1340,1562,1312,993,1285,925,790,377,311,286,324,378,486,602,461,542,491,474,450,401,433],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,2,5,11,11,14,10,9,17,10,9,21,10,10,5,8,14,18,16,33,22,18,19,27,21,29,16,13,11,3,2,1,5,5,1,2,3,3,3,2,4,7],"RT":[0.072,0.888,0.085,0.055,0.063,0.065,0.044,0.113,0.046,0.139,0.08,0.215,0.089,0.134,0.083,0.51,0.242,0.224,0.255,0.126,0.125,0.206,0.343,0.062,0.06,0.229,0.074,0.334,0.08,0.186,0.098,0.113,0.141,0.056,0.091,0.165,0.189,0.187,0.211,0.288,0.248,0.267,0.263,0.279,0.296,0.263,0.257,0.266,0.269,0.303,0.294,0.274,0.275,0.284,0.289,0.287,0.297,0.256,0.591,0.25,0.31,0.382,0.25,0.265,0.1,0.115,0.125,0.123,0.132,0.561,0.172,0.254,0.14,0.106,0.193,0.187],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Movilidad":{"SUMOK":96919,"SUMKO":27,"OK":[1563,1396,1250,1082,825,652,427,416,305,266,205,233,149,203,141,118,148,132,101,86,111,141,205,136,285,405,445,584,736,1159,1047,1333,1406,1627,1828,1978,2393,2533,2351,2445,2182,2346,2068,2067,1900,2187,2161,1380,1093,1891,2060,1877,1825,1806,1896,1854,1748,1613,1789,1795,1939,1963,2123,1704,1864,1693,1862,1706,1461,1488,1608,1367,1419,1516,1347,1475],"KO":[1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,1,1,0,0,0,0,1,0,2,1,0,0,1,0,2,0,1,2,2,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,4],"RT":[0.361,0.462,0.42,0.417,0.379,0.583,0.43,0.377,0.449,0.505,0.428,0.591,0.466,0.459,0.595,0.441,0.481,0.462,0.65,0.674,0.668,0.519,0.562,0.547,0.52,0.546,0.474,0.481,0.484,0.457,0.449,0.503,0.432,0.425,0.438,0.422,0.441,0.426,0.395,0.397,0.4,0.385,0.408,0.469,0.416,0.45,0.386,0.414,0.413,0.413,0.395,0.373,0.418,0.386,0.387,0.376,0.386,0.398,0.405,0.406,0.399,0.407,0.395,0.385,0.421,0.397,0.372,0.351,0.39,0.384,0.359,0.401,0.403,0.435,0.395,0.355],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Riesgos":{"SUMOK":200875,"SUMKO":1409,"OK":[50,61,31,55,28,26,5,60,20,0,15,0,15,15,0,0,15,0,15,15,0,15,15,0,13,2,0,30,2,44,146,268,510,1265,2425,2955,3841,4581,5321,5587,5944,6327,5300,5337,5291,5679,5805,3869,3708,6929,7262,6740,6493,6381,6789,6080,5504,6053,5190,5224,4327,2092,1426,1499,2065,2972,3495,3766,4504,4265,4429,5289,4926,4524,3760,4185],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,5,5,7,5,17,18,24,24,53,36,47,40,41,43,24,26,53,54,62,58,41,46,51,33,29,26,18,10,13,14,16,21,23,48,53,45,49,34,34,43,38,36,43],"RT":[0.065,0.083,0.13,0.707,0.099,0.084,2.82,0.194,0.22,0,0.492,0,0.433,0.161,0,0,0.298,0,0.537,0.446,0,0.52,0.728,0,0.287,0.345,0,0.082,1.316,1.136,0.352,0.576,0.38,0.27,0.256,0.176,0.179,0.136,0.143,0.152,0.126,0.144,0.13,0.154,0.139,0.151,0.134,0.142,0.153,0.166,0.156,0.147,0.137,0.141,0.129,0.142,0.148,0.132,0.128,0.18,0.124,0.159,0.183,0.154,0.147,0.128,0.135,0.141,0.131,0.175,0.141,0.114,0.14,0.139,0.172,0.162],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Particulares":{"SUMOK":709540,"SUMKO":534,"OK":[5794,5284,4816,3580,3018,2283,2006,1486,1186,1311,918,794,607,677,671,600,412,584,454,506,457,672,665,649,932,894,1412,1727,2158,3063,4326,5923,7038,10129,13647,14923,15905,19339,21463,22762,21936,22069,21976,21072,19951,19413,19256,13127,12318,18637,17980,18297,17357,16708,16401,15354,14515,12789,11771,10628,11232,10458,11007,11007,11753,11383,11922,11604,11120,10776,11697,11471,11463,12479,11531,12011],"KO":[7,8,3,1,7,4,3,1,2,4,2,1,3,0,3,0,0,0,1,1,0,0,2,0,0,0,0,0,0,4,1,5,4,5,7,6,5,5,11,12,17,14,12,13,20,13,12,9,8,21,13,12,15,17,7,13,11,6,9,9,5,12,11,8,10,8,13,8,8,11,7,8,13,20,11,12],"RT":[0.197,0.241,0.204,0.205,0.247,0.241,0.315,0.302,0.178,0.433,0.505,0.181,0.191,0.183,0.228,0.226,0.219,0.326,0.337,0.535,0.273,0.229,0.267,0.218,0.223,0.202,0.219,0.212,0.241,0.191,0.187,0.169,0.2,0.152,0.158,0.171,0.14,0.159,0.149,0.143,0.156,0.146,0.145,0.137,0.141,0.159,0.142,0.158,0.149,0.136,0.133,0.124,0.16,0.145,0.141,0.139,0.143,0.149,0.126,0.132,0.163,0.192,0.181,0.172,0.186,0.147,0.132,0.167,0.138,0.18,0.153,0.146,0.143,0.166,0.142,0.144],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Particulares BKS3":{"SUMOK":799461,"SUMKO":731,"OK":[6917,6108,5726,4223,3433,2683,2391,1693,1304,1253,921,800,688,693,715,634,493,505,426,418,446,743,735,691,1073,984,1672,1881,2260,3230,4607,6421,7692,11239,14628,16550,18563,20975,23237,25076,24469,24579,24123,23419,22116,21400,21976,14099,13843,21162,20687,21039,19535,18668,18566,17750,16300,14561,13380,12424,12500,11909,12463,12460,13241,12829,13668,13038,12602,12539,13516,13739,13601,14415,13847,14271],"KO":[10,6,8,2,2,2,2,7,1,1,0,0,4,0,0,1,0,0,1,0,0,0,0,0,0,0,5,5,3,6,4,8,6,7,7,7,10,14,19,16,17,16,12,18,17,28,23,15,18,18,28,21,23,19,13,11,16,9,15,11,17,10,8,15,23,17,15,8,7,13,15,12,10,18,18,13],"RT":[0.152,0.197,0.156,0.153,0.151,0.199,0.201,0.144,0.149,0.198,0.176,0.34,0.445,0.346,0.406,0.522,0.505,0.405,0.458,0.363,0.297,0.349,0.345,0.216,0.218,0.193,0.2,0.202,0.261,0.525,0.225,0.266,0.17,0.153,0.146,0.148,0.148,0.15,0.154,0.151,0.152,0.155,0.151,0.152,0.142,0.147,0.143,0.142,0.143,0.152,0.148,0.148,0.147,0.151,0.149,0.147,0.141,0.141,0.14,0.144,0.138,0.152,0.141,0.145,0.142,0.144,0.136,0.135,0.136,0.138,0.14,0.144,0.138,0.143,0.143,0.143],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Empresas":{"SUMOK":183051,"SUMKO":658,"OK":[405,389,293,222,254,175,150,182,129,85,78,96,71,85,78,70,70,77,121,77,74,76,102,94,138,149,202,205,371,392,662,958,1269,2478,3425,4178,4458,5982,6565,6905,6723,6242,5983,5989,6005,5467,5452,3187,3855,6037,4980,5874,5682,5283,5166,4975,3949,3239,2753,2354,1884,1819,2065,2305,2645,2640,2954,2835,3068,3017,3068,2997,2682,2849,2599,2639],"KO":[5,0,1,0,6,1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,1,0,3,0,0,0,1,5,7,12,9,13,9,15,21,22,22,21,17,24,13,17,20,13,17,23,21,13,22,10,13,19,15,6,11,9,8,5,9,7,21,19,9,5,14,27,7,18,10,13,11,15],"RT":[0.145,0.43,0.128,0.141,0.13,0.138,0.087,0.105,0.093,0.219,0.073,0.203,0.158,0.117,0.178,0.109,0.247,0.259,0.472,0.261,0.375,0.159,0.163,0.21,0.252,0.201,0.222,0.707,0.72,0.303,0.341,0.46,0.195,0.132,0.11,0.102,0.104,0.116,0.121,0.102,0.122,0.128,0.131,0.129,0.105,0.102,0.111,0.111,0.11,0.12,0.101,0.112,0.108,0.106,0.112,0.098,0.105,0.141,0.113,0.096,0.089,0.099,0.114,0.12,0.105,0.112,0.1,0.093,0.099,0.138,0.103,0.095,0.108,0.106,0.112,0.098],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Juzgados":{"SUMOK":333138,"SUMKO":102,"OK":[87,59,33,49,59,73,45,63,67,39,46,31,41,58,21,53,32,31,45,30,41,37,21,68,44,138,211,174,47,62,110,393,710,1359,2868,3914,5416,7705,9541,10509,11443,11403,11296,11986,12718,13056,12457,7840,8102,12545,14057,14422,13735,14547,14024,14292,13172,14054,12174,9538,8052,5539,4256,3502,2772,2498,2164,1823,1420,1154,1533,1671,1602,1420,1399,1142],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,2,0,7,12,13,13,1,2,6,4,3,13,1,8,4,2,0,0,0,1,1,4,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],"RT":[0.304,0.211,0.108,0.096,0.119,0.101,0.071,0.088,0.085,0.146,0.098,0.093,0.141,0.087,0.082,0.134,0.488,0.141,0.294,0.413,0.116,0.109,0.091,0.191,0.082,0.142,0.104,0.086,0.088,0.149,0.142,0.15,0.146,0.143,0.113,0.114,0.113,0.11,0.11,0.113,0.15,0.176,0.17,0.178,0.118,0.123,0.12,0.129,0.135,0.162,0.111,0.12,0.13,0.111,0.104,0.107,0.105,0.105,0.104,0.102,0.102,0.107,0.097,0.1,0.093,0.112,0.083,0.111,0.086,0.104,0.105,0.114,0.118,0.095,0.115,0.126],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Broker":{"SUMOK":28224,"SUMKO":84,"OK":[71,74,68,78,32,52,39,17,16,11,16,19,1,9,21,17,6,8,1,6,2,69,41,36,59,34,49,37,16,28,42,18,57,75,70,250,413,1222,987,1045,1109,1110,919,926,873,689,876,426,399,529,576,494,531,462,716,681,527,498,475,386,541,619,451,656,608,831,734,791,715,794,1134,1060,334,242,175,225],"KO":[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,1,0,0,0,0,0,0,0,0,0,1,0,0,1,1,2,9,5,0,2,5,0,1,0,0,4,4,2,1,1,5,1,2,3,0,3,3,1,1,0,3,5,2,3,2,1,0,0,0,3,0],"RT":[0.293,0.716,9.363,0.348,0.363,0.272,0.262,0.213,0.397,1.622,1.954,0.391,4.974,0.728,0.362,1.751,0.501,1.809,0.606,1.114,4.113,0.554,0.418,0.332,0.487,0.244,0.544,0.214,0.23,0.295,0.336,0.242,0.457,0.321,0.457,0.452,0.383,0.439,0.431,0.44,0.469,0.448,0.508,0.463,0.398,0.555,0.46,0.362,0.408,0.426,0.368,0.313,0.316,0.263,0.334,0.318,0.298,0.324,0.493,0.301,0.383,0.345,0.34,0.445,0.313,0.38,0.348,0.324,0.402,0.401,0.476,0.41,0.224,0.22,0.184,0.32],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Sistemas Informacion":{"SUMOK":84657,"SUMKO":282,"OK":[19,19,11,0,6,3,0,6,0,0,6,0,3,3,3,0,3,3,3,3,0,6,3,0,3,6,0,10,70,263,420,872,2529,7961,7513,5454,4559,3310,2970,2652,2740,2444,1807,1600,1960,1825,1666,1188,1299,1429,1684,1668,1291,1213,1438,1347,1324,1385,1355,1377,1344,618,450,347,449,690,972,1157,1200,872,1099,972,1049,969,824,913],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,3,0,2,4,0,1,6,6,0,1,1,12,0,5,3,4,1,22,3,2,4,0,1,0,0,24,101,0,0,2,2,0,1,0,0,2,1,1,33,29,3,1],"RT":[0.437,0.251,0.219,0,2.79,0.3,0,1.323,0,0,1.056,0,1.174,0.659,4.83,0,4.483,4.197,1.64,3.05,0,2.981,0.496,0,0.408,1.601,0,0.662,1.121,1.179,0.325,0.382,0.186,0.222,0.153,0.132,0.133,0.168,0.151,0.15,0.169,0.231,0.16,0.154,0.167,0.182,0.167,0.157,0.152,0.16,0.151,0.192,0.175,0.153,0.199,0.156,0.165,0.158,0.149,0.15,0.136,0.159,0.181,0.205,0.226,0.22,0.253,0.248,0.171,0.212,0.141,0.135,0.153,0.153,0.139,0.152],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Contact Center":{"SUMOK":158998,"SUMKO":216,"OK":[173,44,9,38,63,0,47,6,0,89,19,46,60,11,5,51,2,53,41,13,45,46,11,0,254,65,51,44,9,14,67,52,159,1421,1744,2741,3682,3418,7080,4342,3749,5957,3858,5085,4840,5412,5017,3080,3838,5769,5799,5220,4719,4668,4535,3613,4538,4016,3403,3951,3735,3245,2529,2366,2708,2495,2322,2336,2405,2249,2311,4426,2360,1910,2406,2113],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,4,2,4,2,4,4,7,4,5,15,12,8,3,5,13,14,12,3,5,7,2,9,5,3,4,0,4,6,1,0,3,8,2,1,7,4,2,3,7,4,4],"RT":[0.083,0.128,0.035,0.131,0.085,0,0.174,0.04,0,0.135,0.035,0.134,0.104,0.061,0.642,0.478,0.046,0.135,0.519,0.524,0.129,0.524,0.256,0,0.255,0.08,0.211,0.145,0.066,0.25,0.092,0.146,0.197,0.181,0.176,0.128,0.15,0.134,0.109,0.128,0.113,0.116,0.12,0.114,0.109,0.112,0.101,0.114,0.102,0.181,0.124,0.119,0.101,0.102,0.108,0.106,0.132,0.105,0.111,0.107,0.104,0.1,0.113,0.09,0.091,0.098,0.094,0.098,0.098,0.103,0.085,0.091,0.102,0.084,0.102,0.087],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Cuentas Personales":{"SUMOK":110273,"SUMKO":73,"OK":[173,135,103,98,141,136,150,102,152,136,108,121,164,101,159,137,130,92,128,102,128,141,103,172,134,134,122,122,122,182,160,244,257,345,498,1170,1843,2355,2500,2503,2646,3045,3609,3141,3232,3720,3167,1809,2320,3944,3653,4718,3772,4470,5061,4953,5029,4992,5265,4342,4523,3027,1672,779,373,548,397,476,557,829,1028,519,420,1041,844,549],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,3,1,4,1,2,1,0,5,0,1,2,4,0,2,1,0,5,2,7,1,2,6,2,3,1,0,2,0,1,2,0,4,0,0,0,1,1,1],"RT":[0.419,0.439,0.481,2.572,0.854,0.831,0.547,0.426,0.424,1.022,1.369,0.541,0.523,0.528,0.596,0.5,0.563,1.319,2.444,0.764,2.516,0.506,0.478,0.431,0.452,0.437,0.407,0.482,0.415,0.453,0.95,0.845,0.51,1.378,0.528,0.436,0.486,0.357,0.454,0.45,0.373,0.363,0.421,0.401,0.36,0.388,0.414,0.399,0.375,0.388,0.387,0.393,0.383,0.372,0.395,0.394,0.426,0.421,0.517,0.398,0.478,0.581,0.372,0.463,0.346,0.423,0.436,0.429,0.306,0.41,0.336,0.483,0.379,0.365,0.408,0.412],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"Intervinientes":{"SUMOK":6490,"SUMKO":6,"OK":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,43,79,53,1,251,162,173,265,303,205,342,306,241,482,208,124,170,360,56,294,287,276,354,320,97,140,208,207,114,17,38,4,10,23,6,18,47,18,153,0,16,15,4],"KO":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0],"RT":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4.772,1.275,1.027,0.304,0.59,0.327,0.484,0.404,0.361,0.657,0.278,0.264,0.283,0.3,0.284,0.341,0.438,0.283,0.4,0.258,0.312,0.365,0.396,0.336,0.363,1.252,0.377,0.311,0.251,0.827,0.927,2.164,0.388,1.25,0.277,1.239,0.253,1.013,0.639,0,1.085,0.283,0.035],"HORAS":["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45"]},"T4B":{"OK":142975,"KO":2293},"PCAS":{"OK":176,"KO":20}}
jQuery Trick
var OK = [];
$.each(value.OK, function(tipo, valor) {
OK = valor;
});
// Now if i return OK, it returns me the values... Same for OK, RT ...
My question is, I'm missing something on PHP? Because Do the trick on every $datosBS key is a code mess...
I think the problem is that "OK" for example, has subarray with the numbers, and JSON doesn't recognize it like "SUMOK" for example, which is plain number instead an array...
FULL JQUERY CODE
$.getJSON('test.php?entidad_id=2', function(data) {
$.each(data, function(key, value) {
var pies = {
name: key,
type: 'pie',
data: [],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
};
var lineas = {
name: "Valores",
data: []
};
var renderId = "pie-" + key;
$('#charts').append('<div id="'+ renderId +'" class="pieChart"></div>');
lineas.data.push(value.OK); // <------ THIS ISN'T WORKING, EVEN IF I DO ([value.OK])
var OK = [];
$.each(value.OK, function(tipo, valor) {
OK = valor;
});
lineas.data.push(OK); // <----- THIS IS WORKING
pies.data.push(["OK", value.SUMOK], ["KO", value.SUMKO]);
if(key == "CAM") {
pies.data.push(["REJ_OTHERS", value.REJ_OTHERS]);
pies.data.push(["REJ_FORMAT", value.REJ_FORMAT]);
pies.data.push(["PENDING", value.PENDING]);
}
options.series.push(pies, lineas);
options.chart.renderTo = renderId;
options.title.text = key;
var chart = new Highcharts.Chart(options);
pies.data = null; lineas.data = null;
});
});
OK, data in line charts is 2 values [x, y] so the data array is like: [[x1, y1], [x2, y2]], [[1, 2, 3, 4, 5]] doesn't really make sense on a line chart.
If you just want to have the index across the x axis and the values along the y axis then you can build your array like:
$.each(value.OK, function(i, v) {
lineas.data.push([i, v]);
});
and just get rid of:
lineas.data.push(value.OK); // <------ THIS ISN'T WORKING, EVEN IF I DO ([value.OK])
var OK = [];
$.each(value.OK, function(tipo, valor) {
OK = valor;
});
lineas.data.push(OK); // <----- THIS IS WORKING
But without knowing what each data point in OK corresponds to, that is the best I got.
Here is a jsFiddle of some working code.
Hope this helps!
Edit
Looks like HORAS may be the time that corrosponds to the OK element, if that is the case you could do:
$.each(value.OK, function(i, v) {
lineas.data.push([value.HORAS[i], v]);
});

Implement a dynamic selectbox in html

I am trying to develop a select box so that I can change the selected option dynamically
e.g.
selectbox option display message
---------------------------------------------
field 1 text
field 2 integer
field 3 bool
There are three select boxes. The first select box provide three options.
when select box 1 is selected, the other select boxes will have only 2 options (excluding the selected one)
When select box 2 is selected, the other select boxes will have only 1 option (excluding the selected two)
When a select box's value changes, the appropriate message is displayed.
All of the text that will be displayed is read in from a database as an array in the following format:
name text
id integer
address text
Then I create a select box with the three option
When I set select box 1's value as name, the text message is displayed, and so on.
How should I implement this? (I hope you get my idea) Thank you again for your help.
Thank you
I'd suggest something akin to the following:
var sel1 = document.getElementById('one'),
sel2 = document.getElementById('two'),
sel3 = document.getElementById('three'),
sels = document.getElementsByTagName('select'),
reset = document.getElementById('reset');
function disableOpts(elem) {
for (var i = 0, len = sels.length; i < len; i++) {
if (sels[i] != elem) {
var opts = sels[i].getElementsByTagName('option');
for (var c = 0, leng = opts.length; c < leng; c++) {
if (c == elem.selectedIndex) {
opts[c].disabled = true;
}
}
}
}
};
sel1.onchange = function() {
disableOpts(this);
};
sel2.onchange = function() {
disableOpts(this);
};
sel3.onchange = function() {
disableOpts(this);
};​
JS Fiddle demo.
Edited to add the messages, as requested in comments (which I overlooked in the actual question...):
var sel1 = document.getElementById('one'),
sel2 = document.getElementById('two'),
sel3 = document.getElementById('three'),
sels = document.getElementsByTagName('select'),
reset = document.getElementById('reset'),
msgs = ['text','integer','boolean'];
function disableOpts(elem) {
for (var i = 0, len = sels.length; i < len; i++) {
if (sels[i] != elem) {
var opts = sels[i].getElementsByTagName('option');
for (var c = 0, leng = opts.length; c < leng; c++) {
if (c == elem.selectedIndex) {
opts[c].disabled = true;
}
}
}
}
hideMessage(elem);
};
function displayMessage(elem){
for (var i=0,len=sels.length;i<len;i++){
if (sels[i] == elem){
var span = elem.parentNode.getElementsByTagName('span')[0];
span.innerHTML = msgs[i];
span.style.display = 'block';
}
}
};
function hideMessage(elem){
for (var i=0,len=sels.length;i<len;i++){
if (sels[i] == elem){
var span = elem.parentNode.getElementsByTagName('span')[0];
span.innerHTML = '';
span.style.display = 'none';
}
}
};
sel1.onchange = function() {
disableOpts(this);
};
sel2.onchange = function() {
disableOpts(this);
};
sel3.onchange = function() {
disableOpts(this);
};
sel1.onfocus = function() {
displayMessage(this);
};
sel2.onfocus = function() {
displayMessage(this);
};
sel3.onfocus = function() {
displayMessage(this);
};
sel1.onblur = function() {
hideMessage(this);
sel2.onblur = function() {
hideMessage(this);
};};
sel3.onblur = function() {
hideMessage(this);
};​​
JS Fiddle demo.
Take a look at this plugin, maybe it can help you.
For the data than you can put a php foreach for the <option> element on the select.

Categories