I have a question regarding dynamic tables in html and php. My goal is to create a dynamic table that displays the queried data from mysql and displays them in a table with checkboxes so the user can select questions from a question bank and then do something with them. My problem however is getting the data to be displayed. Using a certain type of mvc architecture, I need to keep the sql out of the front end html and php portions. I was wondering if anyone had any suggestions as how to post the variables from the back end(mysql query) and send them to the front end(html and php section) via curl where I can dynamically create a table with checkboxes. I have attempted the solution using bootstrap and combining sql with html and php as well. Any help would be greatly appreciated.
<?php
include('ProfessorWelcome.php');
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
<?php
//select all records form tblmember table
$query = 'SELECT Question, Difficulty FROM QuestionBank';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>".$row['Question']."</td><td>".$row['Difficulty']."</td>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
This is how I would do it.
I added the ob_start() and ob_flush() so the Top of the page is being transmitted as you create the table.
Moved <title> to immediately follow <head>
Very Important: Moved CSS above JS in the <head>
I used heredoc syntax: PHP Manual Heredoc Syntax
Added MYSQL_NUM to:
mysql_fetch_array($results, MYSQL_NUM))
$row[0] and $row[1] can be used in a double quoted string without concatenation dots. Can also be used in here doc. $row['Question'] and $row['Difficulty'] can not.
Do you realize the overhead associated with jQuery? You do not need any JS in this page. But you created a lot more work for the Browser and are making the visitor wait while the Browser does all that unnecessary work.
I would 86 the JS and jQuery. And NO Bootstrap. Learn CSS.
<?php ob_start("ob_gzhandler");
include('ProfessorWelcome.php');
echo <<<EOT
<html lang="en">
<head><title>Registration form</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<!-- Bootstrap core CSS -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
EOT;
ob_flush();
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT `Question`, `Difficulty` FROM `QuestionBank` ';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($results, MYSQL_NUM)); {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>$row[0]</td><td>$row[1]</td>\n";
}
echo <<<EOT
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
EOT;
ob_end_flush();
?>
Related
I'm trying to use DataTables but for some reason, it doesn't seem to be working. I'm using Bootstrap 4 and I need buttons from DataTables so that I can export the table later. I think I've added everything I need but it's not showing up. anyone know why it hasn't worked? The table is being posted from a database, it works just fine in bootstrap and all the information shows up but as soon as I try to add DataTables to it nothing seems to change.
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once('connection.php');
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['someAction']))
{
func();
}
function func()
{
$conn = mysqli_connect("localhost", "root", "", "SportsDB");
}
session_start();
if( !isset($_SESSION['username']) ){ /* Change into role = teacher or admin*/
header('Location:login.php');
}
print_r($_SESSION);
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Register exporting</title>
<!--- Link to Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Link to Data Tables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.js"></script>
<!-- Link to jquery -->
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class='container-fluid' style='margin-top: 20px'>
<div class="row">
<div class="col-md-8 mx-auto">
<table class="table table-bordered table-hover" id='example'>
<thead>
<tr>
<td>ID</td>
<td>Username</td>
<td>T1_choice</td>
<td>T2_choice</td>
<td>T3_choice</td>
</tr>
</thead>
<tfoot>
<tr>
<td>ID</td>
<td>Username</td>
<td>T1_choice</td>
<td>T2_choice</td>
<td>T3_choice</td>
</tr>
</tfoot>
<tbody>
<?php
ini_set("display_errors", 1);
$stmt = $conn->query('SELECT * FROM Student_Choices');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo '<tr>
<td>'.$row['Unique_ID'].'</td>
<td>'.$row['Username'].'</td>
<td>'.$row['T1_Choice'].'</td>
<td>'.$row['T2_Choice'].'</td>
<td>'.$row['T3_Choice'].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Thanks for the help. I needed to call the jquery before DataTables.
I am trying to send a value to my mysql database, I am very new to php/bootstrap programming and I've tried everything but most of the guides are beyond my understanding. Please guide me in the right path so on the button click the button will update the specific database.
Here's what the button click will do:
on Uninstall button click it will send update the database like
UPDATE activate="No" FROM software WHERE uid(or id)="same id of the row where the button is clicked" [I know this mysql query is wrong]
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Control Panel</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="css/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="css/green.css" rel="stylesheet">
<!-- Datatables -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-12 left_col">
<div class="left_col scroll-view">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th>S/N</th>
<th>Date</th>
<th>IP Address</th>
<th>UID</th>
<th>Activation</th>
<th>Command</th>
</tr>
</thead>
<tbody>
<?php
$count_rows = 0;
include 'database_connection.php';
$sql = "SELECT `date`, `ip`, `id`, `activate` FROM `software`";
$result = $conn->query($sql);
while ($row = mysqli_fetch_array($result)):
$count_rows++;
?>
<tr>
<td><?php echo $count_rows ?></td>
<td><?php echo $row['date']; ?></td>
<td><?php echo $row['ip']; ?></td>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['activate']; ?> <td><button type="button" id="btn-uninstall" class="btn btn-danger btn-xs">Uninstall</button> <button type="button" id="btn-install" class="btn btn-success btn-xs">Install</button> <button type="button" id="btn-upgrade" class="btn btn-warning btn-xs">Upgrade</button></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- iCheck -->
<script src="js/icheck.min.js"></script>
<!-- Datatables -->
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<script src="js/buttons.flash.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>
<script src="js/dataTables.fixedHeader.min.js"></script>
<script src="js/dataTables.keyTable.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/responsive.bootstrap.js"></script>
<script src="js/dataTables.scroller.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<script src="js/custom.min.js"></script>
</body>
</html>
Here's screenshot of the page: https://image.ibb.co/eToeaz/Capture.png
You can send request to server by this code.
$con = new mysqli_connect("servername", "username", "password", "name");
if(!$con)
{
die("DB CONNECTION ERROR");
}
$result=mysqli_query($con, "SELECT * FROM 'table' WHERE 'something'");
$row=$result->fetch_array();
$count = mysqli_num_rows($result);
mysqli_close($con);
if( $count == 1 )
If you want it to happen instantly then use AJAX to send request to the php server, see https://www.w3schools.com/php/php_ajax_database.asp for more info.
if you want it with redirecting then use
$conn = new mysqli("DBservername", "DBusername", "DBpassword", "DBname");
if ($conn->connect_errno) {
$errormsg = ("Database Connection failed: " . $conn->connect_error );
return $errormsg;
}
$res=mysqli_query($conn, "SELECT * FROM 'table' WHERE 'something'");
$row=$res->fetch_array();
$count = mysqli_num_rows($res); // if fetch correct it returns must be 1 row
mysqli_close($conn);
if( $count == 1 ) etc
send query, update, delete etc.
$sql = "DELETE FROM 'table' WHERE 'something';
mysqli_query($conn,$sql);
Rough and bad php code but should work.
Edit after i understand what you actually asked:
When rendering results from database, anchor each button to redirect to a page /update/{rowid} or /update.php?id={rowid}
and in that link execute the query with conditions and etc.
I'm using Agile Toolkit version 4.2.4 trying to implement the Exchanging rows between grids example found here: https://agiletoolkit.org/doc/grid/interaction
I have created the TSGrid class with the following code:
class TSGrid extends Grid {
function setReloadThis($view){
if($id=$_GET[$this->name.'_chsex']){
// do note, usually we supply 2 arguments for set() function. Second
// argument is being properly quoted (or parametrized), however in this
// case no quoting is required. Hence all the statement goes into first
// argument.
$this->dq->set('gender=if(gender="M","F","M")')
->where('id',$id)
->do_update();
// univ()->page() method updates page content through AJAX. In this case each
// grid is unaware of other objects on the page. So to keep it safe, we will refresh
// page completely.
$view->js()->reload()->execute();
}
return $this;
}
function init(){
parent::init();
$g=$this;
// When you are making your own classes, you must always keep in mind
// that those objects must be just as re-usable as original grids. In our case
// we do set the table and fields, however we leave it up to parent to set the
// additional conditions on our query. This is a major reason for the philosophy
// of Agile Toolkit saying to keep properties public.
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->addColumn('text','gender');
$g->addColumn('button','chsex','Change Sex');
$g->setSource('test');
}
function defaultTemplate(){
return array('grid_striped');
}
}
and inserted it in the lib folder of the agile toolkit installation.
I have created a test page with the following code:
class page_test extends Page {
function init(){
parent::init();
$p=$this;
$c=$p->add('View_Columns');
$col=$c->addColumn();
$col->add('H3')->set('Male list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','M');
$col=$c->addColumn();
$col->add('H3')->set('Female list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','F');
}
}
In my database, I have made the "test" table with id, name, surname and gender fields.
When I click the "Change sex" button, I get this:
"Error in AJAXec response: SyntaxError: Unexpected token <"
The AJAX response from the server is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Agile Toolkit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="./atk4/templates/shared/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/atk-main.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/default/css/atk-custom.css" />
<script type="text/javascript" src="./atk4/templates/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/start-atk4.js"></script>
<script type="text/javascript" src="./atk4/templates/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_loader.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_notify.js"></script>
<script type="text/javascript" src="./atk4/templates/js/atk4_univ.js"></script>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/ie8.css"/>
<script type="text/javascript" src="./atk4/templates/shared/css/ie8.js"></script>
<![endif]-->
<script type="text/javascript">
$(function(){
$.atk4.includeJS("./atk4/templates/js/atk4_univ.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_notify.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4(function(){ $('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').atk4_grid([]);
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').atk4_grid([]);
; });
});
</script>
</head>
<body>
<div id="atk-layout" class="atk-wrapper">
<div id="header">
<div id="atk-logo" class="ui-widget-header float-left"><img src="./atk4/templates/shared/images/logo.png" /></div>
<div id="header-right">
<script>
$(document).ready(function(){
$('.atk-menu-horizontal>ul>li:first-child').addClass("ui-corner-left");
$('.atk-menu-horizontal>ul>li:last-child').addClass("ui-corner-right");
$('.atk-menu-vertical>ul>li:first-child').addClass("ui-corner-top");
$('.atk-menu-vertical>ul>li:last-child').addClass("ui-corner-bottom");
$('.atk-menu .ui-state-default').hover(function() {
$(this).addClass("ui-state-hover");
}, function() {
$(this).removeClass("ui-state-hover");
});
});
</script>
<div id="agiletoolkit_menu" class="atk-menu atk-menu-horizontal ui-widget">
<ul>
<li class="ui-state-default">Welcome</li>
<li class="ui-state-default">Test1</li>
<li class="ui-state-default">Test2</li>
<li class="ui-state-active">Test3</li>
<li class="ui-state-default">Logout</li>
</ul>
</div>
<div id="atk-version"><b>Agile Toolkit™</b><br/><i><div id="agiletoolkit_licensor_upgradechecker" class="" style="">4.2.4 unlicensed</div>
</i></div>
</div>
</div>
<div id="agiletoolkit_test" class="page_test">
<div id="agiletoolkit_test_view_columns" class="atk-flexy">
<div id="agiletoolkit_test_view_columns_view_columns_column" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_h3" class="" style="">Male list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">stef</td>
<td style="white-space: nowrap">stefanel</td>
<td style="white-space: nowrap">M</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="agiletoolkit_test_view_columns_view_columns_column_2" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_2_h3" class="" style="">Female list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_2_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">eu</td>
<td style="white-space: nowrap">eueu</td>
<td style="white-space: nowrap">F</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_2_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="atk-footer-guard"></div>
</div>
<div id="footer" class="atk-wrapper">
This system is implemented using Agile Toolkit. © 1999–2012. See License
</div>
<div id="atk-growl-holder" class="atk-growl"></div>
</body>
</html>
Demo page is using older toolkit version, than in master branch. If you use example with master branch, you need following change:
$this->dq
->set('gender', $this->api->db->dsql()->expr('if(gender="M","F","M")'))
->where('id',$id)
->do_update();
this is due to change in dsql object.
here is working example with latest toolkit version
I am developing a smartphone web app that is a game of question answer using jquerymobile API.
when a user click on next button that is a anchor tag then i switch to other page and increment the $_SESSION['questionNo'] value. The problem is $_SESSION['questionNo'] value increment from 1 to 4 and then again became $_SESSION['questionNo'] is 1. why it's happening i don't know. Here is my code
<?php session_start();
include("connect.php");
include("header1.php");
$attemp=$_SESSION['questionNo'];
echo $attemp;
$sql = sprintf("select * from question order by pk_id ASC limit %s,%s",$attemp,1);
$result = mysql_query($sql) or die(mysql_error());
$result2=mysql_fetch_array($result);
?>
<div data-role="page" id="group">
<div class="main">
<div id="header2" class="clearfix">
<table border="0" width="100%" id="table">
<tr><td colspan="5"><hr></td></tr>
<tr>
<td colspan="2" id="menu_button1">
Reset
</td>
<td align="center">
Score : 50%
</td>
<td> </td>
<td id="menu_button2">
Next
</td>
</tr>
-------------
test.php page
-------------
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" media="handheld, screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/jquery.mobile-1.0a1.min.css"/>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="jquery-1.8.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<?php
++$_SESSION['questionNo'];
header('Location:startGame.php');
exit;
?>
</div><!-- /content -->
</div><!-- /page -->
</body>
can any one tell me why $_SESSION['questionNo'] not incrementing regularly???
Use session_start():
<?php
session_start();
++$_SESSION['questionNo'];
header('Location:startGame.php');
exit;
?>
In master.php
<?php
//echo "session check: ".$_SESSION['session_array'];
//exit;
session_start(); // Session Starts
if( !isset($_SESSION['session_array']) )
{
header("Location: index.php");
exit;
}
include("conn.php");
?>
<!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>LMS</title>
<link rel="stylesheet" type="text/css" href="jui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="jui/general.css">
<link rel="stylesheet" type="text/css" href="jui/themes/icon.css">
<script type="text/javascript" src="jui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</head>
<body class="easyui-layout">
<div region="north" class="north_master" border="false" split="false" >
<div style="float:left;">
<img src="images/usr_logo.jpg" alt="Lead Management System" width="168" height="66" title="Lead Management System" >
</div>
<div style="float:right;">
<br/><br/>
<a id="logout" name="logout" href="logout.php?logout=1" class="easyui-linkbutton" iconCls="icon-cancel" onClick="javascript: return confirm('Are you sure you want to log out?');">Logout</a>
</div>
</div>
<div region="south" class="south" border="false">
<?php include('footer.php'); ?>
</div>
<div region="center" class="center" style="background-image:url(img/product-display.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:right bottom; ">
<?php
include('dashboard.php');
?>
</div>
</body>
</html>
In dashboard.php
<script language="javascript">
jQuery(document).ready(function($){
alert("check");
});
</script>
<div class="content">
<h1>Slot Dashboard</h1>
<div>
Add Slot
</div>
<table border='1' bordercolor='#B4B4B4' cellpadding='1' cellspacing='0' width='80%' align="center">
<tr align="left">
<th>Week</th>
<th>Dates</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>09/04/2011 - 09/10/2011</td>
<td>Revised</td>
<td>09/04/2011</td>
<td>View</td>
</tr>
<tr>
<td>2</td>
<td>09/11/2011 - 09/17/2011</td>
<td>Revised</td>
<td>09/11/2011</td>
<td>View</td>
</tr>
<tr>
<td>3</td>
<td>09/18/2011 - 09/24/2011</td>
<td>Not Submitted</td>
<td>09/18/2011</td>
<td>View</td>
</tr>
</table>
</div>
Question: While master.php runs "check" alerts twice.
I need to know why "check" alerts twice. How to solve this
<div region=center>
The scripts within the div runs twice. there is some bug with jeasy-ui. Help me how to solve that.
Technically included page alert shouldn't fire twice. it is only possible in case of you add sample.php file in php.ini as auto_append_file
i found same problem in easyui every version, when script is included in to panel/layout, the script will be run twice, the reason I think:
the page be loaded in browser ,the browser run the script of page once, when dom is loaded ,the easyui render style for the node in dom, the script in the node will be called second by easyui.
this problem isn't only in layout , but in panel, Maybe even for the every thing inherit from panel.
this problem may be in the easyui's root render method, so I can't find solved for this without src.
now i have to change easyui to another ui framework.
example for theis problem, the alert be called twice in browser:
</div>
<div region="south" class="south" border="false">
</div>
<div region="center" class="center" >
<script>
alert("here");
</script>
</div>