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.
Related
So I have created an HTML table with dynamic rows. On the end the every row there is a button. When that button on the particular row is clicked, the row needs to removed without page refresh.
So I'm trying to do it by changing the values of column in database on button click. There is a field named 'status' in my database, which is initially set to 'unchecked'. But when I click the button, the update query is to be triggered hence changing the 'status' field to 'checked' on that particular row, and removing that particular.
newCust.php
<table class="table table-bordered table-striped table-light table-
responsive text-nowrap">
<thead class="thead-dark">
<tr>
<th class="col"><label> nID</label></th>
<th class="col"><label> CUSTOMER NAME </label></th>
<th class="col"><label> ADDRESS </label></th>
<th class="col"><label> CITY </label></th>
<th class="col"><label> STATUS </label></th>
</tr>
</thead>
<tbody>
<?php
<!-- GETTING DATA FROM THE TABLE WHERE STATUS FIELD IS UNCHECKED -->
$query = "select * from mx_newcustomer where status = 'unchecked'";
$result = mysqli_query($db,$query);
while($res = mysqli_fetch_array($result)){
$nID = $res['nID'];
?>
<tr>
<td><?php echo $nID; ?></td>
<td><?php echo $res['customername']; ?></td>
<td><?php echo $res['address']; ?></td>
<td><?php echo $res['city']; ?></td>
<td><button type="button" id="button<?php echo $nID; ?>" class="btn btn-
dark" >Ok</button></td>
</tr>
<script>
<!-- AJAX TO UPDATE RECORDS IN THE DATABASE-->
$(document).ready(function () {
$("#button<?php echo $nID ?>").click(function(){
alert('Test');
jQuery.ajax({
type: "POST",
url: "updateCust.php",
<--TRYING TO
PASS THE CLICKED BUTTON ID. I BELIEVE THIS IS WHAT I'M DOING WRONG-->
data: {"nID":$('#button<?php echo $nID ?>').serialize()},
success: function(response)
{
alert("Record successfully updated");
}
});
});
});
</script>
updateCust.php
$db = mysqli_connect("credentials");
$nID = $_POST['nID'];
$query = "UPDATE mx_newcustomer SET status = 'checked' WHERE nID =
'$nID'";
$res = mysqli_query($db, $query);
error_reporting(E_ALL);
ini_set('display_errors','On');
I'm not getting any errors, but the update query is not being triggered either. The expected result is remove the table row whose button has been clicked, without the page being refreshed.
Don't use .serialize(), it returns a string in the form name=value. But your button doesn't have a name or value, so there's nothing to serialize.
Change it to:
data: {"nID": <?php echo $nID ?>},
To delete the row, you can use:
success: function() {
$("#button<?php echo $nID?>").closest("tr").remove();
}
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",
I have already fetch the record from the database. It is shown on the html table. But it is still Non editable mode. I want to make sure the record shown is completely okay and update its Boolean value in the database. Otherwise it should be shown as red in color which are not approved i.e they are incorrect.
May be this can be easy. But please help me working this out. Sharing my code.
<div class="login-signup-head">Edit Table</div>
<table>
<tbody>
<thead>
<tr class="tredit">
<!-- <th width="10"></th> -->
<th contenteditable="true"> Id </th>
<th contenteditable="true"> University Id </th>
<th contenteditable="true"> Name </th>
<th contenteditable="true"> College Id </th>
<th width="100"> </th>
</tr>
</thead>
<tbody>
<?php
foreach($student_data as $row){
?>
<tr class="tredit">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['university_id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['college_id']; ?></td>
<td><input type='button' class='editable' onclick="table_edit()" value='Edit'/>
<input type='button' class='tabledelete' onclick="table_update()" value='Delete'></td>
</tr>
<?php
}
?>
</div>
</div>
</div>
<!-- </form> -->
</div>
</div>
</tbody>
</table>
This above code is called with the help of function in controller class whose code is below:
public function tableedit(){
if($this->session->userdata('university_id')){
/*if($this->input->server("REQUEST_METHOD") === "POST"){*/
// $data['user_id'] = $this->session->userdata('university_id');
/*$data['name'] = $this->input->post('college_name');
$data['college_id'] =$this->input->post('college_id');
$insert = $this->home_model->addCollege($data);
$data['success'] = 'college added successfully';
}*/
$user_id = $this->session->userdata('university_id');
$data['user_id'] = $user_id;
$data['student_data'] = $this->home_model->table_data($user_id);
$this->load->view('home/new-header',$data);
// $data['get_social'] = $this->home_model->get_social();*/
// $this->load->view('socail', $data);
// if (isset($_POST['id'])) {
// echo json_encode($response);
// }
/*$this->home_model->update_university_password($user_id,$password);*/
$this->load->view('home/left_university_sidebar',$data);
$this->load->view('edit_table',$data);
$this->load->view('home/footer');
} else {
$data['error'] = 'Table Cannot be viewed!';
$this->load->view('home/header');
$this->load->view('edit_table');
$this->load->view('home/footer');
}
}
Now this above code is getting called in the model class i.e where the queries are called.
public function table_data($user_id) {
$this->db->select('id,university_id,name,college_id');
/*$this->db->where('university_id',trim($user_id));*/
$this->db->from('college');
$query = $this->db->get();
return $query->result_array();
/* $query = $this->db->query("SELECT id,university_id,name,college_id FROM college");
$this->db->where('user_id',$university_id);
return $query->result_array();*/
}
It is a strange question in all fairness and we cannot code it for you.
But in your view, you need to make your table inside a form, then add a table cell to contain your checkbox.
How you generate your checkbox is up to you, you can use the CI form_helper or you can just code bootstrap checkbox, or use a plain html checkbox. The value of your checkbox you can set like this:
<input type="checkbox" name="my_value[]" value="<?php echo $entry_id; ?>">
Where entry id is your row id or identifier you set. You collect your input something like this
$my_data = $this->input->post('my_value');
You now have an array of all your checked values. Run through these and do whatever you want.
As for showing items in red that do not fit a particular criteria, a simple if statement in your view will do that, either displaying an entirely different piece of HTML or setting a class to use on the row, table cell or text.
I hope this helps in some way, but your question was rather vague to begin with.
Good luck with your website,
Best wishes,
Paul.
How Delete row in table html using ajax and php,
I need delete row in html table select row and click button delete make delete using ajax Currentally can make delete without ajax but I need delete row and stay on page without make submit on other page
code javaScript
function getDelete()
{
$.ajax({
type:"post",
//dataType:"json",
data:"id="+id,
url:"delete_address.php?id=$id", // url of php page where you are writing the query
success:function(json)
{
},
error:function(){
}
});
}
code html and php
<?php
$resualt=mssql_query("SELECT * FROM Address where user_id='$UserId' ") ;
echo "<table border='1' class='imagetable' id='imagetable'
width='400px' >\n";
echo '<thead>'.'<tr>';
echo '<th>Street</th>'.'<th>Quarter</th>'.
'<th>From</th>'.'<th>To</th>'.'<th>Notes</th>';
echo '</tr>'.'</thead>';
echo '<tbody>';
while ($row = mssql_fetch_assoc($resualt)) {
$fromDate=$row['from_date'];
$toDate=$row['to_date'];
echo " <tr onClick='myPopup($row[id])'".
( $_GET['id'] == $row['id'] ?
"style='background-color: green;'":"").">\n"."<td >
{$row['street']} </td>\n".
"<td>{$row['quarter']}</td>\n"."<td>$fdate2</td>\n".
"<td>$tdate2</td>\n"."<td>{$row['other_info']}</td>\n";
}
echo '</tbody>';
echo "</table>\n";
?>
<?php
echo"<a class='button-link' onClick='getDelete()'>delete</a>";
?>
code sql query
<?php
$idEmploye=$_GET['id'];
$userId=$_GET['user_id'];
$db_host = 'MOHAMMAD-PC\SQL2005';
$db_username = 'sa';
$db_password = '123321';
$db_name = 'db_test';
mssql_connect($db_host, $db_username, $db_password);
mssql_select_db($db_name);
mssql_query("DELETE FROM Address
WHERE id='$idEmploye' ; ") or die(mssql_error()) ;
echo '<script language="javascript">';
echo 'alert("successfully deleted ")';
echo '</script>';
echo "<script>setTimeout(\"location.href ='address.php';\",10); </script>";
?>
Any Help Very Thanks
Try this solution
HTML:
<table>
<tr>
<td>Username</td>
<td>Email</td>
<td>Action</td>
</tr>
<tr>
<td>TheHalfheart</td>
<td>TheHalfheart#gmail.com</td>
<td>
<input type="button" class="delete-btn" data-id="1" value="Delete"/>
</td>
</tr>
<tr>
<td>freetuts.net</td>
<td>freetuts.net#gmail.com</td>
<td>
<input type="button" class="delete-btn" data-id="2" value="Delete"/>
</td>
</tr>
</table>
We have two button's properties call data-id and class delete-btn
AJAX jQuery:
<script language="javascript">
$(document).ready(function(){
$('.delete-btn').click(function(){
// Confirm
if ( ! confirm('Are you sure want to delete this row?')){
return false;
}
// id need to delete
var id = $(this).attr('data-id');
// Current button
var obj = this;
// Delete by ajax request
$.ajax({
type : "post",
dataType : "text",
data : {
id : id
},
success : function(result){
result = $.trim(result);
if (result == 'OK'){
// Remove HTML row
$(obj).parent().parent().remove();
}
else{
alert('request fails');
}
}
});
});
});
</script>
In PHP:
Get the ID and delete
Reponse OK if success
Sorry i'm learning English, please fix if its bad
I'm still new with yii
and now I want to add a Javascript code that can append dropdown list to the table, when I click the button.
Here is my table:
<table class="table table-hover" id="table-add-more">
<tr>
<th style="width:50px;">No</th>
<th style="width:200px;">Name</th>
<th style="width:50px;">Count</th>
<th style="width:30px;"></th>
</tr>
<tbody>
</tbody>
</table>
Here is my button:
<a id="btn-add-more" class="btn btn-sm btn-success">Add More</a>
Here is my script:
<script>
$(document).ready(function(){
var number = 1;
var product = <?php $product = Product::model(); echo $form->dropDownList($product,'ID', CHtml::listData(Product::model()->findAll(), 'ID', 'name')); ?>;
$('#btn-add-more').click(function() {
var more_field = "<tr>"+
"<td>"+number+"</td>"+
"<td>"+
<?php echo "product"; ?>
+"</td>"+
"<td><input type='number'/></td>"+
"<td><input type='checkbox'/></td>"+
"</tr>"
$('#table-add-more').append(more_field);
number = number + 1;
});
});
</script>
I got an error message:
"unexpected token <"
near the var product = <select name="Product[ID]" id="Product_ID">
but I can't found the mistake yet.
Please help..
I think the better way is to have dropdown list with display: none at initialization and when you click that button, you can change display to block. But If you want to append dropdown to your table, I think you have tow problem in your javascript function:
1.You need to wrap this php code into "".
var product = "<?php $product = Product::model(); echo $form->dropDownList($product,'ID', CHtml::listData(Product::model()->findAll(), 'ID', 'name')); ?>";
I think you need to have <?php echo $product; ?>, instead of <?php echo "product"; ?>