I have number of rows in a table fetched from database. I need to display output of each row beside dat table only. output data also fetching from database.
Example: If i click first row means i want detail information about that row next to that table.
<script type="text/javascript">
$(function() {
$('#showmenu').click(function() {
$(".menu").slideToggle();
});
});
</script>
PHP Code: First Table(Displaying Data)
$query = "select * from orders_list";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400'>
<tr class='tr_class' bgcolor='#0066CC'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> order_id </td>
<td align='center' style='font-weight:bold'> customer_name </td>
<td align='center' style='font-weight:bold'> no_of_pack </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> Weight </td>
<td align='center' style='font-weight:bold'> payment mode </td>
</tr>";
while($row = mysql_fetch_array($result))
{
$order_id = $row['order_id'];
echo "<tr>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['order_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['number_of_pack']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['weight']."</td>
<td align='center'>".$row['payment']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
code for output to display in same page:
$_SESSION['order_id'] = $order_id;
echo $_SESSION['order_id'];
$query = "select * from orders_details where order_id=$order_id";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div class='menu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400'>
<tr class='tr_class' bgcolor='#0066CC'>
<td align='center' style='font-weight:bold'> Product </td>
<td align='center' style='font-weight:bold'> Quantity </td>
<td align='center' style='font-weight:bold'> Sku </td>
<td align='center' style='font-weight:bold'> Price </td>
<td align='center' style='font-weight:bold'> Total </td>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['product']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['sku']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['total']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
Pls help me out..
There are two solutions one is to create row next to each row with $order_id and inside you include your second script. You also hide that row with style="display:none" and then in javascript you hide or show next row (you can inslude whole table in one td with colspan="7")
$('#table_struct tr.input').click(function() {
$(this).next().toggle();
});
Second option is to have your second script in different file and run ajax request with order_id of selected row. You can display that second table inside dialog box. Or if you want it to be next to the row then you can set postion of it using javascript:
$('#table_struct tr').click(function() {
var $this = $(this);
var offset = $this.offset();
var height = $this.height();
var order_id = $this.data('order_id');
$('.menu').remove();
$.get('your_second_script.php?order_id=' + order_id, function(table) {
$('#showmenu').append(table);
$('.menu').css({
position: 'absolute',
left: offset.left,
top: offset.top+height
});
});
});
tr will need to have data-order_id attribute.
You may find something like this-
In your first table
<tr class='tr_class' bgcolor='#0066CC' data-id="<?=$row['order_id']?>">
Your jQuery-
$('#tr_class').click(function(){
var rowId = $(this).data('id');
$.ajax({
url: "targetScript.php",
data:{rowId: rowId},
type: 'POST',
success: function(data){
$('#table_second').html("");
$('#table_second').html(data);
}
});
});
targetScript.php -
<?php
if(isset($_POST['rowId'])){
$order_id = $_POST['rowId'];
$query = "select * from orders_details where order_id=$order_id";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
$html = "";
if($num_rows >= 1){
$html.="<tr class='tr_class' bgcolor='#0066CC'>
<td align='center' style='font-weight:bold'> Product </td>
<td align='center' style='font-weight:bold'> Quantity </td>
<td align='center' style='font-weight:bold'> Sku </td>
<td align='center' style='font-weight:bold'> Price </td>
<td align='center' style='font-weight:bold'> Total </td>
</tr>";
while($row = mysql_fetch_array($result)){
$html.="<tr>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['product']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['sku']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['total']."</td>"."</tr>";
}
}print $html;
}
?>
Related
I am using AJAX to call a PHP file that pulls a summary of calls from a MySQL database. The AJAX routine then inserts the returned table with an HTML form for each row in the table into the original webpage. Each row has a submit button to open the actual record and display all info so it can be edited. When I code this just in HTML without the AJAX update it works perfectly but I need to refresh the webpage to update the data. I want the data refreshed every 5 seconds automatically without needing to refresh the entire page. When I move the code to the AJAX routine the table pulls in perfectly with the data and the submit buttons for each row but the submit buttons don't do anything.
Code calling AJAX routine in main HTML page
const interval = setInterval(function() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("unitstatus").innerHTML = this.responseText;
}
xhttp.open("GET", "updatestatus.php");
xhttp.send();
}, 5000);
Code Displaying Response in main HTML page
<div id='unitstatus' name='unitstatus'></div>
PHP File called by AJAX
<?php
session_start();
$event = $_SESSION['event'];
set_include_path('./includes/');
include 'conn.inc';
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * from sags WHERE Complete='N' AND event='$event' ORDER BY bib";
?>
<!DOCTYPE html >
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<table width='100%' border='1'>
<tr>
<td width='100%' height='45px' colspan='8' class='w3-center'>
<button class='w3-button w3-blue w3-text-white w3-medium w3-padding-8' name='addnew' id='addnew' onclick='gotonewcall()'>ADD NEW REQUEST</button>
</td>
</tr>
<tr>
<td width='6%' class='w3-padding-small w3-small'><b>ID</b></td>
<td width='14%' class='w3-padding-small w3-small'><b>NAME</b></td>
<td width='6%' class='w3-padding-small w3-small'><b>BIB</b></td>
<td width='12%' class='w3-padding-small w3-small'><b>CELL PHONE</b></td>
<td width='24%' class='w3-padding-small w3-small'><b>CALL</b></td>
<td width='18%' class='w3-padding-small w3-small'><b>LAST UPDATE</b></td>
<td width='15%' class='w3-padding-small w3-small'><b>STATUS</b></td>
<td width='5%'></td>
</tr>
<?php
if(mysqli_query ($conn, $sql)){
$result = mysqli_query ($conn, $sql);
while($row=mysqli_fetch_array($result)){
if ($row['status']=="ONLOCATION"){
$status = "ON LOCATION";
} else {
$status = $row['status'];
}
?>
<form action="editrequest.php" method="post">"
<tr>
<td width='6%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['id'] ?><input type='text' name='id' id='id' style='width:100%' class='w3-light-gray' value=<?php echo $row['id'] ?> hidden></b></td>
<td width='14%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['fName'] ?></b></td>
<td width='6%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['bib'] ?></b></td>
<td width='12%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['cellphone'] ?></b></td>
<td width='24%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['sagrequest'] ?></b></td>
<td width='18%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['statstime'] ?></b></td>
<?php
if ($status == "ON LOCATION"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-white w3-red'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "ENROUTE"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-yellow'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "NEW"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-white'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "RECEIVED"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-gray'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "TRANSPORTING"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-white w3-purple'>";
echo "<b>" . $status . "</b>";
echo "</td>";
}
?>
<td width='5%' class='W3-center w3-tiny'>
<input type="submit" value="OPEN" name="editentry" id="editentry" class="w3-button w3-blue w3-center" style="width:100%; height:100%">
</td>
</tr>
</form>
<?php
}
} else {
echo "<tr><td colspan='8' class='w3-center'><h3><b>NO ACTIVE CALLS</b></h3></td></tr>";
}
?>
</table>
<?php
mysqli_close();
?>
I will do something like this, working example here.
PHP file
<?php
session_start();
$event = $_SESSION['event'];
set_include_path('./includes/');
include 'conn.inc';
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * from sags WHERE Complete='N' AND event='$event' ORDER BY bib";
if(mysqli_query ($conn, $sql)){
$result = mysqli_query ($conn, $sql);
while($row=mysqli_fetch_array($result)){
if ($row['status']=="ONLOCATION"){
$status = "ON LOCATION";
} else {
$status = $row['status'];
}
?>
<tr>
<td width='6%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['id'] ?>
</b></td>
<td width='14%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['fName'] ?></b></td>
<td width='6%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['bib'] ?></b></td>
<td width='12%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['cellphone'] ?></b></td>
<td width='24%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['sagrequest'] ?></b></td>
<td width='18%' class='w3-padding-small w3-small w3-text-black'><b><?php echo $row['statstime'] ?></b></td>
<?php
if ($status == "ON LOCATION"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-white w3-red'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "ENROUTE"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-yellow'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "NEW"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-white'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "RECEIVED"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-black w3-gray'>";
echo "<b>" . $status . "</b>";
echo "</td>";
} elseif ($status == "TRANSPORTING"){
echo "<td width='15%' class='w3-padding-small w3-small w3-text-white w3-purple'>";
echo "<b>" . $status . "</b>";
echo "</td>";
}
?>
<td width='5%' class='W3-center w3-tiny'>
<form action="editrequest.php" method="post">
<input type='text' name='id' id='id' style='width:100%' class='w3-light-gray' value=<?php echo $row['id'] ?> hidden>
<input type="submit" value="OPEN" name="editentry" id="editentry" class="w3-button w3-blue w3-center" style="width:100%; height:100%">
</form>
</td>
</tr>
<?php
}
} else {
echo "<tr><td colspan='8' class='w3-center'><h3><b>NO ACTIVE CALLS</b></h3></td></tr>";
}
?>
JavaScript
const interval = setInterval(function() {
$("#tableForm").load("updatestatus.php");//Load since just updating data
//You can use $.get() as well
//Or use $.post() if you have some data to send to php file.
//and append response with .html()
}, 5000);
HTML
<!DOCTYPE html >
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<table width='100%' border='1'>
<tr>
<td width='100%' height='45px' colspan='8' class='w3-center'>
<button class='w3-button w3-blue w3-text-white w3-medium w3-padding-8' name='addnew' id='addnew' onclick='gotonewcall()'>ADD NEW REQUEST</button>
</td>
</tr>
<tr>
<td width='6%' class='w3-padding-small w3-small'><b>ID</b></td>
<td width='14%' class='w3-padding-small w3-small'><b>NAME</b></td>
<td width='6%' class='w3-padding-small w3-small'><b>BIB</b></td>
<td width='12%' class='w3-padding-small w3-small'><b>CELL PHONE</b></td>
<td width='24%' class='w3-padding-small w3-small'><b>CALL</b></td>
<td width='18%' class='w3-padding-small w3-small'><b>LAST UPDATE</b></td>
<td width='15%' class='w3-padding-small w3-small'><b>STATUS</b></td>
<td width='5%'></td>
</tr>
<div id="tableForm"><!-- I will load form here from php --></div>
</table>
Edit:-
Explanation
In the inspect element I saw <form .....> ... but no </form>, I tried lot things to make it a clear defined form but failed. There is some part of your code which is breaking the input element so I declared it separately since the form has only 1 input.
Suggestion
Echo out only the needed code from ajax requested file.
Avoid using <b> why? idk but better use font-weight:bold
Use $.ajax() $.post() $.get() more easy way to AJAX requests.
Because you are adding new elements to the DOM, you'll need register event handlers for each new added button.
However there is another method you can use is to register event listener on the table itself only once and capture events originated from buttons:
const templ = document.getElementById("templ").content;
const result = document.getElementById("result");
//event listener on parent
document.getElementById("table2").addEventListener("click", buttonClicked2);
function add(parent, addEvent)
{
parent = document.getElementById(parent);
const row = templ.cloneNode(true);
row.querySelector("td").textContent = "row " + (parent.children.length+1);
//event listener on button
if (addEvent)
row.querySelector("button").addEventListener("click", buttonClicked);
parent.tBodies[0].appendChild(row);
}
function buttonClicked(e) {
result.textContent = "table=" + e.target.parentNode.offsetParent.id + " row=" + e.target.parentNode.parentNode.rowIndex;
}
function buttonClicked2(e) {
result.textContent = e.target.tagName; //this will show which element clicked unless button was clicked
if (e.target.tagName != "BUTTON")
return;
result.textContent = "table=" + e.target.parentNode.offsetParent.id + " row=" + e.target.parentNode.parentNode.rowIndex;
}
.flex {
grid-gap: 1em;
display: flex;
}
Clicked button at <span id="result"></span>
<div class="flex">
<div>Events from button
<button onclick="add('table1', true)">Insert</button>
<table id="table1">
<thead><tr><th>col1</th><th>col2</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div>Events from table
<button onclick="add('table2', false)">Insert</button>
<table id="table2">
<thead><tr><th>col1</th><th>col2</th></tr></thead>
<tbody></tbody>
</table>
</div>
<template id="templ"><tr><td></td><td><button>click me</button></td></tr></template>
</div>
I have a table where I can check a checkbox and it will log all of the contents in the row. Once you check a checkbox, another column (Quantity #) appears with a textbox/spinner inside the cell. If it is unchecked, then the corresponding textbox/spinner disappears.
I want to use session storage to be able to keep any cells in the Quantity # column visible if the row is checked throughout refreshes until the page is closed. I was able to use session storage to keep the checkboxes checked, but am having a problem with getting the Quantity # column to remain visible so long as the checkbox is checked for that row.
How can I do this?
I have included the HTML for the checkbox row and the JavaScript that keeps the checkboxes checked so it can be used to base an answer off of if needed.
HTML for the checkbox and the appearing table cell:
<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="quantity_num ui-widget-content" name="rows[0][0][quant]" style="display: none;"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
JavaScript for the session storage for the checkbox and for the spinner in the appearing table cell:
$(function(){
$(':checkbox').each(function() {
// Iterate over the checkboxes and set their "check" values based on the session data
var $el = $(this);
$el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
});
$('input:checkbox').on('change', function() {
// save the individual checkbox in the session inside the `change` event,
// using the checkbox "id" attribute
var $el = $(this);
sessionStorage[$el.prop('id')] = $el.is(':checked');
});
});
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'));
var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
console.log(quantity);
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
$(this).closest("tr").find(".spinner" ).spinner({
spin: function( event, ui ) {
if ( ui.value > quantity ) {
$( this ).spinner( "value", quantity );
return false;
} else if ( ui.value <= 1 ) {
$( this ).spinner( "value", 1 );
return false;
}
}
});
});
});
EDIT:
HTML/PHP for table:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="loc ui-widget-content"><input type="hidden"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>
When i click first row it shows the output.
When i click second, it is also showing, but the first row is not hided.
It's still displaying.
It should happen for all the rows, not only the first two.
JavaScript code:
$('#table_struct tr').click(function() {
var $this = $(this);
var offset = $this.offset();
var height = $this.height();
var order_id = $this.data('order_id');
$('.menu').remove();
$.get('getuser.php?order_id=' + order_id, function(table) {
$('#showmenu').append(table);
$('.menu').css({
right: offset.right,
top: offset.top+height
});
});
});
index.php
include "db.php";
$query = "select * from orders_list";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> order_id </td>
<td align='center' style='font-weight:bold'> customer_name </td>
<td align='center' style='font-weight:bold'> no_of_pack </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> Weight </td>
<td align='center' style='font-weight:bold'> payment mode </td>
</tr>";
while($row = mysql_fetch_array($result))
{
$order_id = $row['order_id'];
$_SESSION['order_id'] = $order_id;
echo "<tr height='20' data-order_id='".$row['order_id']."'>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['order_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['number_of_pack']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['weight']."</td>
<td align='center'>".$row['payment']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
if(!mysql_close($con))
{
echo "failed to close";
}
getuser.php
include "db.php";
$order_id = intval($_GET['order_id']);
$query = "select * from orders_details where order_id=$order_id";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div class='menu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='650' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Product </td>
<td align='center' style='font-weight:bold'> Quantity </td>
<td align='center' style='font-weight:bold'> Sku </td>
<td align='center' style='font-weight:bold'> Price </td>
<td align='center' style='font-weight:bold'> Total </td>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr height='30'>
<td align='center'>".$row['product']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['sku']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['total']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
JQuery has a previous selector...maybe you can use that?
Code taken from jquery documentation page: $( "li.third-item" ).prev().css( "background-color", "red" );
Basically you could do: $('something').click(function() { $(this).prev().hide(); }) or $(this).parent().prev().hide();
I'm not completely sure how PHP works, but if the table you are making is being made dynamicaly (after your javascript has run) then your jquery selector isn't working..
$('#table_struct tr').click(function()
Use jquery to select the table's container and apply like this instead!
$('#tableContainer').on('click', 'tr', function(){/*things*/})
By binding the click-event on a "container"s any given child, you know that even if things are added to the container after the pageLoad, the elements will be clickable as the event is bound to the parent, not the element itself.
I have a table like the following:
<script>
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get();
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get();
// Then add it to the shown table
var baseurl='<?php echo base_url()."index.php/account/insert_voucher";?>';
$.ajax({
type: "POST",
url: baseurl,
data: $('#edit *').serialize() ,
cache: false,
success: function(html) {
alert(html);
}
});
$(this).val("Edit");
}
else $(this).val("Update");
});
</script>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" class="tbl_grid" id="shown">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="22%" height="25" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin">Voucher Type</td>
<td width="37%" align="center" class="admin">Voucher Mode</td>
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id; ?></td>
<td><?php echo $eachrecord->voucher_type; ?></td>
<td><?php echo ucwords($eachrecord->voucher_mode); ?></td>
</tr>
<?php }
}
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0"
id="edit">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="27%" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin" >Voucher Type</td>
<td width="47%" align="center" class="admin" >Voucher Mode</td>
<!-- <td width="41%" align="center" class="narmal"> <strong>Actions</strong></td>-->
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id ; ?><input type="hidden" name="voucher_id[]" value="<?php echo $eachrecord->voucher_id; ?>" /></td>
<td><input name="vouchertype[]" type="text" value="<?php echo $eachrecord->voucher_type; ?>" /></td>
<td><select name="mode[]" >
<option value="paidin" <?php if($eachrecord->voucher_mode=='paidin') { ?> selected="selected" <?php } ?>>Paid In</option>
<option value="paidout" <?php if($eachrecord->voucher_mode=='paidout') { ?> selected="selected" <?php } ?>>Paid Out</option>
</select></td>
</tr>
<?php } }
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
</td>
</tr>
<input id="update" type="submit" name="submit" value="Edit"/
In first table I am displaying values from database. But when user click on edit button below the table, Then that table values should be editable for user. I have succeeded in making editable fields but again when user click on submit then updated values are not displaying in first table. I know it's possible with jQuery or JavaScript. When I alert(newsales), the alert is undefined.
An easy way to handle this would be have two separate tables, and toggle between them when you edit a table. So for example we have a table that shows our normal data called shown and one with the input and select for a user to enter data called edit. These tables will share the same button, and when clicked it will toggle between the tables, making it look like it's switching between edit and show mode. This way we can just copy the values from the edit table to the text in the shown table. Here is an example:
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
// Get the data from the edit table
var newSales = $("#edit tr:nth-child(1) td input[name='vouchertype']").val();
var newPay = $("#edit tr:nth-child(1) td select[name='mode']").val();
var newTax = $("#edit tr:nth-child(2) td select[name='tax']").val();
// Then add it to the shown table
$("#shown tr:nth-child(1) td:nth-child(2)").text(newSales);
$("#shown tr:nth-child(1) td:nth-child(3)").text(newPay);
$("#shown tr:nth-child(2) td:nth-child(1)").text(newTax);
$(this).val("Edit");
}
else $(this).val("Update");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shown">
<tr>
<td>Sr no</td><td>Sales</td><td>Paid in</td>
</tr>
<tr><td>Taxed</td></tr>
</table>
<table id="edit">
<tr>
<td>Sr no</td><td><input type="text" name="vouchertype" value="Sales" /></td>
<td>
<select name="mode">
<option value="paidin">Paidin</option>
<option value="paidout">Paidout</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="tax">
<option value="Taxed">Taxed</option>
<option value="Not Taxed">Not Taxed</option>
</select>
</td>
</tr>
</table>
<input id="update" type="submit" name="submit" value="Edit"/>
Notice: This is an answer to the original question, which is quite different then the new question added in as an edit.
I want to submit a form after some interval periodically.
I have tried as follows.
<script language="JavaScript">
function fncAutoSubmitForm()
{
//alert('test alert');
alert("B : "+document.getElementById('myform').id);
document.getElementById('myform').submit();
alert("A : "+document.getElementById('myform').id);
setTimeout("fncAutoSubmitForm();",5000);}
</script>
displayPage.php code as follows
<body onload="fncAutoSubmitForm();">
<form id="myform" name="myform" action="code.php" method="post">
some controls
</form>
</body>
here, "displayPage.php" submits the page to "code.php"
"code.php" performs required action and redirects to "displayPage.php"
It works fine when I dont use autosubmit. i.e. fncAutoSubmitForm() function
but when I use fncAutoSubmitForm() "displayPage.php" disappears
here is the actual code
<form action="code.php" method="post" id="myform" name="myform" onload='setGenLeadId();'>
<tr><td colspan="2"><?php if($row1['lead_call_type']=="C"){echo"<font color=red>CALLBACK Lead</font>";}?></td>
<td align = "right"><strong>Lead Id :</strong> </td>
<!--<td><b><font color="red"></font>Reference Number</b></td>-->
<td align="left"><?php echo "" . $row1['lead_id'] ."";?></td>
</tr>
<tr>
<td align="right" ><b>Name :</b></td>
<td align="left"><input name="custname" id="custname" class="textbox" style="width: 100%;height: 25%;" maxlength="140" type="text" value="<?php echo htmlspecialchars($row1['lead_fname'])?>"></td>
<td align="right"><b>Phone :</b></td>
<td align="left"><input name="phone" id="phone" style="width: 100%;height: 25%;" maxlength="10" type="text" value = "<?php echo "" . $row1['lead_phone1'] ."";?>" ></td>
</tr>
<tr>
<td align="right"><b>City :</b></td>
<td align="left">
<input name="city" id="city" class="textbox" style="width: 100%;height: 25%;" maxlength="140" type="text" value="<?php echo "" . $row1['lead_city'] ."";?>">
</td>
<td align="right"><b>State :</b></td>
<td align="left" >
<input name="state" id="state" class="textbox" style="width: 100%;height: 25%;" maxlength="140" type="text" value="<?php echo "" . $row1['lead_state'] ."";?>">
</td>
</tr>
<tr>
<td align="right"><b>Email-ID :</b></td>
<td align="left" ><input name="email" id="email" style="width: 100%;height: 25%;" class="textbox" type="text" value = "<?php echo "" . $row1['lead_email'] ."";?>"></td>
<td align="right"><b>Source </b></td>
<td ><input type="text" name="source" id = "source" style ="width:100%;resize: none;" maxlength="900" value="<?php echo "". $row1['lead_source'] ."";?>"></td>
</tr>
<tr>
<td align="right"><b>Address : </b></td>
<td>
<textarea type="text" name="address" id = "address" style ="width:100%;resize: none;" maxlength="900" ><?php echo "". $row1['lead_address1'] ."";?></textarea>
</td>
<td align="right"><b>Zip Code :</b></td>
<td align="left"><input name="zip" id="zip" class="textbox" style="width: 100%;height: 25%;" maxlength="140" type="text" value="<?php echo htmlspecialchars($row1['lead_zip'])?>"></td>
<!--<td align="right"><b>Phone :</b></td>
<td align="left"><input name="phone" id="phone" style="width: 100%;height: 25%;" maxlength="10" type="text" value = "<?php //echo "" . $row1['lead_phone1'] ."";?>" ></td>-->
</tr>
<tr>
<td align="right"><b>Rounds :</b></td>
<td>
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='rounds'");
$k=0;
echo "<select style='width: 100%;' id='rounds' name ='rounds'>";
echo "<option value=".$row1['lead_rounds']." selected>".$row1['lead_rounds']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
<td align="right"><b>Preparing For IIT-JEE :</b></td>
<td align="left">
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='IIT-JEE'");
$k=0;
echo "<select style='width: 100%;' id='PrepIIT' name ='PrepIIT'>";
echo "<option value=".$row1['lead_prep_iit']." selected>".$row1['lead_prep_iit']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td align="right"><b>Which Standard :</b></td>
<td align="left" >
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='standered'");
$k=0;
echo "<select style='width: 100%;' id='standared' name ='standared'>";
echo "<option value=".$row1['lead_standared']." selected>".$row1['lead_standared']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
<td align="right"><b>Promo DVD :</b></td>
<td align="left">
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='PromoDVD'");
$k=0;
echo "<select style='width: 100%;' id='dvd' name ='dvd'>";
echo "<option value=".$row1['lead_dvd']." selected>".$row1['lead_dvd']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td align="right"><b>Percentage in 10th :</b></td>
<td align="left" ><input name="tenth" id="tenth" maxlength="5" style="width: 100%;height: 25%;" class="textbox" type="text" value = "<?php echo "" . $row1['lead_tenth'] ."";?>"></td>
<td align="right"><b>Percentage in 12th :</b></td>
<td align="left" ><input name="twelth" id="twelth" maxlength="5" style="width: 100%;height: 25%;" class="textbox" type="text" value = "<?php echo "" . $row1['lead_twelth'] ."";?>"> </td>
<!--<td align="right"><b>Time of Call</b></td>
<td align="left" ><input name="calltime" id="calltime" style="width: 100%;height: 25%;" class="textbox" type="text" value = "<?php// echo "" . $row1['lead_import_batch_start_date'] ."";?>" readonly> </td> -->
</tr>
<tr>
<td align="right"><b>JEE appearing year :</b></td>
<td align="left" >
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='JeeYear'");
$k=0;
echo "<select style='width: 100%;' id='jeeyear' name ='jeeyear'>";
echo "<option value=".$row1['lead_jee_year']." selected>".$row1['lead_jee_year']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
<td align="right"><b>Joined any classes :</b></td>
<td align="left">
<?php
$query = mysql_query("SELECT param_field_value,param_field_itemdata FROM cti_service_parameters where param_service_id=$service_id and param_field_name='JoinedClasses'");
$k=0;
echo "<select style='width: 100%;' id='classes' name ='classes'>";
echo "<option value=".$row1['lead_classes']." selected>".$row1['lead_classes']."</option>";
while($row = mysql_fetch_array($query))
{
$value[$k] = $row['param_field_value'];
$item[$k] = $row['param_field_itemdata'];
if($field_val == $item[$k])
echo "<option value='$value[$k]' selected>$value[$k]</option>";
else
echo "<option value='$value[$k]'>$value[$k]</option>";
$k = $k + 1;
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td align="right"><b>Remarks :</b></td>
<td colspan="3"><textarea type="text" name="remarks" id = "remarks" style ="width:100%;resize: none;" maxlength="900" ><?php echo "". $row1['lead_remarks'] ."";?></textarea> </td>
</tr>
<tr>
<td colspan=4 class="tableHeading">
<!--<b><font color="red">Note : Fields with * are Mandatory</font></b>-->
</td>
</tr>
<!--<input type="hidden" id="clinicFlag" name="clinicFlag" value="<?php// echo $_GET["clinicFlag"]?>">-->
<tr>
<tr>
<td colspan=4 style="padding:0px">
<div align="center">
<input title="Save [Alt+S]" accessKey="S" class="crmbutton small save" type="button" name="save" value=" Save " style="width:100px;height:30px" >
</td>
</div>
</tr>
</table>
</div>
and Code.php code is as follows
<?php
//session_start();
//echo $_SESSION['user'];
include("connection.php");
$lead = $_POST['lead'];
$callnumber = $_POST['callnumber'];
$service = $_POST['service'];
$lead_fname = $_POST['custname'];
$lead_phone1 = $_POST['phone'];
$lead_city = $_POST['city'];
$lead_email = $_POST['email'];
$lead_state = $_POST['state'];
$lead_address1 = $_POST['address'];
$lead_zip = $_POST['zip'];
$lead_rounds = $_POST['rounds'];
$lead_IIT = $_POST['PrepIIT'];
$lead_standared = $_POST['standared'];
$lead_dvd = $_POST['dvd'];
$lead_tenth = $_POST['tenth'];
$lead_twelth = $_POST['twelth'];
$lead_jee_year = $_POST['jeeyear'];
$lead_classes = $_POST['classes'];
$lead_remarks = $_POST['remarks'];
$lead_source = $_POST['source'];
if($GLOBALS['database_type'] == "MySql")
{
$con=mysql_connect($GLOBALS['database_ip'],$GLOBALS['database_username'],$GLOBALS['database_password']);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($GLOBALS['database_name'],$con);
$sql1 = mysql_query("SELECT service_outbound_lead_dsn_string,
service_outbound_lead_db_user,
service_outbound_lead_db_password,
service_leadstructure_master_tablename,
service_outbound_lead_db_name
FROM cti_services WHERE service_id = $service");
while($row = mysql_fetch_array($sql1))
{
$lead_dsn = $row['service_outbound_lead_dsn_string'];
$lead_user = $row['service_outbound_lead_db_user'];
$lead_pwd = $row['service_outbound_lead_db_password'];
$lead_table = $row['service_leadstructure_master_tablename'];
$lead_db = $row['service_outbound_lead_db_name'];
}
if($_POST['save'])
{
//input_app_datetime = '$lead_appointment',
//input_app_reschedule = '$lead_reschedule',
mysql_select_db($GLOBALS['database_name'],$con);
$sqlquery = ("UPDATE $lead_db.$lead_table set lead_fname = '$lead_fname', lead_phone1 = '$lead_phone1', lead_email = '$lead_email', lead_remarks = '$lead_remarks', lead_address1 = '$lead_address1', lead_state = '$lead_state', lead_city = '$lead_city', lead_zip = '$lead_zip', lead_rounds ='$lead_rounds', lead_prep_iit ='$lead_IIT', lead_standared ='$lead_standared', lead_dvd ='$lead_dvd', lead_tenth ='$lead_tenth', lead_twelth ='$lead_twelth', lead_jee_year ='$lead_jee_year', lead_classes ='$lead_classes', lead_source ='$lead_source' WHERE lead_id=$lead");
$dbSql = mysql_query($sqlquery) or die("Error : " . mysql_error());
$sql="update cti_call_master set crm_remarks='$lead_remarks' where call_number=$callnumber";
$dbSql1 = mysql_query($sql);
//$flag = "saved";
$message = "Lead Id-".$lead." Data Saved .....";
//$message = $sqlquery;
//header("location:vision.php?LEADID=$lead&SERVICEID=$service&CALLNUMBER=$callnumber&MESSAGE=$message&FLAG=$flag&CLI=$lead_phone1&clinicFlag=$clinicFlag&alterno=$alter_no");
header("location:displayPage.php?LEADID=$lead&SERVICEID=$service&CALLNUMBER=$callnumber&MESSAGE=$message&FLAG=$flag&CLI=$lead_phone1");
}
}
?>
You can call the following function at 'onload' event. It will submit the form after 5 second to your code.php
function fncAutoSubmitForm() {
setTimeout(function(){
document.getElementById('myform').submit();
}, 5000);
}
Then your code.php will process the form action and redirect it back to displayPage.php.
Can you check if your form is not submitted at all to code.php or it is being submitted to code.php and due to some error it fails to redirect back to displayPage.php. In the later case you can turn ON the display error settings if it is not already ON. Use following in code.php to enable:
error_reporting(E_ALL);
ini_set('display_errors',1);
It it doesn't help then pls provide the code to get the actual scenario here.
As you call fncAutoSubmitForm() onload of displayPage.php, it immediately triggers document.getElementById('myform').submit();
So you are redirected to code.php, the action of your form.
If you want a delay you should not apply fncAutoSubmitForm() onload of the page.
but more something like:
setTimeout("fncAutoSubmitForm();",5000);}
function fncAutoSubmitForm(){
document.getElementById('myform').submit();
}
But you won't stay on displayPage.php it will redirect you to code.php. If you want to always display the same page you needs to change the action target in your form.
Use jQuery :)
$(document).ready(function(){
setInterval(function(){
submit();
}, 1000);
});
function submit(){
var data;
// extract data from your form and save it to data variable
$.ajax({
type: "POST",
url: "some.php",
data: data
});
}