i am using WordPress platform with PHP AND MYSQL in order to create a website where i have a page that includes 4 dropdown lists that get it data from the MYSQL database and using javascript and AJAX i am trying to make these dropdown list dependent on each other where the user select from teh first one and based on the user's selection the second drop down display data.
the problem is that i have used 2 codes in order to make AJAX work without refreshing the hall page.
when i try to select from the first dropdown list in the debug mode it display:
404 drpdown_fetch_owner.php error page not found
directory structure :
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/search_info_location.php
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php
tables:
site_info:
siteID
siteNAME
ownerID
List item
owner_info:
ownerID
ownerNAME
problem :
after the user click on the first droplist
variable ownerID in the AJAX stay empty and do not get any value.
i added var_dump($sql); under the SQL query in the dropdown_fetch_owner.php code
and i got this statement in the debug mode:
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php:6:
array (size=0)
empty
code1 :
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').change(function(){
var ownerID = $(this).val();
$.ajax({
url:"dropdown_fetch_owner.php",
method:"POST",
data:{ownerID:ownerID},
datatype:"text",
success:function(data){
$('#owner_name').html(data);
}
});
});
});
</script>
dropdown_fetch_owner.php:
<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
global $wpdb;
$sql =$wpdb->get_results("select * from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
echo '<option value="">Select Owner</option>';
foreach($sql as $row){
//while ($row = mysqli_fetch_array($result)) {
echo "<option value = '".$row ->ownerID."'>". $row->ownerNAME."</option>";
}
?>
In wordpress, use ajax(https://codex.wordpress.org/AJAX_in_Plugins)
Change
url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
instead of url:"dropdown_fetch_owner.php",
Related
I am using two drop down lists first for category and second for sub category. I want to use Javascript's onChange(); to fetch the values of sub categories but am not able to make out how to use it in the code. Plz guide.
<th>Category</th>
<td>
<select name="category" class="frm" onChange="fun()">
<?php
include("data_connect.php");
$data=mysqli_query($con,"select * from `category`");
while($row=mysqli_fetch_array($data))
{
echo "<option value=".$row['c_id'].">".$row['name']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<th>Sub-Category</th>
<td>
<select name="sub_category" class="frm">
<?php
if(isset($_POST['sub']))
{
include("data_connect.php");
$data=mysqli_query($con,"select * from `sub_category` where c_id=".$_POST['category']."");
while($row1=mysqli_fetch_array($data))
{
echo "<option value=".$row1['s_id'].">".$row1['name']."</option>";
}
}
?>
</select>
</td>
</tr>
I'm going to ignore for a moment your invalid table structure as I'm not really sure how you're wanting it to look. I'll just wrap what you have in a form for now so you at least have something to work from.
Also, your sub-category query is open to SQL injection attacks. You should use bound parameters to address this. You can continue to use mysqli to do that, but I personally suggest switching to PDO.
<form method="post" id="categoryForm">
<th>Category</th>
<td>
<select name="category" class="frm" onChange="document.getElementById('categoryForm').submit();">
<?php
include("data_connect.php");
$data=mysqli_query($con,"select * from `category`");
while($row=mysqli_fetch_array($data))
{
// check to see if we should re-select this value because it was submitted
$isSelected = (!empty($_POST['category']) && $_POST['category'] == $row['c_id'] ? " selected" : "");
echo "<option value='".$row['c_id']."'" . $isSelected . ">".$row['name']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<th>Sub-Category</th>
<td>
<select name="sub_category" class="frm">
<?php
// only if we've submitted the main category selection
if(!empty($_POST['category']))
{
// no need to include data_connect.php again, it was already included above
$data=mysqli_query($con,"select * from `sub_category` where c_id='".$_POST['category']."'");
while($row1=mysqli_fetch_array($data))
{
echo "<option value=".$row1['s_id'].">".$row1['name']."</option>";
}
}
?>
</select>
</td>
</tr>
</form>
I've made a combobox based on the database.
I want when I've selected one combobox and instantly display the appropriate table combobox that I choose.
Example when I choose west java table will show bandung and bogor.
this my controller
public function show() {
$data['provinsi'] = $this->mdl_onchange->get_provinsi();
$data['kota'] = $this->mdl_onchange->get_kota();
$this->load->view('form_onchange', $data);
}
this my model
function get_provinsi() {
$query = $this->db->get('table_provinsi');
return $query->result();
}
function get_kota() {
$query = $this->db->get('table_kota');
return $query->result();
}
this is my view
<p>
<label for="select_provinsi"></label>
<select name="select_provinsi" id="select_provinsi">
<option>--Pilih Provinsi--</option>
<?php foreach($provinsi as $row_provinsi) { ?>
<option value="<?php echo $row_provinsi->id_provinsi?>">
<?php echo $row_provinsi->nama_provinsi; ?>
</option>
<?php } ?>
</select>
</p>
<table border="1" name="select_kota" id="select_kota" style="border-
collapse:collapse; width:60%;">
<tr style="background:yellow;">
<th>Id kota</th>
<th>Id provinsi</th>
<th>nama kota</th>
</tr>
<?php foreach($kota as $c){?>
<tr>
<td>
<?php echo $c->id_kota; ?>
</td>
<td>
<?php echo $c->id_provinsi; ?>
</td>
<td>
<?php echo $c->nama_kota; ?>
</td>
</tr>
<?php } ?>
</table>
my jquery
<script type ="text/javascript">
$("#select_kota").chained("#select_provinsi");
</script>
I've made like this but its data always appear when I have not chosen combobox western Java.
it is
I see you are using chained Jquery. That's for chaining two selects, not for a table.
For this, the best approach you could get is to perform an Ajax call to get the table rows and modify the table tbody inner HTML.
First, you need to modify the model get_kota() function, to select only the kota on a provinsi, by it's id_provinsi:
function get_kota($id_provinsi) {
$this->db->where('id_provinsi', $id_provinsi);
$query = $this->db->get('table_kota');
return $query->result();
}
After that, create a new function on your controller to return the new values via Ajax. Here I'll include also the modification to the original method to remove the first call for kotas:
public function show() {
$data['provinsi'] = $this->mdl_onchange->get_provinsi();
$this->load->view('form_onchange', $data);
}
public function ajax_getkotas($id_provinsi) {
$kotas = $this->mdl_onchange->get_kota($id_provinsi);
foreach ($kotas as $kota) {
echo '<tr>\n';
echo '<td>' . $kota->id_kota . '</td><td>' . $kota->id_provinsi . '</td><td>' . $kota->nama_kota . '</td>\n';
echo '</tr>\n';
}
}
Now, let's go back to your view. Let's divide it into three parts: the select, the table and the jquery.
You can keep your select as it is right now.
The table will be empty at first, you can maybe have something like this:
<table border="1" name="select_kota" id="select_kota" style="border-
collapse:collapse; width:60%;">
<thead>
<tr style="background:yellow;">
<th>Id kota</th>
<th>Id provinsi</th>
<th>nama kota</th>
</tr>
</thead>
<tbody>
<tr><td>Please, select a provinsi from the above dropdown to display results</td></tr>
</tbody>
</table>
And now let's go for the JQuery Ajax call:
$('#select_provinsi').on('change', function() {
$.ajax({
type: 'GET',
url: "<?php echo site_url('your_controllername/ajax_getkotas') ?>" + "/" + $('#select_provinsi').val() , // we call our new function with the selected id
dataType: "html",
success: function (data) { // change the data from our response
$('#select_kota tbody').html(data); //rows are printed inside the tbody of our table
},
failure: function(err) {console.log("Error on the Ajax call");} // Some error feedback just in case. You can check network XHR to see what's going on.
});
})
With this I think you can get it working. Let me now it that's works for you or we need to change anything.
I have a two drop downs in my program, and I want it to be like this:
I have a list of employee and display/populate the list and put it
inside of my first drop down.
Second is that, when I choose "Francis" the second drop down will
have a value/event only for Francis and so on when I choose also another employee.
I think the first drop down is correct, but I want to get the value of it and put it inside in my SQL statement in the WHERE clause in my second drop down. How?
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = 'Francis'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
</select>
</td>
</tr>
Do a ajax request for the second select:
create a php file for the ajax request
html:
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
</select>
</td>
</tr>
ajax.php
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = '"$_GET['cname']"'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
js:
<script>
$(function(){
$('#cname').on('change',function(){
$.ajax({
url:ajax.php,
data:{cname:$('#cname').val()};
type:'get',
contentType:'html',
success:function(data){
$('#survey').append(data);
}
});
});
});
</script>
I have created an escalation system where user uploads .csv file and user can view the uploaded details in web page.
An option tag will be displayed in each row with the below options:
First level Escalation sent
Second level Escalation sent
Third level Escalation sent.
I simply want to store the selected item to save in the DB, so the other agent who use the system can see which level escalation has been sent for each complaints.
Here is my code. I am unable to store the option item in DB. Ex: When I select "*First level Escalation sent" it doesn't display to others. Pls help
<table width="100%" border="1" cellpadding="1" cellspacing="1" style="font-size:10.5px; font-family:verdana;" >
<tr>
<td>Name</td>
<td>SR Number</td>
<td>Service Impact</td>
<td>Customer Ref No</td>
<td>Reported Date and Time</td>
<td>Issue</td>
<td>Pending Reason as per TAC</td>
<td>Expected Time for Resolution</td>
<td>TAC Agent</td>
<td>Cx Contact</td>
<td>Elapsed Time</td>
<td>Archive</td>
<td>Send Email</td>
<td>Comment</td>
</tr>
<?php
while ($ccs=mysqli_fetch_assoc($records)) {
$A=$ccs['Name'];
$B=$ccs['SRNumber'];
$C=$ccs['ServiceImpact'];
$D=$ccs['CustomerRefNo'];
$E=$ccs['ReportedDateAndTime'];
$F=$ccs['Issue'];
$G=$ccs['PendingReasonAsPerTAC'];
$H=$ccs['ETR'];
$I=$ccs['TACAgent'];
$J=$ccs['Cxcontact'];
echo("
<tr class='options'>
<td>$A</td>
<td>$B</td>
<td>$C</td>
<td>$D</td>
<td>$E</td>
<td>$F</td>
<td>$G</td>
<td>$H</td>
<td>$I</td>
<td>$J</td>
<td>
");
date_default_timezone_set('Asia/Colombo');
$the_time = date('H:i');
$hours = "00";
$minutes = "00";
$seconds = "00";
$new_time=$E;
$datetime1 = new DateTime($the_time);
$datetime2 = new DateTime($new_time);
$interval = $datetime2->diff($datetime1);
$hours=$interval->format('%h');
$minutes= $interval->format('%i');
$seconds= $interval->format('%s');
echo $hours." Hours ".$minutes." Minutes ".$seconds." Seconds</br></br>";
echo("
<td><a href=Escalation_Display.php?delete=$B>Archive</a></td>
<td><a href=Escalation_Display.php?ID=$B>Email</a> </td>
<td>
<select id='select'>
<option value='1'>select</option>
<option value='2'>First level Escalation sent</option>
<option value='3'>SECOND</option>
<option>THIRD</option>
<option>CLOSURE NOT SENT</option>
</select>
</td>
</tr>
");
}
?>
</table>
thanks in advance
Make one column name Comment in table from where you are fetching record ($records). I tried. I gave you how to do. But, please make changes in if condition in <select></select> if required.
<?
.
.
while ($ccs=mysqli_fetch_assoc($records)){
$B=$ccs['SRNUMBER']; I assumed column 'id' (Primary Key and auto-incremented). Change with your column name.
$escValue=$ccs['Comment']; I assumed column 'escalation_value' as i wrote above.
.
.
.
?><td>
<select id='selectEscalation'>
<option hidden>Select</option>
if($escValue != 1) {
<option value="1."-".$B;">First level Escalation sent</option>
}
if($escValue != 2 && $escValue == 1) {
<option value="2 . "-" . $B;">Second level Escalation sent</option>
}
if($escValue != 3 && $escValue==2) {
<option value="3."-".$B;">Third level Escalation sent</option>
}
if($escValue == 3) {
<option>CLOSURE NOT SENT</option>
}
</select>
</td>
</tr>");
}
?>
</table>
<script>
$('#selectEscalation').change(function(){
var EscalationValue=$('#selectEscalation').val();
$.ajax({url:"Ajax-submitEscalation.php?EscalationValue="+EscalationValue,cache:false,success:function(result){
alert("Escalation Sent");
}});
});
</script>
Ajax-submitEscalation.php
<?
// split the contents of $_POST['data'] on a hyphen, returning at most two items
list($data_value, $data_id) = explode("-", $_POST['EscalationValue'], 2);
//escalation_value column name as i wrote above.
$Query="UPDATE TableName SET Comment='$data_value' WHERE SRNUMBER='$data_id'"
?>
Im new to php and ajax and wanted to display a table that's filled with content of a database. I succeeded doing it but now I'm trying to change the tables content with a select. I know there are many sites explaining how to do it, but I somehow don't get it. The best solution for me is by changing the table without a reload of the page or reloading it with a separate button.
I read about doing it with ajax / javascript but, as I mentioned, Im not familiar with those things.
Below is my code thats already workin.
PHP:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
$db_query = mysql_query($sql);
?>
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
My selects:
<select name="Choose" title="chose">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
Id really appreciate some code or hints how to do it.
Here is the code:
html:
<table id="tableid"> //mention id for a table
......
......
</table>
// create an event for select
<select name="Choose" title="chose" onchange="getajax(this.value)">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
javascript:
function getajax(value){
$.ajax({
type: "GET",
url: "Ajaxpage.php",
data: {text:value},
success: function(data) {
$("#tableid").html(data);
}
});
}
Ajaxpage.php:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysqli_connect($mysqlhost, $mysqluser, $mysqlpwd); //use mysqli instead of mysql
mysqli_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users where someid='".$_GET['text']."'";
$query = mysql_query($sql);
while($row= mysql_fetch_array(query)){
echo "<tr><td>".$row['id']."</td><td>".$row['user_email']."</td></tr>";
}
?>
<script>
function reloadWithOptionValue(){
document.FilterFrom.submit();
}
</script>
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
if(isset($Choose) && !empty($Choose)){
$sql.=" where id like '%$Choose%' or user_email like '%$Choose%'";
}
$db_query = mysql_query($sql);
?>
<form method="post" name="FilterFrom">
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
<select name="Choose" title="chose" onchange="reloadWithOptionValue()">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
</form>
try this one