[php/js/mysql] mass combo add w/ new functionality

C

Costas

Administrator
Staff member

Fill HTML control via Server Side
JavaScript: 
<?php

	$building_type= getSet($db, "select building_type as txt from elevators group by building_type order by building_type", null);
	$elevator_type= getSet($db, "select elevator_type as txt from elevators group by elevator_type order by elevator_type", null);
	$internal_doors= getSet($db, "select internal_doors as txt from elevators group by internal_doors order by internal_doors", null);
	$door_type= getSet($db, "select door_type as txt from elevators group by door_type order by door_type", null);
	$external_floor_door= getSet($db, "select external_floor_door as txt from elevators group by external_floor_door order by external_floor_door", null);
	$door_collisions= getSet($db, "select door_collisions as txt from elevators group by door_collisions order by door_collisions", null);
	$lock_type= getSet($db, "select lock_type as txt from elevators group by lock_type order by lock_type", null);
	$engine_room= getSet($db, "select engine_room as txt from elevators group by engine_room order by engine_room", null);
	$trochaliostasio= getSet($db, "select trochaliostasio as txt from elevators group by trochaliostasio order by trochaliostasio", null);
	$cableway_count= getSet($db, "select cableway_count as txt from elevators group by cableway_count order by cableway_count", null);
	$magnet_power_supply= getSet($db, "select magnet_power_supply as txt from elevators group by magnet_power_supply order by magnet_power_supply", null);
	$brake_power_supply= getSet($db, "select brake_power_supply as txt from elevators group by brake_power_supply order by brake_power_supply", null);
	$light_chamber= getSet($db, "select light_chamber as txt from elevators group by light_chamber order by light_chamber", null);
	$light_type= getSet($db, "select light_type as txt from elevators group by light_type order by light_type", null);
	$light_well= getSet($db, "select light_well as txt from elevators group by light_well order by light_well", null);
	
	$building_type_html = create_html_select_elements($building_type);
	$elevator_type = create_html_select_elements($elevator_type);
	$internal_doors = create_html_select_elements($internal_doors);
	$door_type = create_html_select_elements($door_type);
	$external_floor_door = create_html_select_elements($external_floor_door);
	$door_collisions = create_html_select_elements($door_collisions);
	$lock_type = create_html_select_elements($lock_type);
	$engine_room = create_html_select_elements($engine_room);
	$trochaliostasio = create_html_select_elements($trochaliostasio);
	$cableway_count = create_html_select_elements($cableway_count);
	$magnet_power_supply = create_html_select_elements($magnet_power_supply);
	$brake_power_supply = create_html_select_elements($brake_power_supply);
	$light_chamber = create_html_select_elements($light_chamber);
	$light_type = create_html_select_elements($light_type);
	$light_well = create_html_select_elements($light_well);
	
	function create_html_select_elements($record_set)
	{
		$html = "<option value='0']</option>";
		foreach($record_set as $row) {
			$html .= "<option>{$row['txt']}</option>";
		}
		
		$html .= "<option>**new**</option>";
		
		return $html;
	}

?>

<script>
    $(function ()
        {
            //when new add it to combo + select it - http://stackoverflow.com/a/24281246/1320686
            $('#light_well, #light_type, #light_chamber, #brake_power_supply, #magnet_power_supply, #cableway_count, #trochaliostasio, #engine_room, #lock_type, #door_collisions, #external_floor_door, #door_type, #internal_doors, #elevator_type, #building_type').on('change', function() {
             
                 if (this.value == "**new**")  {
 
                    var new_entry = prompt("Input the new record", "");
 
                    if (!new_entry)
                        return;
 
                    var o = new Option(new_entry);
                    o.selected=true;
                    $("#" + this.name).append(o);
                }
             
            });
    }); // jQ
</script>
<body>
	<div class='form-group']
		<label>building_type :</label>
		<select name='building_type' id='building_type' class='form-control'] <?=$building_type_html?> </select>
	</div>
	
	<div class='form-group']
		<label>elevator_type :</label>
		<select name='elevator_type' id='elevator_type' class='form-control']<?=$elevator_type?> </select>
	</div>
.
.
.
.
.
.
.	
	<div class='form-group']
		<label>light_well :</label>
		<select name='light_well' id='light_well' class='form-control']<?=$light_well ?> </select>
	</div>
</body>

 
 

Fill HTML control via Client Side
 
JavaScript: 
<?php

	$building_type= getSet($db, "select building_type from elevators group by building_type order by building_type", null);
	$elevator_type= getSet($db, "select elevator_type from elevators group by elevator_type order by elevator_type", null);
	$internal_doors= getSet($db, "select internal_doors from elevators group by internal_doors order by internal_doors", null);
	$door_type= getSet($db, "select door_type from elevators group by door_type order by door_type", null);
	$external_floor_door= getSet($db, "select external_floor_door from elevators group by external_floor_door order by external_floor_door", null);
	$door_collisions= getSet($db, "select door_collisions from elevators group by door_collisions order by door_collisions", null);
	$lock_type= getSet($db, "select lock_type from elevators group by lock_type order by lock_type", null);
	$engine_room= getSet($db, "select engine_room from elevators group by engine_room order by engine_room", null);
	$trochaliostasio= getSet($db, "select trochaliostasio from elevators group by trochaliostasio order by trochaliostasio", null);
	$cableway_count= getSet($db, "select cableway_count from elevators group by cableway_count order by cableway_count", null);
	$magnet_power_supply= getSet($db, "select magnet_power_supply from elevators group by magnet_power_supply order by magnet_power_supply", null);
	$brake_power_supply= getSet($db, "select brake_power_supply from elevators group by brake_power_supply order by brake_power_supply", null);
	$light_chamber= getSet($db, "select light_chamber from elevators group by light_chamber order by light_chamber", null);
	$light_type= getSet($db, "select light_type from elevators group by light_type order by light_type", null);
	$light_well= getSet($db, "select light_well from elevators group by light_well order by light_well", null);

?>

<script>

	
	$(function ()
		{
			fill_elevator_combos();

			//when new add it to combo + select it - http://stackoverflow.com/a/24281246/1320686
			$('#light_well, #light_type, #light_chamber, #brake_power_supply, #magnet_power_supply, #cableway_count, #trochaliostasio, #engine_room, #lock_type, #door_collisions, #external_floor_door, #door_type, #internal_doors, #elevator_type, #building_type').on('change', function() {
			
				 if (this.value == "**new**")  {

					var new_entry = prompt("Input the new record", "");

					if (!new_entry)
						return;

					var o = new Option(new_entry);
					o.selected=true;
					$("#" + this.name).append(o);
				}
			
			});
	}); // jQ
	
	function fill_elevator_combos()
	{
			var building_type =   <?php echo json_encode($building_type); ?>;
			setComboItems("building_type", building_type);
			
			var elevator_type =   <?php echo json_encode($elevator_type); ?>;
			setComboItems("elevator_type", elevator_type);

			var internal_doors =   <?php echo json_encode($internal_doors); ?>;
			setComboItems("internal_doors", internal_doors);
			
			var door_type =   <?php echo json_encode($door_type); ?>;
			setComboItems("door_type", door_type);

			var external_floor_door =   <?php echo json_encode($external_floor_door); ?>;
			setComboItems("external_floor_door", external_floor_door);
			
			var door_collisions =   <?php echo json_encode($door_collisions); ?>;
			setComboItems("door_collisions", door_collisions);
			
			var lock_type =   <?php echo json_encode($lock_type); ?>;
			setComboItems("lock_type", lock_type);

			var engine_room =   <?php echo json_encode($engine_room); ?>;
			setComboItems("engine_room", engine_room);

			var trochaliostasio =   <?php echo json_encode($trochaliostasio); ?>;
			setComboItems("trochaliostasio", trochaliostasio);
			
			var cableway_count =   <?php echo json_encode($cableway_count); ?>;
			setComboItems("cableway_count", cableway_count);

			var magnet_power_supply =   <?php echo json_encode($magnet_power_supply); ?>;
			setComboItems("magnet_power_supply", magnet_power_supply);
				
			var brake_power_supply =   <?php echo json_encode($brake_power_supply); ?>;
			setComboItems("brake_power_supply", brake_power_supply);

			var light_chamber =   <?php echo json_encode($light_chamber); ?>;
			setComboItems("light_chamber", light_chamber);

			var light_type =   <?php echo json_encode($light_type); ?>;
			setComboItems("light_type", light_type);

			var light_well =   <?php echo json_encode($light_well); ?>;
			setComboItems("light_well", light_well);

			//empty vars
			building_type = elevator_type = internal_doors = door_type = external_floor_door = door_collisions = lock_type = engine_room = trochaliostasio = cableway_count = magnet_power_supply = brake_power_supply = light_chamber = light_type = light_well = null
	}
	
	function setComboItems(ctl_name, jArray)
	{
		if(jArray) {
			var combo_rows = "<option value='0']</option>";
			for (var i = 0; i < jArray.length; i++)
			{
				combo_rows += "<option>" + jArray[i][ctl_name] + "</option>";
			}
			
			combo_rows+= "<option>**new**</option>";
			
			$("[name=" + ctl_name + "]").html(combo_rows);
			$("[name=" + ctl_name + "]").change();
		}
	}
	
</script>

<body>
	<div class='form-group']
		<label>building_type :</label>
		<select name='building_type' id='building_type' class='form-control'] </select>
	</div>

	<div class='form-group']
		<label>elevator_type :</label>
		<select name='elevator_type' id='elevator_type' class='form-control'] </select>
	</div>
.
.
.
.
.
.
.

	<div class='form-group']
		<label>light_well :</label>
		<select name='light_well' id='light_well' class='form-control'] </select>
	</div>
</body>
 
You must log in or register to reply here.
Top