How to refresh php table by var obtained via javascript - javascript

I'm coding a mini web project to learn about php/html/java. The page I'm coding contains a table that use php code in it. This php code allows me to connect to my db and get the values I want to show in the table. Then I have a select box that has return the value of the selected field (via javascript?). This value has to be used refresh the php table. So the value has to be sent to the php code (via Ajax?) and refresh the query I make to my db so the table will show new values. This is waht I have now:
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
background-color: #9C3;
}
p {color:black;}
.table_test {
font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
}
</style>
</head>
<body><div align='center'>
<p> </p>
<p>test!</p>
<p> </p>
<div class="table_test">
<table border='1' cellpadding='0' cellspacing='0' width='600' bgcolor='#F6F6F6' bordercolor='#FFFFFF'>
<tr>
<td width='150' style='font-weight: bold'></td>
<td width='150' style='font-weight: bold'>Festa</td>
<td width='150' style='font-weight: bold'>Preu</td>
<td width='150' style='font-weight: bold'>Entrada</td>
<td width='150' style='font-weight: bold'>Final</td>
<td width='150' style='font-weight: bold'>Estil</td>
<td width='150' style='font-weight: bold'>Llista</td>
</tr>
<?php
include ('connection.php');
include ('functions.php');
$dw = date("w");
echo "Avui es el dia: $dw";
$query = 'SELECT disco_id, party_name, price, hin, hout, style, list FROM disco_var WHERE day = '.$dw;
$result = mysql_query($query,$connect);
while ($reg = mysql_fetch_array($result))
{
$disco_id = $reg['disco_id'];
$disco_name = get_disco_name_from_id($disco_id);
$hin = substr($reg['hin'],0,5);
$hout = substr($reg['hout'],0,5);
$price = $reg['price'];
if ($reg['list'] == 1) $list = "Apunta't!";
else $list = "-";
echo "<tr>
<td width='150'>".$disco_name."</td>
<td width='150'>".$reg['party_name']."</td>
<td width='150'>".$reg['price']." e</td>
<td width='150'>".$hin."</td>
<td width='150'>".$hout."</td>
<td width='150'>".$reg['style']."</td>
<td width='150'>".$list."</td>
</tr>";
}
include ('close_connection.php');
?>
</table>
</div>
<p>Veure un altre dia de la setmana:
<select name="day_select" id="day_select" onchange="dayChanged(this);">
<option value="1">Dilluns</option>
<option value="2">Dimarts</option>
<option value="3">Dimeces</option>
<option value="4">Dijous</option>
<option value="5">Divendres</option>
<option value="6">Dissabte</option>
<option value="0">Diumenge</option>
</select>
</p>
<script type="text/javascript"> //Here is the problem!!
function dayChanged(opt)
{
//What should be the code here?
}
</script>
</body>
</html>
So I want de var in php $dw to get refreshed by the value of the option selected in the select box (onClick function). Then the other problem is how to refresh the table with this $dw value.
I'm new with php/html/java coding and I'm really stucked with it. Thank you.

Related

Error 404 page not found in wordpress

i am using WordPress platform with PHP AND MYSQL in order to create a website where i have a page that includes 4 dropdown lists that get it data from the MYSQL database and using javascript and AJAX i am trying to make these dropdown list dependent on each other where the user select from teh first one and based on the user's selection the second drop down display data.
the problem is that i have used 2 codes in order to make AJAX work without refreshing the hall page.
when i try to select from the first dropdown list in the debug mode it display:
404 drpdown_fetch_owner.php error page not found
directory structure :
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/search_info_location.php
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php
tables:
site_info:
siteID
siteNAME
ownerID
List item
owner_info:
ownerID
ownerNAME
problem :
after the user click on the first droplist
variable ownerID in the AJAX stay empty and do not get any value.
i added var_dump($sql); under the SQL query in the dropdown_fetch_owner.php code
and i got this statement in the debug mode:
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php:6:
array (size=0)
empty
code1 :
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').change(function(){
var ownerID = $(this).val();
$.ajax({
url:"dropdown_fetch_owner.php",
method:"POST",
data:{ownerID:ownerID},
datatype:"text",
success:function(data){
$('#owner_name').html(data);
}
});
});
});
</script>
dropdown_fetch_owner.php:
<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
global $wpdb;
$sql =$wpdb->get_results("select * from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
echo '<option value="">Select Owner</option>';
foreach($sql as $row){
//while ($row = mysqli_fetch_array($result)) {
echo "<option value = '".$row ->ownerID."'>". $row->ownerNAME."</option>";
}
?>
In wordpress, use ajax(https://codex.wordpress.org/AJAX_in_Plugins)
Change
url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
instead of url:"dropdown_fetch_owner.php",

Displaying search result on same page without refreshing the page

While browsing a website i found an interesting feature that i like to have in my application.It is like displaying search result on same page without refreshing the page. When someone fills the last field of the form it shows the search result on the same page without refreshing the page.The form has no submit button or any link to submit the form data when someone fills the last field it search result and display the result. I want to implement this feature in my application i built in PHP. I know this can be done by Javascript & Ajax but i don't have enough knowledge of these languages. I just learned HTML,CSS,PHp & MySql. Let me show u my code
HTML:
<form action="do_search.php" method="post"/>
Enter Number:<input type="text" name="roll" id="roll">
<input type="submit" value="search record"/>
do_search.php:
<?php
include 'includes/dbConnect.php';
?>
<?php
$roll = $_POST['roll'];
$result = mysql_query( "SELECT * FROM students WHERE Roll_No = '$roll'" ) or die("SELECT Error: ".mysql_error());
$num_rows = mysql_num_rows($result);
?>
<table width="100%" bgcolor="#F7F7F7" border="0">
<?php
if ($num_rows!=0)
{
?>
<tr style="text-align:left;">
<td width="7%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>#</strong></td>
<td width="13%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Roll No</strong></td>
<td width="29%" align="left" bordercolor="#CCCCCC" bgcolor="#996600"class="heading"><strong>Name</strong></td>
<td width="23%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Father Name</strong></td>
<td width="16%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Class</strong></td>
<td width="12%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Section</strong></td>
</tr>
<?php
//$counter = 1;
while ($get_info = mysql_fetch_row($result))
{
print '<tr class="text-data">';
print '<td align="center" valign="top">' . $get_info[0] . '</td>';
print '<td align="left" valign="top">
<a href="edit_Student.php?roll_no=' . $get_info[1] . '" style="color:#000"><b>' . $get_info[1] . '</b></td>';
print '<td align="left" valign="top">'. $get_info[2] . '</td>';
print '<td align="left" valign="top">' . $get_info[3] . '</td>';
print '<td align="center" valign="top">' . $get_info[4] . '</td>';
print '<td align="center" valign="top">' . $get_info[5] . '</td>';
print '</tr>';
//$counter++;
}
}
else
{
?>
<tr style="text-align:left;">
<td align="center" colspan="7">
No Student Found !
</td>
</tr>
<?php
}
?>
</table>
This is working fine for me and display the record on do_search.php page. I want my form has no submit button option & when someone enter the form field Enter Roll Number it should display the record on same page and display all the record from database. Can anyone please help me for this. Thanks in advance
You can do that with jQuery ajax.
<form action="do_search.php" method="post"/>
Enter Number:<input type="text" name="roll" id="roll">
</form>
<div id="result"></div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$("#roll").change(function() {
$.post("do_search.php", { roll:$("#roll").val() })
.done(function( data ) {
$("#result").html(data);
});
});
</script>
Use Jqyery keydown() Method
$("input").keydown(function(){
//Do display logic
// Use Ajax and get the data for the value enter and update your html content
});
http://www.w3schools.com/jquery/event_keydown.asp

Save updated values to database and show them in html table

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.

Execute PHP inside SCRIPT TAG

I have a listbox that displays a couple of internships under following format
id - name :
1 - Computer Science
So far, I have create the function addRow in order to update my fields from form.
If I do
alert($montext)
I can display "1 - Computer Science", but I am looking only for the value "1".
I tried :
alert(<?php substr($montext,0,2)?>);
But seems that php inside "script" isn't being executed.
Because following code changes the value in the field:
document.getElementById('ti').value=$montext;
Because I'd like also to execute php code inside the script TAG.
I'm running under Apache.
If you could help me out. Thanks
Find hereby the used code.
<html>
<head>
<script>
function addRow(title,text,description,id) {
$montext=$( "#idStage option:selected" ).text();
alert($montext);
document.getElementById('ti').value=$montext;
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
</head>
<body>
<?php
include('../admin/connect_db.php');
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label class="notBold">Choose the internship you want to update: </label>
<select name="idStage" id="idStage" onChange="addRow()">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
while($stmt->fetch()){
?>
<option id="nostage" value="<?php echo$id;?>" onclick="setText('<?php echo $title ?>',' <?php echo $text ?> ',' <?php echo $description ?>',' <?php echo $id?>');"><?php echo $id." - ".$title;?></option>
<?php
}
$stmt->close();
}
?>
</select>
</td>
<td width="20">
<img src="./Image/exit.png" title="Close" id="closeDelete" class="closeOpt" onclick="closeOpt()" />
</td>
</tr>
</table>
<form method="post" action="modifystage.php">
<table>
<tr>
<td>
<input type = "hidden" id ="id" name="id"/>
</td>
</tr>
<tr>
<td class="label">
<label>Title </label>
<textarea id = "ti" name="ti" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $title;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Desc</label>
<textarea id = "de" name="de" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $description;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Text </label>
<textarea id = "te" name="te" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $text;
?>
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right"colspan="2" class="label">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>
You don't need to use PHP here. Use the javascript substring function - http://www.w3schools.com/jsref/jsref_substring.asp
For example
alert(montext.substring(0, 2));
Write your <script> on bellow your PHP and try this :
<script>
function addRow(title,text,description,id) {
var montext = $( "#idStage" ).text();
alert(montext);
document.getElementById('ti').value(montext);
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
If you want to call variable from PHP, don't forget to use echo like this :
alert("<?php echo substr($montext,0,2); ?>");

Two Problems in view code: a)- fetch and view image from database not working b)- onchange function not working

Below given code for view:
The code for insert is 100% correct and working as desired (uploading image and putting into desired folder). Error is with the code for view.
Problem starts with this code.
a. When i am viewing, the images are not displayed. The box, with broken icon for image, appears. I want to appear image in this box by fetching image from database.
b. In "Genre" when i am changing the genre, nothing happens. I want that if i choose "Action/Mission" genre then all games with the genre "Action/Mission" should appears on changing and if i choose "Racing" genre then all games with the genre "Racing" should appears onchanging.
<head>
<script type="text/javascript">
function MM_jumpMenu(val){
var abc = document.getElementById(jumpMenu).value;
if (abc == "Action/Mission"){
return abc;}
if (abc == "Racing"){
return abc;}
else { return false; }
}
</script>
</head>
<body>
<table width="216">
<tr>
<td width="46">Name</td>
<td width="46"><form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu(this.value)">
<option value="">--Select Genre--</option>
<option value="Action/Mission">Action</option>
<option value="Racing">Racing</option>
</select>
</form></td>
<td width="61">Image 1</td>
<td width="63">Image 2</td>
</tr>
<tr>
<?php
$abc=mysql_query("select * from games order by game");
while($row=mysql_fetch_array($abc))
{
?>
<td><?php echo $row['game']; ?></td>
<td><?php echo $row['genre']; ?></td>
<td><img src="admin\images/<?php echo $row['image1'].'.jpg'; ?>" height="50" width="50" /></td>
<td><img src="admin\images/<?php echo $row['image1'].'.jpg'; ?>" height="50" width="50" /></td>
</tr>
<?php } ?>
</table>
</body>

Categories