I have created a website. I have created a dropdown in it for displaying different data while the user selects different dropdown, my code is as below
$(document).ready(function(){
// code to get all records from table via select box
$("#course_title").change(function() {
var tid = $(this).find(":selected").val();
var dataString = 'tid='+ tid;
$.ajax({
url: 'mycourses.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.tid);
$("#emp_age").text(employeeData.training_name);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
<select class="form-control sel" name="trainings" id="trainings" >
<option value="select options" selected disabled>Select Training Course</option>
<? $sql_trainings = "SELECT * FROM tbl_data";
$trainings_data = mysqli_query($con,$sql_trainings);
while($row = mysqli_fetch_assoc($trainings_data) ){
$trainingid = $row['tid'];
$training_name = $row['training_name'];
echo "<option value='".$trainingid."' >".$training_name."</option>";
}
?>
</select>
i have another page as getcourses.php as below
<?php
include "config.php";
$trainingid = $_POST['tid']; // department id
$sql = "SELECT tid,training_name FROM tbl_data WHERE id=".$departid;
$result = mysqli_query($con,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$userid = $row['tid'];
$name = $row['training_name'];
$users_arr[] = array("tid" => $userid, "training_name" => $name);
}
// encoding array to json format
echo json_encode($users_arr);
The dropdown is first displayed in a page, then when the user clicks the dropdown, they are taken to different page showing the content of the dropdown they selected, it's showing the content the first time when the user clicks the dropdown and is being taken to the different page to show content, but when the user clicks different dropdown from the result page the dropdown doesn't work, nothing happens, I want to display the content of dropdown which the user selects in the resulting page, whenever user changes dropdown it should be appearing. my table name is tbl_data and my columns are tid and training_name.
Can anyone tell me what is wrong with my code?
$("#course_title").change(function() {
should be,
$("#trainings").change(function() {
So your js code should be like,
$(document).ready(function() {
// code to get all records from table via select box
$("#trainings").change(function() {
var tid = $(this).val(); // this is enough to get selected value
$.ajax({
url: 'mycourses.php',
type: 'POST', // you forgot type
data: {tid : tid},
success: function(employeeData) {
// same as your code
}
});
})
});
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/
Hey Everyone Please help me, I want to update the record, but the problem is I can't see more than 1 categories in the select box. I have been using Php/MySQLi and Also Ajax.
Total Categories Stored in the Database Three
So, Please Look at that:
Here is Php Function
function get_product_record()
{
global $con;
$Pro_Update_Id = $_POST['Pro_Update_ID'];
$query = "SELECT Product.Product_ID, categories.cat_name, categories.cat_id, product.Product_Name,product.Product_Qty,product.Price,product.Description from product INNER JOIN categories on product.Category_ID=categories.cat_id where product.Product_ID='$Pro_Update_Id'";
$result = mysqli_query($con,$query);
while($row=mysqli_fetch_assoc($result))
{
$data = "";
$data[0]=$row['Product_ID'];
$data[1]=$row['cat_name'];
$data[2]=$row['Product_Name'];
$data[3]=$row['Product_Qty'];
$data[4]=$row['Price'];
$data[5]=$row['Description'];
$data[6]=$row['cat_id'];
}
echo json_encode($data);
}
Here is jQuery File
function get_pro_record()
{
$(document).on('click','#p_btn_edit',function()
{
var GetPID = $(this).attr('data-id');
$.ajax(
{
url: 'includes/products/get_pro_record.php',
method: 'post',
data:{Pro_Update_ID:GetPID},
dataType: 'JSON',
success:function(data)
{
$('#product_id').val(data[0]);
$('#cat_up_name').html('<option id="p_update_id" value='+(data[6])+'>'+(data[1])+'<option>');
$('#product_up_name').val(data[2]);
$('#up_Qty').val(data[3]);
$('#up_Price').val(data[4]);
$('#up_description').val(data[5]);
$('#products_update').modal('show');
}
})
})
}
Here is a Screenshot of the Project:
I am using Ajax to link two select tags where one is state and other is cities of the selected state. Everything is working fine. The problem is that when I select a state I get cities of that particular state but when I change the state again, I don't get the cities for the new state for that I have to refresh the page. Kindly help. !!
Thanks !
//**HTML**
<select class="select_state" onchange="getCity();">
<option value="">Select State</option>
<?php $stateSql = "SELECT * FROM state" ;
$stateResult = $conn->query($stateSql);
while($sRow = $stateResult->fetch_assoc()){
echo "<option value='".$sRow['name']."'".">".$sRow['name'];" </option>";
}?></select>
function getCity(val) {
var val = $('.select_state').val();
//alert(val);
$.ajax({
type: "POST",
url: "get_city.php",
data:'city_name='+val,
success: function(data){
$("#cities").append(data);
}
});
get_city.php:
<?php
include 'dbConfig.php';
$a=$_POST['city_name'];
if(!empty($_POST["city_name"])) {
$citySql ="SELECT * FROM cities WHERE city_state LIKE '$a'";
$cityResult = $conn->query($citySql);
while($cRow = $cityResult->fetch_assoc())
{
//echo $cRow['city_name'];
echo "<option value='".$cRow['city_name'].">".$cRow['city_name'];"</option>";
}
}
?>
Instead of append(data) try with html(data).
$("#cities").html(data);
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
Hello I'm using ajax to call on-change drop-down list and select all value from database into table row format but it only show me the last record from database into table row.
I have three rows in database related to one select from drop-down list and I want to show all three rows into table row format. My code is
$(document).ready(function(){
$('#location').change(function(){
$.ajax({
url:'location.php?location=' + $(this).val(),
type: "get",
timeout:10000,
dataType: 'json',
success: function(data){
document.getElementById("material_name").value=data.material_name;
document.getElementById("material_quantity").value=data.product_quantity;
},
error:function(){
}
});
});
and location.php page is as:-
<?php
require_once("shine_class.php");
$s = new shine;
$s->connection();
$location = $_REQUEST['location'];
$query ="SELECT * from material_used where product_name = '$location' ";
$query1=mysql_query($query);
while($row = mysql_fetch_array($query1))
{
$result1=$row['material_name'];
$result2=$row['product_quantity'];
}
echo json_encode(array("material_name"=>$result1,"product_quantity"=>$result2));
?>