I have 2 files. index.php is my table that is generated in php from database, which works fine. Then edit page that updates to database, also working fine. both files have javascript for websocket which work fine. however after edit form is submitted i want to update index.php table using websocket but it does not update table. Below are my two files
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<table width="100%" class="table table-striped table-bordered table-hover mytables" id="dataTables-example">
<thead>
<tr>
<th> name</th>
</tr>
</thead>
<tbody >
<?php
if(!empty($table_data)){
foreach($table_data as $key=> $value){
$name = $value['name'];
?>
<tr class="odd gradeX">
<td><?php echo $name; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
// connection is open
websocket.onopen = function(ev) {
console.log('socket is open');
}
// Message received from server
websocket.onmessage = function(ev) {
$('#dataTables-example').load ('index.php', '#dataTables-example');
};
websocket.onerror = function(ev){
console.log('socket is error');
};
websocket.onclose = function(ev){
console.log('socket is closed');
};
</script>
</body>
</html>
edit.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>names</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><br>
<form accept-charset="UTF-8" role="form" id="search" name="search" action="edit.php" method="post">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control">
</div>
<center><button class="btn btn-success btn-md" type="submit" name="submit" id="submit">Save</button></center>
</form>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(){
send_message();
});
//create a new WebSocket object.
var wsUri = "ws://localhost:9000/server.php";
websocket = new WebSocket(wsUri);
});
function send_message(){
websocket.send('update tables');
console.log('sending to message to index');
}
</script>
</body>
</html>
Related
I am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>
I am trying to run an ajax script from javascript inside a PHP file :
$(document).on('click', '.goto_date', function(){
var datechosen= $('#pickdate').val();
alert(datechosen);
$.ajax({
url:"vdater.php",
method:"POST",
dataType:"json",
data:{'datechosen':datechosen},
success:function(data){
alert('success');
}
});
});
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
</body>
</html>
But when I run the code nothing happens apart from the alert box referring that the ajax script is reachable in the code..
The PHP file may contain the following code:
echo $_POST['datechosen'];
Surprisingly, It worked by removing the line:
dataType:"json",
Try this one. It must be worked!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Ajax Response</title>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
let dateBtn = document.querySelector('#gotodate');
let getDate = document.querySelector('#pickdate');
dateBtn.addEventListener('click',(event)=>{
event.preventDefault();
if(getDate.value.trim() !== ""){
console.log(getDate.value.trim());
dateBtn.style.borderColor = "transparent"
jQuery.ajax({
type: "POST",
url: "vdater.php",
data:{
datechosen: getDate.value.trim()
},
success: ((response,status, object) => {
response = JSON.parse(response);
if(response.status){
alert(`Date Chosen: ${response.PickedDate}`);
}
})
});
}else{
dateBtn.style.border = "1px solid #fb5757";
}
});
</script>
</body>
</html>
<?php
if(isset($_POST['datechosen'])){
$date = $_POST['datechosen'];
echo json_encode(["PickedDate"=> $date,"status"=>true]);
}
I have pandas df, exported to html the result is..
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>Flop</th>
<th>BET 1610 Freq</th>
<th>BET 1218 Freq</th>
<th>BET 575 Freq</th>
<th>CHECK Freq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2s 2d 2c</td>
<td>2.90</td>
<td>11.91</td>
<td>36.90</td>
<td>48.30</td>
</tr>
...5k lines...
And i'm trying to import on html normal file and create a filter latter
Any ways to make it please?
Is possible with JS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
Include
in php import "file.php";.
save both file with .php extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<?php
import "3BP-OOP-PER.php"; // import "3BP-OOP-PER.html";
?>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
I think this code help you!
I'm new to PHP and am trying to create an Age Validation form that will limit access to specific content on a site if a user is under a certain age.
This is the HTML form (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
and this is the PHP script(data.php):
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION[$limited] = false;
header('Location: ../index.php');
}else{ //limited access is granted
$_SESSION[$limited] = true;
header('Location: ../index.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
I would like to be able and carry the resulting $limited variable from the PHP file into this HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
This is currently just for testing to make sure it can carry over. I have tried the $_SESSION method but i can't seem to figure it out.
Any and all possible solutions welcomed.
Thank you
First, your HTML file must be parsed by the PHP interpreter so it must have the .php extension in order to access any session variable.
Here's an example with 3 files in the same directory based on your question:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
data.php:
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION['limited'] = false;
header('Location: new.php');
}else{ //limited access is granted
$_SESSION['limited'] = true;
header('Location: new.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
new.php(the new page, where you access your session variable)
<?php
session_start();
$limited = $_SESSION['limited'] ?? true;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ? "true" : "false" ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
You're using $limited as a key in the $_SESSION array. What's in $limited ?
I'm pretty sure that if you reassign the correct value to $limited, you can access the value in $_SESSION with this:
<?php $limited = 'MyAwesomeKey'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $_SESSION[$limited] ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
<script type="text/js">
document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
</script>
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
</body>
</html>
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.getElementById("selector").style.visibility = "hidden";
document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
</script>
</body>
HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.
Move your <script> block to after your apppanel element's closing tag.
Also, onclick needs to be a function. So it would be:
document.getElementById("addpanel").onclick = function() {
document.getElementById("selector").style.visibility = "visible"
}
Quick working example: https://jsfiddle.net/m2q6ubuv/
Try this
function show(){
document.getElmenetById('selector').style.visibility = 'visible'; }
Then just put onclick='show()' as an attribute in the tag you want to be the button.
Plus, you should put JavaScript at the end of the page, just first of the </body> tag.