I have a form which contains a dropdown box, when the value is changed the form uses jQuery and ajax to produce a table. The table contains data based on the value of the dropdown box and also links.
My initial script which is where the dropdown box is and where the table is added is:
<?php require_once('/connections/db.php');
mysql_select_db($database_db, $db);
$query_weeks = "SELECT WeekNo, WeekName FROM tbl_weeks ORDER BY WeekNo ASC";
$weeks = mysql_query($query_weeks, $db) or die(mysql_error());
$row_weeks = mysql_fetch_assoc($weeks);
$totalRows_weeks = mysql_num_rows($weeks);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form name="form1" method="post" action="">
<select id="weekselect" name="week">
<?php
do {
?>
<option value="<?php echo $row_weeks['WeekNo']?>"><?php echo $row_weeks['WeekName']?></option>
<?php
} while ($row_weeks = mysql_fetch_assoc($weeks));
$rows = mysql_num_rows($weeks);
if($rows > 0) {
mysql_data_seek($weeks, 0);
$row_weeks = mysql_fetch_assoc($weeks);
}
?>
</select>
</form>
<div id="mydata"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
// listen to change in monthselect
$('#weekselect').change(function(){
var week= $('#weekselect option:selected').val();
//pass val to php
$.post('test2.php',{week: week}, function(data) {
//do something with the data
$('div#mydata').html(data);
});
});
});
</script>
</body>
</html>
The script produces the dropdown from the mysql db and creates a listener for it, when the select is changed the value of the select is passed to the test2.php using jquery. the data returned is added to div #mydata
Test2 which produces the table is as follows
<?php
if (!isset($_SESSION)) {session_start();}
include('session.php');
require_once('Connections/dbc.php');
$open_week=$_SESSION['MM_OpenWeek'];
$week_selected=$_POST['week'];
$season=$_SESSION['MM_Season'];
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
echo '<p>Week selected: '.$week_selected .'<p>';
echo '<p>Open Week: '.$open_week .'<p>';
if ($week_selected>=$open_week) {
echo '<p>Week Open<p>';
} else {
echo '<p>Week Closed<p>';
}
//create recordset of fixtures for the week selected
$sql="SELECT * FROM q_games_stats WHERE WeekNo =".$week_selected . " and Season=". $season ." and at='Home' ORDER BY WeekNo ASC";
$rec_games=mysqli_query($dbc,$sql);
//create table using the recordset
?>
<div id="data_table">
<table class="table" align="center">
<th class="th" width="80px">Match Date</th>
<th class="th" width="150px">Home Team</th>
<th class="th" width="40px">Score</th>
<th class="th" width="150px">Away Team</th>
<th class="th" width="150px">Link</th>
<?php
while ($row=mysqli_fetch_array($rec_games))
{
?>
<tr class="tr">
<td class="td"><?php echo $row['MatchDate']?></td>
<td class="td"><?php echo $row['TeamName']?></td>
<td class="td"><?php echo $row['Score']?></td>
<td class="td"><?php echo $row['OppName']?></td>
<td class="td">Link</td>
</tr>
<?php
}
?>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
// listen to change in monthselect
$('#data_table a').click(function(){
alert("link clicked");
});
});
</script>
</body>
</html>
This produces the table, which includes links. There is an event listener of the links in the table, which when I click produces an alert.
What I want to do is instead of an alert being produced when clicking a link is for the table to reproduce, the reason for this is when the user clicks a link it will run a script which will change the underlying data in the table and therefore the table will need to be refreshed.
Is there I way I can do this, or is there a better way to do what I want to do?
Related
Im trying to read data from my database to my view in my application in the web browser. Problem is that I can't get any data to show. The data is shown in the console, so it's connecting to the database but somehow it doesn't print the data in the view.
Data is showing in console but not in view
playerDetails.php
include 'database_connections.php';
$sql = "SELECT idPlayer, PlayerName, PlayerEmail, PlayerPassword,
PlayerTeam FROM Players";
$result = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
} else {
echo "0 results";
}
mysqli_close($conn);
echo json_encode($data);
angular-script.js (Controller)
var crudApp = angular.module('crudApp',[]);
crudApp.controller('DbController', function ($scope, $http) {
$http.get("DatabaseFiles/playerDetails.php")
.then(function (response) {$scope.players = response.data;
console.log(response.data)
});
});
HTML
<!doctype html>
<html ng-app='crudApp'>
<head>
<title>Crud app</title>
<script src="js/jQuery/jquery.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="DbController">
<table >
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Team</th>
</tr>
<tr ng-repeat="players in Players | orderBy:'-created'">
<td>{{players.idPlayer}}</td>
<td>{{players.PlayerName}}</td>
<td>{{players.PlayerEmail}}</td>
<td>{{players.PlayerPassword}}</td>
<td>{{players.PlayerTeam}}</td>
</tr>
</table>
</div>
<script src="js/angular-script.js"></script>
</body>
SOLVED
Im not sure what caused the problem but I created a new database and a new project and did the following changes to my PlayerController.js (former "angular-script.js") and index.html
PlayerController.js
var app = angular.module('crudApp', []);
app.controller('mainController', function($scope, $http) {
$http.get('PlayerRead.php').then(function(response) {
$scope.users = response.data;
console.log(response.data);
});
});
HTML
<!doctype html>
<html >
<head>
<title>Crud app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.4/angular.min.js"
></script>
</head>
<body ng-app="crudApp" ng-controller="mainController">
<table>
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Team</th>
</tr>
<tr ng-repeat="user in users track by $index">
<td>{{user.PlayerID}}</td>
<td>{{user.PlayerName}}</td>
<td>{{user.PlayerEmail}}</td>
<td>{{user.PlayerTeam}}</td>
</tr>
</table>
<script src="PlayerController.js"></script>
</body>
Make it as below line, as it is case sensitive.
<tr ng-repeat="player in players | orderBy:'-created'">
<td>{{player.idPlayer}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.PlayerEmail}}</td>
<td>{{player.PlayerPassword}}</td>
<td>{{player.PlayerTeam}}</td>
</tr>
It should be players in players | orderBy:'-created'
A newbie question so please be kind :)
I've made a small search script to lookup values in my database.
But when I put in a search result I'm getting all the files in my database. Not just the name I looked for. I'm not a technical person so I was wondering where my mistake sits.
Main search page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function search(){
var name=$("#search").val();
if(name!=""){
$("#result").html("<img src='ajax-loader.gif'/>");
$.ajax({
type:"post",
url:"search-database.php",
data:"name="+search,
success:function(data){
$("#result").html(data);
$("#search").val("");
}
});
}
}
$("#button").click(function(){
search();
});
$('#search').keyup(function(e) {
if(e.keyCode == 13) {
search();
}
});
});
</script>
</head>
<body>
<div id="container">
<input type="text" id="search" placeholder="Zoek hier uw kandidaat...."/>
<input type="button" id="button" value="Zoek" />
<ul id="result"></ul>
</div>
</body>
</html>
search-database.php
<?php
include 'dbconfig.php';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gevonden kandidaten</title>
</head>
<body>
<div id="header">
<label>Resultaten</label>
</div>
<div id="body">
<table width="80%" border="1">
<tr>
<td>File Name</td>
<td>File Type</td>
<td>File Size(KB)</td>
<td>View</td>
</tr>
<?php
$search=$_POST['search'];
$query = $pdo->prepare("select * from test where name LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, PDO::PARAM_STR);
$query->execute();
while($results= $query->fetch())
{
?>
<tr>
<td><?php echo $results['name'] ?></td>
<td><?php echo $results['type'] ?></td>
<td><?php echo $results['size'] ?></td>
<td>view file</td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
Replace your search function with
function search(){
var name=$("#search").val();
if(name!=""){
$("#result").html("<img src='ajax-loader.gif'/>");
$.ajax({
type:"post",
url:"search-database.php",
data:"name="+name,
success:function(data){
$("#result").html(data);
$("#search").val("");
}
});
}
}
Here :
var name=$("#search").val();
You're setting your input value to a variable named name, but here :
data:"name="+search,
You're sending a non-existent value named search to your PHP file (in $POST['name']).
Hence, $_POST['search'] is empty, and your SQL request is :
select * from test where name LIKE '%%' LIMIT 0 , 10
Which returns all results.
You should replace your data line in your AJAX call to :
data:"search="+name,
I am currently working on a project that shows data from an SQL table using bootstrap editable for live editing.
It works fine - changes are transferred to the SQL table. What is already working?:
Showing current value from SQL table
Providing a drop-down for selection
Transferring changed values to SQL table
-> BUT Part 3 (transferring changed value) is only working for free-text input (class xedit).
What I am looking for is the code for: transferring chosen value of drop-down-list to SQL-Table
Here is the HTML-code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">EDIT YOUR CHARACTERS</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">ROLE</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">SECOND ROLE</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM characters");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['id'].'" key="name">'.$fetch['name'].'</td>
<td class="xedit" id="'.$fetch['id'].'" key="role">'.$fetch['role'].'</td>
<td class="xedit2" id="'.$fetch['id'].'" key="secondrole">'.$fetch['secondrole'].' </td>
</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script>
$(function(){
$('.rolestatus').editable({
source: [
{value: 1, text: 'DD'},
{value: 2, text: 'HEAL'},
{value: 3, text: 'TANK'}
]
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is the process.php code
<?php
include("connect.php");
if($_GET['id'] and $_GET['data'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
if(mysql_query("update characters set $key='$data' where id='$id'"))
echo 'success';
}
?>
So does anybody know how I can transfer the chosen dropdown-value (class -> xedit2) to SQL table?
Hope you can help!
Not sure exacly how x-editable works
But in first look i think that the type of your ajax should be "POST" if you want to update some data. And in my opinion you have syntax error in your sql query near "$key"
The table's data in CDs.php is pulled from a DB. Clicking on the table headers sorts the columns. Now, I want this page (CDs.php) to be editable when the user double-clicks on something in the table rows to type their changes. For example, the user can double-click on "1999 Grammy Nominees" and change it to "2014 Grammy Winners". This change on the site then updates the title inside the DB. I'm not sure how to do this...any ideas/suggestions on how I should go about this? Thanks in advance.
Note: I want the user to be able to type their changes...no drop-down select options or anything like that.
Note: I only want Title, Artist, and Price to be editable.
Note: I got the table columns to be sortable from --> http://www.dougv.com/2009/06/13/sorting-your-mysql-results-set-in-php-using-jquery-and-a-more-traditional-approach/
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable Table Columns</title>
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortedtable").tablesorter({ sortlist: [0,0] });
});
</script>
<style type="text/css">
#sortedtable thead th {
color: #00f;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<?php
include("include.php");
switch($_GET['c']) {
case "1":
$col = "Title";
break;
case "2":
$col = "Artist";
break;
case "3":
$col = "Country";
break;
case "4":
$col = "Company";
break;
case "5":
$col = "Price";
break;
default:
$col = "Year";
}
if($_GET['d'] == "1") {
$dir = "DESC";
}
else {
$dir = "ASC";
}
$dbc = mysql_connect($host, $user, $pass);
if (!$dbc) {
echo "Cannot connect to db server";
}
elseif(!mysql_select_db("database")) {
echo "Cannot select database";
}
else {
if(!$rs = mysql_query("SELECT * FROM CD ORDER BY Title")) {
echo "Cannot parse query";
}
elseif(mysql_num_rows($rs) == 0) {
echo "No records found";
}
else {
echo "<table id=\"sortedtable\" border='3' class=\"bordered\" cellspacing=\"0\">\n";
echo "<thead>\n<tr>";
echo "<th bgcolor='#FFFF00'>Title</th>";
echo "<th bgcolor='#FFFF00'>Artist</th>";
echo "<th bgcolor='#FFFF00'>Country</th>";
echo "<th bgcolor='#FFFF00'>Company</th>";
echo "<th bgcolor='#FFFF00'>Price</th>";
echo "<th bgcolor='#FFFF00'>Year</th>";
echo "</tr>\n</thead>\n";
while($row = mysql_fetch_array($rs)) {
echo
"<tr>
<td>$row[Title]</td>
<td>$row[Artist]</td>
<td>$row[Country]</td>
<td>$row[Company]</td>
<td>$row[Price]</td>
<td>$row[Year]</td>
</tr>\n";
}
echo "</table><br />\n";
}
}
?>
</body>
</html>
CDs.php
Database:
You might want to take a look at: Change Label to Textbox on edit hyperlink click
I know it's for a label but it can easily be converted to your case. I'd personally use the "update 1" from the second answer.
To detect the change you'll probably want to detect when the user hits enter, therefore I suggest you take a look at this: Detect enter in input elements of a certain class
When you've done that you can convert the input box back to a table cell and make an ajax call to a PHP page which then adds the value to the database.
Visit this jquery API page to learn more about the ajax call: http://api.jquery.com/jquery.get/
You could use the contenteditable="true" HTML attribute, then on blur (focusing out) you send the value to PHP using AJAX. Ive put together a simple example. Its not complete but answers the question, it leaves you to implement it.
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Content-Type: application/json');
exit(json_encode(array(
'result'=>'Received: '.$_POST['value'].' from AJAX, for row '.$_POST['row_id'].' column '.$_POST['column'],
)));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function(){
$.fn.editable = function(column){
$(this).attr('contenteditable', true);
$(this).blur(function () {
var ajax = $.ajax({
url: './',
type: "POST",
data: { row_id: $(this).parent().attr('id'), column:column, value: $(this).html()},
dataType: "json"
});
ajax.done(function(data){
$('#result').html(data.result);
});
$(this).attr('contenteditable', false);
});
return this;
};
});
</script>
</head>
<body>
<div id="result"></div>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr id="row_id_1">
<td width="33%" ondblclick="$(this).editable('col_a')">Value A</td>
<td width="33%" ondblclick="$(this).editable('col_b')">Value B</td>
<td width="34%" ondblclick="$(this).editable('col_c')">Value C</td>
</tr>
</table>
</body>
</html>
I have finally got a barcode to appear in my table that is generated from a Query. But now I am having an issue getting a code on each of the results from $row[1]. I tried to use PHP-BARCODE but it require too much memory to create all the barcodes. Jquery looks like it uses less memory to create them. Hence why I chose that method.
Any help on this would be AWESOME
My script is mainly PHP with an odd splash from JQUERY.
JQUERY for screen refresh and Barcode Generation. With soon more once i get past this hurdle.
<?php
include('inc/database.php');
// MSSQL Query
$sql = "SELECT warehouse, pick_order_number, order_status, pick_order_type, customer_order_number
FROM pick_order_header
WHERE warehouse = 'XDGM'
AND order_status <> 'Complete'
AND order_status <> 'Closed'
AND pick_order_type <> 'Backorder'
AND customer_order_number LIKE '%1 hr%'";
?>
<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" href="css/master.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery-barcode.js"></script>
<script>
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>
<html>
<title>Current Orders</title>
<body>
<table>
<?php
// SQLSRV Query
$results = sqlsrv_query( $conn, $sql );
if( $results === false) {
die( print_r( sqlsrv_errors(), true) );
}
echo "
<table border=1>
<tr>
<th>Order Number</th>
<th>Order Status</th>
<th>Order Type</th>
<th>Customer Order</th>
<th>Barcode</th>
</tr>";
while ($row = sqlsrv_fetch_array($results))
{
$odrnum = $row[1];
$odrstatus = $row[2];
$odrtype = $row[3];
$custorder = $row[4];
$barcode = $row[1];
echo "
<tr>
<td>$odrnum</td>
<td>$odrstatus</td>
<td>$odrtype</td>
<td>$custorder</td>
<td>
<div id="bcTarget_'.$odrnum.'"><input type="button" id="bc" name="bc" value="Click Here" /></div>
</td>
<script>
$("#bc").click(function(){$("#bcTarget_'.$odrnum.'").barcode("'.$row[1].'", "code39",{barWidth:2.5, barHeight:30, showHRI: true, bgColor: "#DEF3CA"});});</script>
</tr>';
}
echo "</table>";
?>
</table>
</body>
</html>
I am a complete noob at this, so if you do find a solution could you explain it to me as well so I can learn?
Thanks a bunch
The problem is that you have more then one of the same ids bcTarget and jquery will select the first found within the DOM.
Try to make your ids for the selector unique:
echo '
<tr>
<td>'.$odrnum.'</td>
<td>'.$odrstatus.'</td>
<td>'.$odrtype.'</td>
<td>'.$custorder.'</td>
<td>
<div id="bcTarget_'.$odrnum.'"></div>
</td>
<script>
$(function(){$("#bcTarget_'.$odrnum.'").barcode("'.$row[1].'", "code39",{barWidth:2, barHeight:30});});</script>
</tr>';
u can use this code
<div class="bcTarget" rel="4874214545"></div>
//rel= 'barcode digits'
javascript
$(document).ready(function() {
$(".bcTarget").each(function() {
var bcdigits = $(this).attr('rel');
$(this).barcode(bcdigits, "code39",{barWidth:2, barHeight:30});
});
});