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"
Related
what happen in the code is that everytime i choose in multiple drop down it fetch the data what i want to happen is to click the button first then it will fetch the data...... thank u guys got the code in here https://www.webslesson.info/2018/05/ajax-live-data-search-using-multi-select-dropdown-in-php.html
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");
$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<script src="js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
}
?>
</select>
<input type="hidden" name="hidden_country" id="hidden_country" />
<div style="clear:both"></div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('tbody').html(data);
}
})
}
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
var query = $('#hidden_country').val();
load_data(query);
});
});
</script>
fetch.php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=dbattendancelibrary", "root", "");
if($_POST["query"] != '')
{
$search_array = explode(",", $_POST["query"]);
$search_text = "'" . implode("', '", $search_array) . "'";
$query = "
SELECT * FROM tbl_customer
WHERE Country IN (".$search_text.")
ORDER BY CustomerID DESC
";
}
else
{
$query = "SELECT * FROM tbl_customer ORDER BY CustomerID DESC";
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{
$output .= '
<tr>
<td>'.$row["CustomerName"].'</td>
<td>'.$row["Address"].'</td>
<td>'.$row["City"].'</td>
<td>'.$row["PostalCode"].'</td>
<td>'.$row["Country"].'</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="5" align="center">No Data Found</td>
</tr>
';
}
echo $output;
?>
It fires an ajax call because of this code:
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
var query = $('#hidden_country').val();
load_data(query);
});
If you want to fire when clicking on a button, you will need to put in HTML for the button first. Then use the id for load_data event, for example you will have a button called '#btn_search':
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
});
$('#btn_search').click(function(e){
e.preventDefault();
var query = $('#hidden_country').val();
load_data(query);
});
Your full HTML above becomes like this:
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");
$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<script src="js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
}
?>
</select>
<input id="btn_search" type="button" value="Filter" />
<input type="hidden" name="hidden_country" id="hidden_country" />
<div style="clear:both"></div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('tbody').html(data);
}
})
}
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
});
$('#btn_search').click(function(e){
e.preventDefault();
var query = $('#hidden_country').val();
load_data(query);
});
});
</script>
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'
I just want to know how can i fetch the design of the datatables of my table. Because the filter and the pagination of the table is not working. Heres my code.
i have this plugin in my
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<script src="../assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.js"></script>
<script src="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.js"></script>
<script src="../assets/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script src="../assets/vendor/datatables-tabletools/dataTables.tableTools.js"></script>
display
<div id="table_data" >
</div>
script
fetch_data();
function fetch_data()
{
var action = "fetch";
$.ajax({
url:"table/serviceTypeTable.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#table_data').html(data);
}
})
}
query for fetch:
if(isset($_POST["action"]))
{
if($_POST["action"] == "fetch")
{
$qry = mysql_query("select * from services_type")or die(mysql_error());
$count = mysql_num_rows($qry);
$output = '
<table class="table table-hover dataTable table-striped width-full" data-plugin="dataTable">
<thead>
<th>Services Types</th>
<th>Action</th>
</thead>
';
while($row = mysql_fetch_array($qry))
{
$services_type_id = $row['services_type_id'];
$output .= '
<tbody>
<tr>
<td>'.$row['services_type_name'].'</td>
<td style="text-align:center;">
<i class="fa fa-edit"></i>
</td>
</tr>
</tbody>
';
}
$output .= '</table>';
echo $output;
}
}
my problem is the datatables design is not working. that's all thanks :)
I figured it out. I just put this script in query fetch at the button after the
:)
<script>
$("#table").dataTable({
});
</script>
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 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?