<script type="text/javascript">
$(document).ready(function(){
$("#t_select").change(function(){
var table_name = $("#t_select").val();
$.ajax({
type: 'POST',
url: 'index.php',
data: {"tabname": table_name},
success: function(data) {
console.log('Data send');
$("#display-property-address").html(data);
}
});
});
});
</script>
This my jquery code
<form name="stable" method="POST" id="form">
<select id="t_select">
<option value="agent_info">Agent info</option>
<option value="student_info">Student info</option>
</select>
</form>
my html code
<?php
if($_REQUEST['table_name'])
{
$val=$_REQUEST["table_name"];
echo $val;
}else{echo "nothing";}
?>
i want to get the option value from the select box using jquery on change event and i want to insert that value into PHP.
The variable you are sending from JS is called tabname.
This should fix it.
if($_REQUEST['tabname'])
{
$val=$_REQUEST["tabname"];
echo $val;
}else{echo "nothing";}
In ajax you have to use like
data: {"table_name": table_name},
instead of
data: {"tabname": table_name},
Thanks for the help friends,here is my solution
index.php
<script type="text/javascript">
$(document).ready(function()
{
$(".t_select").change(function()
{
//alert($('#t_select').val());
//var tabname = $('#t_select').val());
var table_name = $(this).val();
// alert(table_name);
$.ajax
({
type:"POST",
url: "data.php",
data: {tabname :table_name},
//cache: false,
success: function(html) {
console.log('Data send');
$("#display-property-address").html(html);
}
});
});
});
</script>
<select class="t_select" name="t_select">
<option value="agent_info">Agent info</option>
<option value="student_info">Student info</option>
</select>
<div id="display-property-address"></div>
data.php
<!DOCTYPE html>
<?php include 'db.php';?>
<html lang="en">
<head>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Description</th>
<th>Unit</th>
<th>Semester</th>
</tr>
</thead>
<?php
//print_r('tabname');
echo $_POST['tabname'];
if($_POST['tabname'])
{
$val=$_POST['tabname'];
echo $val;
}else{echo "nothing";}
?>
<?php
$table_name = $_REQUEST['tabname'];
$SQLSELECT = "SELECT * FROM $table_name ";
$result_set = mysql_query($SQLSELECT, $conn);
while($row = mysql_fetch_array($result_set))
{
?>
<tr>
<td><?php echo $row['SUBJ_ID']; ?></td>
<td><?php echo $row['SUBJ_CODE']; ?></td>
<td><?php echo $row['SUBJ_DESCRIPTION']; ?></td>
<td><?php echo $row['UNIT']; ?></td>
<td><?php echo $row['SEMESTER']; ?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Use $("#t_select option:selected").val();
Related
how can I run a javascript function (math calculation) in reload/refresh of the site? Is there a simple way to do that?
The result of the following simple calculation should refresh when a.) the site is refreshed and b.) when any of the math values are changed.
I already tried onload instead of onclick, but that doesn't change anything.
I put up a live website, see here:
http://90.153.112.5:8888/djdp42Bjjr39399nfjjj39xleit832991vnJ39921/live/test.php
and the code (test.php):
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$sql = "SELECT * from strategy_sheets";
$faq = $db_handle->runQuery($sql);
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) {
$(editableObj);
}
function saveToDatabase(editableObj,column,id) {
$(editableObj);
$.ajax({
url: "saveedit.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
success: function(data){
$(editableObj);
}
});
}
</script>
</head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>}
</style>
<body>
<table class="tbl-qa">
<tr>
<td >DESCRIPTION:</td>
<?php
foreach($faq as $k=>$v) {
?>
<td contenteditable="true" id="Event" onBlur="saveToDatabase(this,'event','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["event"]; ?></td>
<?php
}
?>
</table>
<hr>
<table class="tbl-qa">
<tr>
<td>VALUE 1:</td>
<?php
foreach($faq as $k=>$v) {
?>
<td contenteditable="true" id="Tank" size="2" oninput="output();output2();output3();" onBlur="saveToDatabase(this,'Tank','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["Tank"]; ?></td>
<?php
}
?>
<td>VALUE 2:</td>
<?php
foreach($faq as $k=>$v) {
?>
<td contenteditable="true" id="Spritverbrauch" size="2" oninput="output();output3();" onBlur="saveToDatabase(this,'Spritverbrauch','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["Spritverbrauch"]; ?></td>
<?php
}
?>
</tr>
<tr>
<p></p>
<td>RESULT: </td>
<td><a id="StintlangeRd" onload="output();output3();"></td>
</tr>
</table>
<script type="text/javascript">
function output(){
var value2 = document.getElementById('Tank').textContent;
var value3 = document.getElementById('Spritverbrauch').textContent;
document.getElementById('StintlangeRd').innerHTML = (parseFloat(value2) / parseFloat(value3)).toFixed(2);
}
</script>
<script type="text/javascript">
setTimeout(function(){
location.reload();
},60000);
</script>
</body>
</html>
I have searched the whole WWW but get nothing helpful. Any Solution will be appreciated. thanks in advance
MY HTML
<div class="row">
Either the form tag needed in my case or not
<form>
<div class="form-group">
<label for="date" class="col-12 col-md-2 control-label"><?php echo 'Date';?>
</label>
<div class="col-12 col-md-3">
<input type="text" class="datepicker form-control" name="date" id="date">
</div>
</div>
Here I am getting the data from my database
<div class="form-group">
<label for="class_id" class="col-12 col-md-2 control-label"><?php echo
get_phrase('Select Class');?></label>
<div class="col-12 col-md-3">
<select name="class_id" class="form-control" id="class_id" onchange="return get_attendance()" >
<option value=""><?php echo get_phrase('select class');?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach($classes as $row):?>
<option value="<?php echo $row['class_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</form>
</div>
I am using datatable class for exporting and printing
<table class="table table-bordered datatable" id="table_export">
<thead>
<tr>
<th>#</th>
<th><div><?php echo get_phrase('Status');?></div></th>
<th><div><?php echo get_phrase('Student Name');?></div></th>
<th><div><?php echo get_phrase('Class Name');?></div></th>
<th><div><?php echo get_phrase('Date');?></div></th>
<th><div><?php echo get_phrase('options');?></div></th>
</tr>
</thead>
<tbody>
<?php
$count = 1;
foreach($attendance as $row):?>
$attendance is recieved from the controller in $this->load->view('backend/index', $page_data);
<tr>
<td><?php echo $count++;?></td>
<td><?php echo $row['status'];?></td>
<td><?php echo $row['student_id'];?></td>
<td><?php echo $row['class_id'];?></td>
<td><?php echo $row['date'];?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
MY JavaScript
The script below alert() the class_id and date but do not pass anything to the controller function
<script type="text/javascript">
function get_attendance() {
var class_id = $('#class_id').val();
var date = $('#date').val();
$.ajax({
type: "post",
dataType:"json",
data: {"class_id": class_id, "date": date},
url: '<?php echo base_url();?>index.php?admin/manage_attendance',
success: function (data) {
}
});
}
</script>
My Controller
If I give static value to $date and $class_id as $date = '04-04-2018'; $class_id = 2; inside manage_attendance() below it works but using $this->input->post() do nothing:
function manage_attendance()
{
if($this->session->userdata('admin_login')!=1)
redirect(base_url() , 'refresh');
$date = $this->input->post('date');
$class_id = $this->input->post('class_id');
$page_data['attendance']= $this->db->get_where('attendance', array('class_id' => $class_id , 'date' => $date))->result_array();
$page_data['page_name'] = 'manage_attendance';
$page_data['page_title'] = get_phrase('manage_daily_attendance');
$this->load->view('backend/index', $page_data);
}
Try to change
url: '<?php echo base_url();?>index.php?admin/manage_attendance'
to
url: '<?php echo base_url();?>index.php/admin/manage_attendance',
You have to append data like this using jquery:
function get_attendance() {
var class_id = $('#class_id').val();
var date = $('#date').val();
$.ajax({
type: "post",
dataType:"json",
data: {class_id: class_id, date: date},
url: '<?php echo base_url();?>index.php?admin/manage_attendance',
success: function (data) {
var resultData = JSON.parse(response);
if(resultData!=null){
attendance= resultData.length;
}
if(attendance>0){
for(i=0;i<attendance;i++){
$(".attendance_listing").append("<tr><td>"+resultData[i].status+"</td><td>"+resultData[i].student_id+"</td><td>"+resultData[i].class_id+"</td><td>"+resultData[i].date+"</td></tr>");
}
}
}
});
}
//controler
function manage_attendance()
{
if($this->session->userdata('admin_login')!=1){
redirect(base_url() , 'refresh');
$date = $this->input->post('date');
$class_id = $this->input->post('class_id');
$page_data['attendance']= $this->db->get_where('attendance', array('class_id' => $class_id , 'date' => $date))->result_array();
$page_data['page_name'] = 'manage_attendance';
$page_data['page_title'] = get_phrase('manage_daily_attendance');
echo json_encode($page_data);
}
}
I can get the same result by coding as following but I do not prefer that method/logic I want something as I have posted above
HTML
<div class="form-group">
<label for="class_id" class="col-12 col-md-2 control-label"><?php echo
get_phrase('Select Class');?></label>
<div class="col-12 col-md-3">
<select name="class_id" class="form-control" id="class_id" onchange="return get_attendance()" >
<option value=""><?php echo get_phrase('select class');?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach($classes as $row):?>
<option value="<?php echo $row['class_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</form>
</div>
<table class="table table-bordered datatable" id="table_export">
<thead>
<tr>
<th>#</th>
<th><div><?php echo get_phrase('Status');?></div></th>
<th><div><?php echo get_phrase('Student Name');?></div></th>
<th><div><?php echo get_phrase('Class Name');?></div></th>
<th><div><?php echo get_phrase('Date');?></div></th>
</tr>
</thead>
<tbody id="putdatahere">
</tbody>
</table>
JavaScript
<script type="text/javascript">
function get_attendance() {
var e = document.getElementById("class_id");
var class_id = e[e.selectedIndex].value;
var date = $('#date').val();
$.ajax({
url: '<?php echo base_url();?>index.php?admin/manage_attendance/'+ date +'/' + class_id,
success: function(response)
{
jQuery('#putdatahere').html(response);
}
});
}
</script>
CodeIgniter Controller
function manage_attendance($date, $class_id){
$query = $this->db->get_where('attendance', array('class_id' => $class_id , 'date' => $date))->result_array();
if($query){
$html_return = "";
foreach ($query as $attendance) {
$html_return .="<tr><td>";
$html_return .= $attendance['status']; //further Proccessing here e.g if $attendance['status'] == 0 echo absent otherwise present
$html_return .="</td><td>";
$html_return .= $attendance['student_id']); //further Proccessing here e.g get student name from its student_id
$html_return .="</td><td>";
$html_return .= $attendance['class_id']; //further Proccessing here e.g get class name from its class_id
$html_return .= "</td><td>";
$html_return .= $attendance['date'];
$html_return .="</td></tr>";
}
echo $html_return;
} else {
echo 'No record';
}
}
I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});
My idea is to get connectivity status of available servers in database on a php page.
<tbody>
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"><?php if (is_dir($server->base_path)){ echo 'Pass';} else { echo 'Fail' } ?></td>
</tr>
<?php } ?>
</tbody>
I want to do this just after page load using ajax like this page screenshot
How do I call ajax to get each value of this dynamically generated table. So far, I have tried the following code
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
<?php } ?>
JS
$(function(){
$(".server_status").hide();
$(".server_status_loading").show();
$.ajax({
url: 'get-server-status'
})
.error(function(){
alert('Error!');
})
.done(function(response){
$(".server_status_loading").hide();
$(".server_status").show();
$(".server_status").html(response);
});
get-server-status function:
public function getStatus() {
$basep = $this->_serverModel->getBasePath(2);
if (is_dir($basep)) {
echo 'Pass'; exit;
}
else {
echo 'Fail'; exit;
}
}
Thanks in advance!
first add id to your <tr>.
<?php foreach ($data['servers'] as $server) { ?>
<tr id="echo database id here.">
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
then check this link to handle the ajax on page load and this link to handle the ajax on click.Rest everything is provided there.
In link you can replace status to server_status_loading
try like this
$(document).ready(function(){
var hTable = document.getElementById('table2');
var iRowCount = hTable.rows.length;
for(var i=1; i<iRowCount; i++){
basepath= hTable.rows[i].cells[2].childNodes[1].value;
$.ajax({
url: 'get-server-status',
data :basepath
})
.error(function(){
alert('Error!');
})
.done(function(response){
hTable.rows[i].cells[2].childNodes[3].value=response;
});
}
}
I am working on Updating Codeigntier Cart with Jquery using Ajax call to update. Here is my jquery function
$(function() {
$('.cart_form select').on('change', function(ev) {
var rowid = $(this).attr('class');
var qty = $(this).val();
var postData_updatecart = {
'rowid' : rowid,
'qty' : qty
};
//posting data to update cart
$.ajax({
url : base_url + 'bookings/update_booking_cart',
type : 'post',
data : postData_updatecart,
beforeSend : function() {
$('#cart_content').html('Updating...');
},
success : function(html) {
//window.location.href = "postproperty.php?type="+suffix+'&page=page1';
$('#cart_content').html(html);
}
});
});
});
I have cart view file as
<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th style="text-align:left">Item Description</th>
<th style="text-align:left">QTY</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<?php $i = 1; ?>
<?php foreach ($this->cart->contents() as $items): ?>
<?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>
<tr>
<td>
<?php echo $items['name']; ?>
<?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>
<p>
<?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>
<strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />
<?php endforeach; ?>
</p>
<?php endif; ?>
</td>
<td>
<select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">
<?php
for($tt=0; $tt<=10; $tt++)
{
?>
<option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>
<?php
}
?>
</select>
</td>
<td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
<td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
</tr>
<?php $i++; ?>
<?php endforeach; ?>
<tr>
<td colspan="2"> </td>
<td class="right"><strong>Total</strong></td>
<td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>
</table>
<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>
</form>
</div>
Things are working Nice. But, lets say if I have 2 products, if i select one item's qty from 1 to 2, cart is updated and updated cart is shown using AJAX. But, if I immediately change another item's qty then it doesnt work.
The cart view file is inside class 'cart_form'.
Helping hands are appreciated.
I got an answer. You can refer below link
Ajax Request works only once
OR
Directly follow this
REPLACE jquery code part by
$(function() {
$(document).on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});