I tried to load dynamically loaded select menu for my page using Ajax/PHP. But jquery UI plugging prevents to load that dynamically loaded data. So I can't see nothing when i change the first select menu.
My code like this.
<script>
$(document).ready(function($) {
var list_target_id = 'list-target'; //first select list ID
var list_select_id = 'list-select'; //second select list ID
var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#'+list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({url: 'loadcity.php?svalue='+selectvalue,
success: function(output) {
//alert(output);
$('#'+list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
});
</script>
<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<?php
$sel_dis2 = mysql_query("SELECT * FROM district", $connection);
confirm_query($sel_dis2);
while($dis2 = mysql_fetch_assoc($sel_dis2)){
?>
<option value="<?php echo $dis2["id_district"]; ?>"><?php echo $dis2["district"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="select-state">
<label>City</label>
<select name="list-target" id="list-target"></select>
</div>
</form>
I tested the code without including jquery UI and it worked properly. But i want to add jquery UI for this page. This is the php file
<?php
$connection = mysqli_connect("localhost", "user", "password", "database");
$selectvalue = mysqli_real_escape_string($connection, $_GET['svalue']);
mysqli_select_db($connection, "database");
$result = mysqli_query($connection, "SELECT city.id_city, city.city FROM city WHERE city.district_id = '$selectvalue'");
echo '<option value="">-Select-</option>';
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row['id_city'].'">' . $row['city'] . "</option>";
//echo $row['drink_type'] ."<br/>";
}
mysqli_free_result($result);
mysqli_close($connection);
?>
Something else is breaking your select. Tested at jsfiddle: https://jsfiddle.net/ddpdhr5a/
$(document).ready(function($) {
var list_target_id = 'list-target'; //first select list ID
var list_select_id = 'list-select'; //second select list ID
var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#'+list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({url: 'loadcity.php?svalue='+selectvalue,
success: function(output) {
//alert(output);
$('#'+list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<option value="something">Something</option>
</select>
</div>
<div class="select-state">
<label>City</label>
<select name="list-target" id="list-target"></select>
</div>
</form>
This seems to work perfectly, although I had to remove the PHP, naturally, and just use some mock location
Related
EDIT 1 - BRIEF
This is how it is. https://ibb.co/9WY5gLL it has a datatable, which is sorted according to dropdown selections and there is a button to reset the sortings. the reset part is working fine except the text in dropdown is not changing. but if I remove the slect box class in dropdown HTML all working fine.
//DROPDOWN HTML
<select name="status" id="status" class="statusbox SlectBox form-control">
<?php echo loadStatus(); ?>
</select>
//DATATABLE
$(document).ready(function() {
var table= $('#tableone').DataTable( {
"serverSide": true,
"ajax": {
url :"sonme.php",
type : "POST",
data : function(data){
var status = $('#status').val();
data.status= status;
}
} );
} );
//TABLE FILTER
$('#status').change(function(){
table.draw();
});
//RESET TABLE
$('#reset').click(function() {
$("select.statusbox").val($("select.statusbox option:first").val()).change();
});
//PHP RETURNED BY AJAX CALL
function location(){
global $con;
$output.= '<option value="_allCity">All Results</option>';
$_selectquery= "SELECT * FROM _tableone";
$result = mysqli_query($con, $_selectquery);
while($row = mysqli_fetch_array($result)){
$output.= '<option value = "'.$row["name"].'">'.$row["name"].'</option>';
}
return $output;
}
Since this is the sumo select jquery plugin, all what I had to is reviewing the documentation.
This line - $('select.SlectBox')[0].sumo.reload(); reset the dropdown and value as the default. Please check the doc: https://hemantnegi.github.io/jquery.sumoselect/
I want to populate a dropdown (AJAX) when I click on the dropdown.
I have a dropdown categories and a button Add categories
When I open the page the first time, I can see my categories inside the dropdown.
If I want to include another categories, I click on Add categories and I insert my new categories.
After, if I click on the dropdown, I must see my new categories.
How to do that ?
I don't know exactly how to create that.
Thank you
my_ajax_file.php
$Qcheck = $OSCOM_Db->prepare('select categories_id as id,
categories_name as name
from :table_categories');
$Qcheck->execute();
$list = $Qcheck->rowCount();
if ($list > 0) {
$array = [];
while ($value = $Qcheck->fetch() ) {
$array[] = $value;
}
# JSON-encode the response
$json_response = json_encode($array); //Return the JSON Array
# Return the response
echo $json_response;
HTML code
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
}
});
});
}
</script>
<select name="category_id" id="Mycategory_id" class="form-control">
<option value="0" selected="selected">Haut</option>
<option value="23">Panneaux Signalétique</option>
<option value="20">Signalétique Camping</option>
<option value="22"> Barrières</option>
<option value="21"> Entrée</option>
</select>
<input type="hidden" name="current_category_id" value="0" /></div>
You need to update the select element with new options.
<script type="text/javascript">
function Mycategory_id() {
$("#myAjax").on('click', function(){
$.ajax({
url: 'http://www.my_ajax_file.php',
dataType: 'json',
success: function(data){
//data returned from php
var options_html = '';
for(index in data){
var category_id = data[index]['categories_id'];
var category_name = data[index]['categories_name'];
options_html += '<option value="'+category_id+'">' + category_name + '</option>';
}
$('#category_id').html(options_html);
}
});
)};
</script>
To make rendering easy, you can use mustache.js
I want get value from a database to a SELECTION box by changing another SELECTION box.
For example by changing "company" selection tag.
The value will send onChange to a PHP file.
After then i want get the value from that php file in to "f_name" Selection tag.
<select class="form-control" id="company" name="company">
<?php
$dbg=$con->db;
$sql="SELECT * FROM `company_table`";
$stmt=$dbg->query($sql);
foreach($stmt as $row) {
?>
<option value="<?php echo $row['company_id'];?>" ><?php echo $row['company_name'];?></option>
<?php } ?>
</select>
<select class="form-control" id="f_name" name="f_name">
</select>
onChange code for the "Company" Selection tag is following:
$('#company').on("change", function() {
var company_id=$(this).val();
$.post('db/project_add_to_workers_db.php',// location
{'action':'GetRow','company_id':company_id},// form name or data
function (data){// return function note 'date' is user define
alert (data);
var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var $select = $('#f_name');
$(jsonData).each(function (index, o) {
var $option = $("<option/>").attr("value", o.f_name).text( o.l_name);
$select.append($option);
});
});
});
I have 2 selects, one for states and one for cities, when the user selects the state the cities dropdown must be populated.
It seems it is working fine, when selecting the state you can see how the select is populated and you can select a city, however, if I revise the source code for the html I can not see any code (RMB View source code) and the selected value is not send to process the form.
My HTML
<select name="state" id="state" >
<option value="1">State One</option>
<option value="2">State Two</option>
<option value="3">State Three</option>
</select>
<select name="city" id="city">
</select>
My JQuery (Got from a tutorial and adapted)
$(document).ready(function($) {
var list_target_id = 'city';
var list_select_id = 'state';
var initial_target_html = '';
$('#'+list_select_id).change(function(e) {
var selectvalue = $(this).val();
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
$('#'+list_target_id).html(initial_target_html);
} else {
$.ajax({url: 'cities.php?idc='+selectvalue,
success: function(output) {
//alert(selectvalue);
$('#'+list_target_id).html(output);
}});
}
});
});
The cities.php (here I read data from a DB, however, here is a simple example)
<?
//these are the city values
echo '<option value="0">Select...</option>';
echo '<option value="1">1</option>';
echo '<option value="2">2</option>';
?>
Any ideas whats wrong? I can not get the values from cities.
Any help... thank you!
Just serialize and open the URL to process the form:
$(document).ready(function($) {
$('#submit').click(function(evt){
evt.preventDefault();
window.location.href = 'processTheForm.php?'+$('#myForm').serialize();
})
var list_target_id = 'city';
var list_select_id = 'state';
var initial_target_html = '';
$('#'+list_select_id).change(function(e) {
var selectvalue = $(this).val();
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
$('#'+list_target_id).html(initial_target_html);
} else {
$.ajax({url: 'cities.php?idc='+selectvalue,
success: function(output) {
//alert(selectvalue);
$('#'+list_target_id).html(output);
}});
}
});
});
I have the following code:
<select name="trec">
<? $d -> gettreatment(); ?>
</select>
<select name="treratment">
<? $d -> gettreat(); ?>
</select>
the <? $d -> gettreatment(); ?>
will display echo "<option value='$r[id]'>$r[cat]</option>";
and <? $d -> gettreat(); ?>
will display echo "<option value='$r[id]'>$r[treatment]</option>";
How to dynamically narrow down (or limit) the items in a second drop down list based on the selected item from first selected item? For example if we have one list of countries in first drop down list and have list of states in the second list then once USA is selected from the country list then the second list should change to list only the states of USA
<script type="text/javascript">
$(function() {
$("#form_process").click(function() {
//$("#choice").val(); //you cannot use the same id for more than 1 tag
var choice = 0;
if(document.getElementById("choice1").checked) choice='Yes';
else if(document.getElementById("choice2").checked) choice='No';
else if(document.getElementById("choice3").checked) choice='Dont Know';
var comments = document.getElementById('comments').value; //$("#comments").val();
var dataString = 'choice='+ choice + '&comments=' + comments;
$.ajax({
type: "POST",
url: "**ABSOLUTE URL TO PROCESSOR**",
data: dataString
});
});
});
</script>