run js math function on reload/refresh - javascript

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>

Related

Can you guide me with a question, I am trying to change the color every time I press a button

My problem is that I call my function within my for, but only a part changes color and not above each record, the buttons work but the color of the corresponding row does not change, it had occurred to me to send a value that could be the pk of my table and this one that is changing in the for, if you know any way to achieve that I would really appreciate it
<!doctype html>
<html lang="es">
<head>
<body>
<?php
if (isset($_POST['submit']) && !hash_equals($_SESSION['csrf'], $_POST['csrf'])) {
die();
}
$error = false;
$config = include 'ClientesBeta/conexion/config.php';
try {
$dsn = 'mysql:host=' . $config['db']['host'] . ';dbname=' . $config['db']['name'];
$conexion = new PDO($dsn, $config['db']['user'], $config['db']['pass'], $config['db']['options']);
if (isset($_POST['marca'])) {
$consultaSQL = "SELECT * FROM zonas WHERE idZonas <> 1 and nombreZona LIKE '%" . $_POST['marca'] . "%'";
} else {
$consultaSQL = "SELECT * FROM zonas where idZonas <> 1";
}
$sentencia = $conexion->prepare($consultaSQL);
$sentencia->execute();
$alumnos = $sentencia->fetchAll();
} catch(PDOException $error) {
$error= $error->getMessage();
}
?>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<th>ID</th>
<th>Zona</th>
<th>Acción</th>
</thead>
<tbody>
<?php
if ($alumnos && $sentencia) {
foreach ($alumnos as $row) {
?>
<tr>
<td id="prueba2"></td>
<td id="prueba"></td>
<td id="prueba1"></td>
<td >
<button type="button" onclick="cambiarColor2();">Inicio</button>
<button type="button" onclick="cambiarColor();">Proceso</button>
<button type="button" onclick="cambiarColor1();">Fin</button>
</td>
<script>
function cambiarColor(){
document.getElementById('prueba').style.backgroundColor = "blue";
}
</script>
<script>
function cambiarColor1(){
document.getElementById('prueba1').style.backgroundColor = "red";
}
</script>
<script>
function cambiarColor2(){
document.getElementById('prueba2').style.backgroundColor = "green";
}
</script>
</tr>
<tr>
<td><?php echo $row['idZonas']; ?></td>
<td><?php echo $row['nombreZona']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
It is difficult to understand your question. But I believe you are looking for the below answer. Let me know if it helps you.
I think you have placed the ID in the wrong tags, though. Changed the id to where you want to change the colour. I haven't tested the code also.
<?php
if ($alumnos && $sentencia) {
foreach ($alumnos as $key => $row) {?>
<tr>
<td id="prueba2_<?php echo $key; ?>"></td>
<td id="prueba0_<?php echo $key; ?>"></td>
<td id="prueba1_<?php echo $key; ?>"></td>
<td>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 2, 'green');">Inicio</button>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 0, 'blue');">Proceso</button>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 1, 'red');">Fin</button>
</td>
</tr>
<tr>
<td><?php echo $row['idZonas']; ?></td>
<td><?php echo $row['nombreZona']; ?></td>
<td> </td>
</tr>
<?php
}
}
?>
<script>
function cambiarColor(id, eleid color){
document.getElementById('prueba'+eleid+'_'+id).style.backgroundColor = color;
}
</script>

Refresh sub php page onchange

I'd like to get an interactive block in my page that onchange of one of the 3 search fields only reloads the div 'mydata' and reruns the query with a new filter. I know it probably can be done with ajax but i'm stuck in finding the right piece of code.
Here's my testcode
Main php file users2.php:
<head>
<title>Test</title>
<script src="../jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="../jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$.ready(function() {
// create the on change event
$('#search_name').on('change', function() {
// get the new information from the server
$.ajax({
url: 'users_functions2.php?id=' + $('#search_name').val(),
success: function(data){
// this code is run when you get the reply;
$('#mydata').html(data);
}
});
});
});
</script>
</head>
<body>
<?PHP
include '../conf/config.inc.php';
include 'users_functions2.php';
?>
</body>
And here the include file users_functions2.php:
<?php
echo "<div id='mydata'>";
echo "<table><tr><th>ID</th><th>Name</th><th>City</th></tr>";
echo "<tr>";
echo "<td><input type=text placeholder='search' name=search_id</td>";
echo "<td><input type=text placeholder='search' name=search_name</td>";
echo "<td><input type=text placeholder='search' name=search_city</td>";
echo "</tr>";
$sql="select id, name, city from users;";
if (isset($_GET['search_name'])) { $sql .= "WHERE vo_name LIKE \"%".$_GET['search_name']."%\""; }
$res = my_query($sql);
while($row = mysqli_fetch_array($res)) {
echo "<tr><td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['city']."</td></tr>";
}
echo "</table>";
echo "</div>";
?>
Hope Chris is ok with this, i'd like my question being answered with a working example:
File 1:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// create the on change event
$('#search_name').on('change', function() {
// get the new information from the server
$.ajax({
url: 'users_functions2.php?search_name=' + $('#search_name').val(),
success: function(data){
// this code is run when you get the reply;
$('#mydata').html(data);
}
});
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th><th>Name</th><th>City</th>
</tr>
<tr>
<th><input type=text placeholder='search' name=search_id></th>
<th><input type=text placeholder='search' id='search_name' name=search_name></th>
<th><input type=text placeholder='search' name=search_city></th>
</tr>
</thead>
<tbody id="mydata">
<?PHP
include 'users_functions2.php';
?>
</tbody>
</table>
</div>
</body>
File 2:
<?php
include '../conf/config.inc.php';
$sql="SELECT id, `name`, city FROM users";
$search_name = filter_input(INPUT_GET, 'search_name');
if ($search_name) {
$sql .= " WHERE vo_name LIKE \"%$search_name%\"";
}
$res = my_query($sql);
while($row = mysqli_fetch_array($res)) {
extract($row);
echo "<tr><td>$id</td><td>$name</td><td>$city</td></tr>";
}
?>

insert jquery value to php variable

<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();

Cart is updated only once using Jquery and Codeigniter

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
});
});

How to update an array table dynamically with ajax and jquery?

I have two files php (gettable.php and index.php) the index file display the result obtained by gettable.php every one seond, I want update the content of my table dynamically in the index (only new or changed value must be changed) using ajax, I am beginner in ajax.
Help me please
thank you
gettable.php
//
//
// I load data from the server(xml file)
$xml = simplexml_load_string($result);
foreach($xml as $node)
{
$name = "";
$value = -1;
foreach($node->attributes() as $a => $b) {
if($a == "name")
{
$name = (string)$b;
}
else if($a == "value")
{
$value = (string)$b;
}
}
$vars[$name] = $value;
}
?>
<table border="1">
<tr>
<th>id</th>
<th>abc</th>
<th>def</th>
</tr>
<tr>
<td><?php
echo "<p>x: ".$vars["x"]."</p>";
?>
</td>
<td><?php
echo "<p>y: ".$vars["y"]."</p>";
?>
</td>
<td><?php
echo "<p>z: ".$vars[z"]."</p>";
?>
</td>
</tr>
</table>
file index.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="JavaScript">
$('#data').load("gettable.php");
setInterval( "SANAjax();", 1000 );
$(function() {
SANAjax = function(){
$('#data').load("gettable.php");
}
});
</script>
</head>
<body>
<div id="data">
<?php include_once('gettable.php'); ?>
</div>
</body>
The script code should like this
$(function(){
function loadData(){
$('#data').load("gettable.php");
}
setInterval(function() { loadData(); }, 1000 );
});

Categories