I am new to PHP and JEasy UI.
I am actually running the demo application of JEasy UI Grid.
Whereas I am not getting the data from Php file to Grid.
Any Idea or suggestion please...!!
Below is My Code:
index.php
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="http://www.jeasyui.com/tutorial/app/crud/get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
New User
Edit User
Remove User
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
Save
Cancel
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
</body>
</html>
PHP Code URL
http://www.jeasyui.com/tutorial/app/crud/get_users.php
to get the data from datagrid you need to code like this
public function get_user(){
/*Default request pager params from jeasyUI*/
$offset = isset($_POST['page']) ? intval($_POST['page']) : 1;
$limit = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$search = isset($_POST['search']) ? $_POST['itemid'] : '';
$offset = ($offset-1)*$limit;
//change this line to yours
$data = $this->user_model->get_user($offset,$limit,$search);
$i = 0;
$rows = array();
foreach ($data ['data'] as $r) {
$rows[$i]['first_name'] = $r->first_name;
$rows[$i]['last_name'] = $r->last_name;
$rows[$i]['phone'] = $r->phone;
$rows[$i]['email'] = $r->email;
$i++;
}
//keys total & rows is required on jEasyUI
$result = array('total'=>$data['count'],'rows'=>$rows);
echo json_encode($result);
}
more complete example here
Related
I need some help with my code as I have got a problem with defined the variable to post them in Ajax. I am working on PHP as I am fetching the data from mysql database to input the information in PHP, so I would like to post the ID in ajax.
I have defined the variable $autoid outside of the while loop, but I am unable to defined them when I am using jquery because it will show empty data when I try to post them in Ajax.
When I try this:
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
}
Here is the full code:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else
{
$link = mysqli_connect('localhost', 'mydbusername', 'mydbpassword', 'mydbpassword');
$param_username = $_SESSION['username'];
$autocampaign = $_SESSION["auto_campaign"];
$autor_sql = "SELECT id, subject, day_cycle, enabled, delaysend FROM auto WHERE campaign ='$autocampaign' AND username ='$param_username'";
$autoid = '';
$results = mysqli_query($link, $auto_sql);
if (mysqli_num_rows($results) > 0)
{
while ($row = mysqli_fetch_array($results))
{
$autoid = $row["id"];
$autosubject = $row["subject"];
$autodaycycle = $row["day_cycle"];
$autoenabled = $row["enabled"];
$autodelay = $row["delaysend"];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.calendar-content {
float: left;
width: 100%;
min-height: 112px;
border: 1px solid #ccc;
position: relative;
margin-top: -1px;
}
</style>
<div class="calendar-content">
<div style="margin-left: 40px;margin-top: 20px; height: 40px;">
<span id="autosubject" style="font-size: 25px;color: #0c7ac0;float: left;">Subject: <?php echo $autosubject ?> </span><br>
<div style="margin-left: 35px; margin-top: 15px; height: 40px;">
<form action="" method="post">
<span style="font-size: 15px; color: #ccd5d9; float: left; margin-top: -1px"><a name="autoid" id="autoid" href="#contactModal" role="button" data-toggle="modal">Send a test</a> | <a name="deleteid" id="deleteid" href="/auto/delete_auto.php?id=<?php echo $autoid; ?>"> Delete </a> | Copy to Draft | Settings</span>
</form>
</div>
</div><br>
<!-- email Modal -->
<div id="contactModal" class="modal fade" style="margin-top: 12%;" tabindex="-1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="height: 250px;">
<div class="modal-header" style="margin-bottom: 10px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Send A Test Email</h3>
</div>
<div class="modal-body" style="height: 65%;">
<form action="" method="post">
<label class="label-control" value="">Send test message to email address:</label>
<select name="emails" id="emails" value="" style="width: 400px; margin-top: 10px; margin-bottom: 18px; margin-left: 60px;">
<option selected="selected" value='title'>Title</option>";
</select><br>
<button name="send_email" id="send_email" type="submit" class="btn btn-primary" style="margin-left: 36%;" data-auto-id="<?php echo $autoid; ?>">Send Test</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#send_email').click(function(e) {
$(this)
.html("<span><i class='fa fa-spinner fa-spin'></i> Sending...</span>")
.prop("disabled", true);
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
$('#contactModal').modal('hide');
$("#send_email")
.html("Send Test")
.prop("disabled", false);
}
});
});
});
</script>
<?php
}
?>
Here is the sendtest.php:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else if(isset($_POST))
{
$id = $_POST[$autoid];
echo "hello your id is...";
echo $id;
}
?>
What I want to achieve is when I click on a send a test hyperlink, a modal will display and when I click on a button after I select on a dropdown listbox, I want to fetch the ID from the Delete hyperlink so I can post them in ajax. The reasons I want to post the ID in ajax is because I want to stay on the same page while I want to fetch the information from the mysql database.
Can you please show me an example how I can fetch the ID from the Delete hyperlink to post them in ajax?
Thank you for understanding what I am trying to do.
There are several issues in your code:
1st: data: {ID : "deleteid"}, should be data: {ID : ID }, (you want to send the var, not the string "deleteid")
2nd: var ID = $(this).data('deleteid'); should be var ID = $(this).data('auto-id');, because the data-attribute is data-auto-id="...
3rd: $id = $_POST[$autoid]; will throw an error (undefined variable) & a notice (undefined index). Should be $id = $_POST['ID'], because you call the param "ID" here: data: {ID : varname},
4th: you are missing a ; here: alert(resultData)
Here's the corrected ajax-part:
var ID = $(this).data('auto-id');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : ID },
success: function(resultData) {
alert(resultData);
$('#contactModal').modal('hide');
$("#send_email")
.html("Send Test")
.prop("disabled", false);
}
});
I am designing a simple book application. I have the user login, sell or buy books and they have a few account settings too, including Manage Posts where the user can delete the book they added into the system.
I am needing help on how to do this. When the user presses the Manage Posts button, I would like an input field that the user can type the Book_ID in and a "Delete" button where they can click it to delete the book out of the system.
Now, I wasn't able to set it up to where when you add a book, it links it to that specific user that logs in (no idea how to do that), so the user will be able to delete any book. I ran out of time on this project so I won't worry about that now. I just need the user to be able to see all the books in the database by the fields on a table: Book_ID, ISBN, Title, Author - and then the user inputs the Book_ID into the input field, clicks "Delete" button and the book is deleted from the database by the user.
database name: nextbook
table: books
fields: book_ID, ISBN, Author, Title (want these viewed)
The following is a template of code I have from another page that I think would be similar. Except, I need the Delete SQL put somewhere :
<?php
if(isset($_POST['search']))
{
$valueToSearch = $_POST['valueToSearch'];
$query = "SELECT * FROM books";
$search_result = filterTable($query);
}
else {
$query = "SELECT * FROM books";
$search_result = filterTable($query);
}
// function to connect and execute the query
function filterTable($query)
{
$connect = mysqli_connect("localhost", "Admin", "Password", "nextbook");
$filter_Result = mysqli_query($connect, $query);
return $filter_Result;
}
?>
<!--Html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version2.1(beta4)/IE9.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 30%;
}
th, td {
text-align: left;
padding: 5px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #007d5f;
color: white;
}
</style>
<link rel="stylesheet" href="NextBook1.css"/>
</head>
<body>
<div data-role="page" id="Manage_Posts">
<div data-role="header" data-theme="b">
<h1>NextBook</h1>
Sign Out
</div>
<br>
<div class="logo" align="center">
<img src="Images/image1%20-%20Copy.PNG" width="100" height="100" ">
</div>
<div data-role="content" align="center">
<!--<form action="View_Search_Results_Table.php" method="post" align="center"> -->
<input type="text" name="deletepost" placeholder="Enter ISBN you want to delete">
<input type="submit" name="delete" value="Delete Post"><br><br>
<div style="overflow-x:auto;">
<table border="1px solid black;" align="center">
<tr>
<th>Book ID</th>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
</tr>
</div>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['Book_id'];?></td>
<td><?php echo $row['ISBN'];?></td>
<td><?php echo $row['Title'];?></td>
<td><?php echo $row['Author'];?></td>
</tr>
<?php endwhile;?>
</table>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<form method="post" action="delete.php">
<input type="text" placeholder="Enter the book ID to delete" name="getdeleteid">
<button type="submit" value="Delete book">
</form>
PHP:
<?php
$getdelete = $_POST['getdeleteid'];
$pdo = new PDO('mysql:host=yourhost;dbname=nextbook ','user','password');
$statement = $pdo->prepare("DELETE FROM books WHERE book_ID = ".$getdelete."");
$statement->execute(array(1));
?>
You should be breaking your script down into multiple parts to make the view easier to work with. Also you should have all the classes in their own pages and use an autoloader (spl_autoload_register() or similar) to autoload classes. I have put everything on to one page which looks more complex than it really is. Finally it is helpful to use action words in forms to tell your program you aret trying to do something:
<?php
/*
** #description It's helpful to have a class that just does some general "stuff"
** that all classes could potentially use
*/
class App
{
protected static $singleton;
public function __construct()
{
if(!(self::$singleton instanceof \App))
self::$singleton = $this;
return self::$singleton;
}
# Retrieve the $_POST array or a key from it
public function getPost($key=false)
{
if(!empty($key))
return (isset($_POST[$key]))? $_POST[$key] : false;
return $_POST;
}
}
/*
** #description It's helpful to have a database class for consistent database retrieval and querying
*/
class Database extends \App
{
protected static $con;
protected $query;
# Create and retrieve database connection
public function getConnection()
{
# Create connection if not already set
if(!(self::$con instanceof \PDO))
self::$con = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER,DB_PASS);
# Return the connection
return self::$con;
}
# Query database
public function query($sql,$bind=false)
{
# Bind parameters for public requests
if(!empty($bind)) {
foreach($bind as $key=>$value) {
$bKey = ":{$key}";
$bArray[$bKey] = $value;
}
}
# Prepare sql
if(!empty($bArray)) {
$this->query = $this->getConnection()->prepare($sql);
$this->query->execute($bArray);
}
else
# Do a straight query
$this->query = $this->getConnection()->query($sql);
# Send back the object for chaining
return $this;
}
# Use with the query to retrieve database results
public function getResults()
{
while($row = $this->query->fetch(\PDO::FETCH_ASSOC)) {
$new[] = $row;
}
return (!empty($new))? $new : false;
}
}
/*
** #description Because you are wanting to get database info, may as well extend the Database class
** and use it's querying features
*/
class Books extends Database
{
# Retrieve one or more books
public function getBook($id = false,$type='Book_id')
{
$id = trim($id);
$sql = "SELECT * FROM `books`";
if(!empty($id)) {
$sql .= " WHERE `{$type}` = :0";
$results = $this->getConnection()->query($sql,array($id))->getResults();
return (is_array($results) && count($results) == 1)? $results[0] : $results;
}
return $this->getConnection()->query($sql)->getResults();
}
# Delete book
public function deleteBook($id,$type='ISBN')
{
$this->getConnection()->query("DELETE FROM books WHERE `{$type}` = :0",array($id));
}
}
class View extends Database
{
public static function createSrc($path,$type='js')
{
if($type == 'js')
return '<script type="text/javascript" src="'.$path.'"></script>';
elseif($type == 'css')
return '<link rel="stylesheet" href="'.$path.'" />';
}
}
# Should put these defines into a config.php file that you load at the top of every page
define('DB_HOST','localhost');
define('DB_NAME','nextbook');
define('DB_USER','root');
define('DB_PASS','');
session_start();
# Create instance of Books
$App = new Books();
# Creaet the book list (could be based on the search)
$search = $App->getBook($App->getPost('search'));
# Check if the user is trying to delete a book
if($App->getPost('action') == 'delete_isbn') {
$App->deleteBook($App->getPost('deletepost'));
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<?php echo View::createSrc('http://html5shiv.googlecode.com/svn/trunk/html5.js') ?>
<?php echo View::createSrc('http://ie7-js.googlecode.com/svn/version2.1(beta4)/IE9.js') ?>
<?php echo View::createSrc('http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css','css') ?>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<?php echo View::createSrc('http://code.jquery.com/jquery-1.11.1.min.js') ?>
<?php echo View::createSrc('http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js') ?>
<style>
table {
border-collapse: collapse;
width: 30%;
}
th, td {
text-align: left;
padding: 5px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #007d5f;
color: white;
}
</style>
<link rel="stylesheet" href="NextBook1.css"/>
</head>
<body>
<div data-role="page" id="Manage_Posts">
<div data-role="header" data-theme="b">
<h1>NextBook</h1>
Sign Out
</div><br>
<div class="logo" align="center">
<img src="Images/image1%20-%20Copy.PNG" width="100" height="100" />
</div>
<div data-role="content" align="center">
<form action="" method="post" align="center">
<input type="hidden" name="action" value="delete_isbn" />
<input type="text" name="deletepost" placeholder="Enter ISBN you want to delete">
<input type="submit" name="delete" value="Delete Post">
</form>
<br /><br />
<table border="1px solid black;" align="center">
<tr>
<th>Book ID</th>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
</tr>
<!-- populate table from mysql database -->
<?php foreach($search as $row) { ?>
<tr>
<td><?php echo $row['Book_id'];?></td>
<td><?php echo $row['ISBN'];?></td>
<td><?php echo $row['Title'];?></td>
<td><?php echo $row['Author'];?></td>
</tr>
<?php } ?>
</table>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I am facing a problem in accessing the value of hidden field.
I have made an image cropping application in which i am asking the user to upload an image and a UI is provided to help the user to select the area to crop. Then the top left x and y coordinate and the width and height of the selected area is stored as a semicolon separated string in a hidden input field and when the 'Crop' button is clicked the image and the hidden filed value is passed to the crop.php file. But the values of the hidden field is not accessible in the php file.
My html file which provides browse and crop functionality -
<!doctype html>
<html>
<head>
<title>
Crop
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script>
var app = angular.module('main-App',[]);
app.controller('AdminController', function($scope, $http) {
$scope.form = [];
$scope.files = [];
$scope.progressBar=0;
$scope.progressCounter=0;
$scope.submit = function() {
alert('Sub');
$scope.form.image = $scope.files[0];
$http({
method : 'POST',
url : 'crop.php',
processData: false,
transformRequest: function (data) {
var formData = new FormData();
formData.append("image", $scope.form.image);
return formData;
},
data : $scope.form,
headers: {
'Content-Type': undefined
},
uploadEventHandlers: {
progress: function (e) {
if (e.lengthComputable) {
$scope.progressBar = (e.loaded / e.total) * 100;
$scope.progressCounter = $scope.progressBar;
$("#completion").css("width", $scope.progressBar+'%');
}
}
}
}).then(function successCallback(response) {
alert($scope.form.params);
});
};
$scope.uploadedFile = function(element) {
$scope.currentFile = element.files[0];
var reader = new FileReader();
reader.onload = function(event) {
$scope.image_source = event.target.result
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
reader.readAsDataURL(element.files[0]);
$('img#photo').imgAreaSelect({
onSelectStart: {enable:true},
onSelectEnd: function (img, selection) {
document.getElementById("params").value=selection.x1+';'+selection.y1+';'+selection.width+';'+selection.height;
alert(document.getElementById("params").value);
}
});
}
});
</script>
<style>
html,body {
height: 100%;
}
.wrapper{
height:auto;
}
.wrapper img {
height:100%;
color:grey;
text-align: center;
line-height:100px;
vertical-align: middle;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div ng-app="main-App" ng-controller="AdminController">
<form ng-submit="submit()" name="form" role="form" enctype="multipart/form-data">
<div class="container-fluid">
<div class="row flex-items-xs-center">
<div class="col-md-9">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="wrapper">
<img id="photo" name="photo" src="{{image_source}}" alt="Image preview..." class="img-responsive img-thumbnail" style="border-style:dashed">
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<label class="btn btn-primary">
<input ng-model="form.image" type="file" class="form-control input-lg" name="image" id="image"
accept = "image/*"
onchange="angular.element(this).scope().uploadedFile(this)"
style="display:none;" >
<span class="glyphicon glyphicon-folder-open"></span>
Browse
</label>
</div>
<div class="col-md-2">
<label class="btn btn-success">
<input type="submit" id="submit" value="Submit" style="display:none;"/>
<span class="glyphicon glyphicon-cloud-upload"></span>
Crop
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="params" id="params" value="0;0;0;0" ng-model="params" />
</form>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" id ="completion" name="completion"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" style="width:0%;height:10px;border-width:0px;border-radius:2px;">
</div>
</div>
</div>
</div>
</div>
<br/>
<br/>
the UI -
crop.php -
<?php
$uncropped_path = '/var/www/html/images/original/';
$cropped_path = '/var/www/html/images/cropped/';
if(isset($_FILES['image'])){
//$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
$image = $_FILES['image']['name'];
move_uploaded_file($_FILES["image"]["tmp_name"], $uncropped_path.$image);
$data = json_decode(file_get_contents("php://input"));
print_r($data);
}else{
echo "Image Is Empty";
}
function doResize($filename,$size,$resize_path)
{
$image = new Imagick();
$file = file_get_contents($filename);
$image->readImageBlob($file);
$dimensions = $image->getImageGeometry();
$pathInfo = pathinfo($filename);
$name = $pathInfo['filename'];
$srcWidth = $dimensions['width'];
$srcHeight = $dimensions['height'];
list($resWidth,$resHeight) = getResizeDim($size,$srcWidth,$srcHeight);
$image->resizeImage($resWidth,$resHeight,Imagick::FILTER_LANCZOS,.85);
$image->writeImage($resize_path);
}
function getResizeDim($size,$srcWidth,$srcHeight)
{
$width;
$height;
if($srcHeight > $srcWidth)
{
if($srcHeight > $size)
$height = $size;
else $height = $srcHeight;
$width = ceil($height*($srcWidth/$srcHeight));
}
else {
if($srcWidth > $size)
$width = $size;
else $width = $srcWidth;
$height = ceil($width*($srcHeight/$srcWidth));
}
return array($width,$height);
}
When i try to print the data received in php i get the following -
Moreover the data array in the php seems to be empty.
I have read various similar questions on stackoverflow but none of them worked in my case.
I have encountering a problem..
It outputted an error : Cannot modify header information..
What would be the cause? And how could i fix it..
Thanks for the help.. I've check all, but then still I cannot fix it. What would be the problem?
Here is my code below:
<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.3.0.60747 -->
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Salsa|PT+Sans&subset=latin">
<script src="jquery.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script>jQuery(function ($) {
'use strict';
if ($.fn.themeSlider) {
$(".art-slidecontainera65d557e889141cb8638b82feda1c335").each(function () {
var slideContainer = $(this), tmp;
var inner = $(".art-slider-inner", slideContainer);
inner.children().filter("script").remove();
var helper = null;
if ($.support.themeTransition) {
helper = new BackgroundHelper();
helper.init("fade", "next", $(".art-slide-item", inner).first().css($.support.themeTransition.prefix + "transition-duration"));
inner.children().each(function () {
helper.processSlide($(this));
});
} else if (browser.ie && browser.version <= 8) {
var slidesInfo = {
".art-slidea65d557e889141cb8638b82feda1c3350": {
"bgimage" : "url('images/slidea65d557e889141cb8638b82feda1c3350.jpg')",
"bgposition": "0 0",
"images": "",
"positions": ""
},
".art-slidea65d557e889141cb8638b82feda1c3351": {
"bgimage" : "url('images/slidea65d557e889141cb8638b82feda1c3351.jpg')",
"bgposition": "0 0",
"images": "",
"positions": ""
}
};
$.each(slidesInfo, function(selector, info) {
processElementMultiplyBg(slideContainer.find(selector), info);
});
}
inner.children().eq(0).addClass("active");
slideContainer.themeSlider({
pause: 2600,
speed: 600,
repeat: true,
animation: "fade",
direction: "next",
navigator: slideContainer.siblings(".art-slidenavigatora65d557e889141cb8638b82feda1c335"),
helper: helper
});
});
}
});
</script></head>
<body>
<div id="art-main">
<header class="art-header">
<div class="art-shapes">
</div>
<h1 class="art-headline">
FPES
</h1>
<h2 class="art-slogan">Faculty Performance Evaluation System.</h2>
<?php
//connect to the database
$connect = mysql_connect("localhost","root","");
mysql_select_db("db_fpes",$connect); //select the table
if(isset($_POST['btn_submit'])){
$username = $_POST['username'];
$password = $_POST['pass'];
$result = mysql_query ("SELECT * FROM professors where fac_stat = 1 and Faculty_code = '".$username."' and Faculty_code = '".$password."' ");
if($username == 'admin' && $password == 'admin' && mysql_num_rows($result) == 0 ){
header('Location: admin/home.php'); die;
}
else
{
$row = mysql_fetch_assoc($result);
if($row['system_user'] == 1){
header('Location: Grading/index.php'); die;
}
else if($row['system_user'] == 2){
header('Location: Secretary/home.php'); die;
}
else
header('Location: index.php'); die;
}
}
?>
<nav class="art-nav">
<ul class="art-hmenu"><li>Home</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content"><article class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-2" style="width: 100%" >
<p></p><div id="a65d557e889141cb8638b82feda1c335" style="position: relative; display: inline-block; z-index: 0; margin: 0px; border-width: 0px; " class="art-collage">
<div class="art-slider art-slidecontainera65d557e889141cb8638b82feda1c335" data-width="900" data-height="287">
<div class="art-slider-inner">
<div class="art-slide-item art-slidea65d557e889141cb8638b82feda1c3350" >
</div>
<div class="art-slide-item art-slidea65d557e889141cb8638b82feda1c3351" >
</div>
</div>
</div>
<div class="art-slidenavigator art-slidenavigatora65d557e889141cb8638b82feda1c335" data-left="1" data-top="1">
</div>
</div>
<p>
</p><p>
</p>
</div>
</div>
</div>
</div>
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 67%" >
<h2><span style="color: rgb(128, 0, 0); line-height: 51px; font-size: 40px;">Welcome </span><span style="color: rgb(108, 127, 147); line-height: 31px; font-size: 28px;">to our site!</span></h2>
<h3><img width="250" height="195" alt="" src="images/1037312_small500.jpg" style="float: left; margin-right: 15px;" class="">Performance Faculty Evalutaion System. </h3>
<p>Insert Description Here!.<br></p>
</div>
<div class="art-layout-cell layout-item-4" style="width: 33%" >
<form method = "post" action = "">
<h1>Please Login<br></h1><p style="margin-top: 10px;"> Username: <input type="text" name = "username" > </p><p>
<p> Password: <input type="text" name = "pass"></p><p style="text-align: right;">
<input type = "submit" name = "btn_submit" class="art-button" value = "Login"/><br></p>
</form>
</div>
</div>
</div>
</article></div>
</div>
</div>
</div>
</div>
<footer class="art-footer">
<div class="art-footer-inner">
<p>GoMiracles © 2014 - 2015. All Rights Reserved.<br></p>
</div>
</footer>
</div>
</body></html>
Headers already sent is an issue where you try to redirect an user with header() or when you try to start a session session_start() when the browser already rendered content (for example html, but can also be a PHP echo statement for example).
To fix the issue, check if you have any echo() statements or raw HTML before sending headers, and check if you do not have whitespaces in front of <?php.
A more detailed answer to help you fix this issue can be found here: https://stackoverflow.com/a/8028987/4274852
I suspect you did not provide us with all your code, as I cannot find any specific problems in yours at the moment. I hope the link above helps you to debug your code, if not: Make sure to post everything above your PHP code.
Just a note: I see you are still using mysql_query statements, which are deprecated. Use msqli or PDO instead.
Edit
I see you posted your code, try replacing all your PHP code at the top of your page instead of in the middle and it should work. In your current code, you have raw HTML before the PHP code (<h1> and <p> elements in this case), which makes it impossible to send more header data using header(), as all headers were already sent before rendering the page.
I editted your code to fix the issue hopefully, you can find it here (instead of posting it here, which would make an awkward long answer):
http://pastebin.com/0JfBdjU5
The header.php has a <div id="content"></div> and then will load the page user.php
Q1: Is javascript coding on the header.php can not interact with the loaded content?
Therefore I put the js code on the loaded page, but i found a little bit strange.
Q2:
The paging function is working, suppose it is on page 4.
After I editting one of the row, the page go back to first page. I want to keep it on page 4.
< 1 2 3 4 5 6>
I want to store the current link as a text within a after i click the paging, however the link is stored first and then page will refresh and clear the data.
The href of the paging links will look like
localhost://blog/index.php/admin/users/show/10
localhost://blog/index.php/admin/users/show/20
localhost://blog/index.php/admin/users/show/30
Please point out the solution or suggest another better solution
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
View:header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="<?= $css; ?>bootstrap.css" rel="stylesheet" type="text/css">
<link href="<?= $css; ?>basic/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?= $js; ?>jquery.js"></script>
<script type="text/javascript" src="<?= $js; ?>jquery_validate.js"></script>
<script type="text/javascript" src="<?= $js; ?>form_control.js"></script>
<script type="text/javascript" src="<?= $js; ?>additional-methods.min.js"></script>
</head>
<body>
<style>
#content{
background-color: #D0D0D0;
float:left;
width:80%;
}
#main-frame{
width:100%;
}
#list{
width:18%;
float:left;
}
#delete-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
#edit-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
body{
font-size:2em;
}
</style>
<script language="javascript">
$(document).ready(function() {
init();
$('.open').click(function(e) {
e.preventDefault();
$.post($(this).attr('href'), function(data) {
$('#content').html(data);
});
});
});
function init() {
$.post(
"<?php echo site_url("admin/users/show");?>", function(data) {
$("#content").html(data);
}
);
}
</script>
<div id="header">
<div id="logo">
</div>
<?php if ($this->AuthModel->check_admin_log()) { ?>
Logout
<?php }
?>
</div>
<ul id="list">
<li>
Users Manage
</li>
<li>
Group Manage
</li>
<li>
Post Mange
</li>
<li>
System Setting
</li>
<li>
<a href="<?php echo site_url('logout/admin') ?>" >Logout</a>
</li>
</ul>
<div id="content" class="box"></div>
view:users.php
<table border="1">
<tr><th>User Id</th><th>User Name</th><th>Email</th><th>Registeration Date</th><th>Group</th><th>State</th><th>Operation</th></tr>
<?php foreach ($users as $user): ?>
<tr>
<td><?= $user->id; ?></td>
<td><?= $user->username; ?></td>
<td><?= $user->email; ?></td>
<td><?= mdate('%Y-%m-%d', $user->registeration_time); ?></td>
<td><?= $user->user_type; ?></td>
<td><?= $user->account_status; ?></td>
<td>
<button type="button" value="<?php echo $user->id; ?>" name="delete">X</button>
<button type="button" value="<?php echo $user->id; ?>" name="edit">edit</button>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $links ?>
<div id="delete-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Are you sure to delete the account?</h3>
<form action="<?php echo site_url('admin/users/delete') ?>" id="deleteForm">
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<div id="edit-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Edit User:<span id="username"></span></h3>
<form action="<?php echo site_url('admin/users/edit') ?>" id="editForm">
<table>
<tr>
<td>Group</td>
<td>
<select name="group" id="group">
<option value="1">Nomal User</option>
<option value="2">Amin</option>
</select>
</td>
</tr>
<tr>
<td>State</td>
<td>
<select name="state" id="state">
<option value="1">Activated</option>
<option value="2">Non-Activated</option>
<option value="3">Blocked</option>
</select>
</td>
</tr>
</table>
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<script>
$(document).ready(function() {
$(".cancel").click(function() {
$(this).parent('.alert-box').hide();
});
$("input[name=cancel]").click(function() {
$(this).parents('.alert-box').hide();
});
$("button[name=delete]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#delete-alert-box").show();
$('#delete-alert-box').find('input[type=hidden]').attr('value', $user_id);
}
});
$("button[name=edit]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#edit-alert-box").show();
var $tr = $(this).parents('tr');
var $tds = $tr.find('td');
$('#edit-alert-box').find('input[type=hidden]').attr('value', $user_id);
$('#group').find('option').each(function(index) {
$(this).removeAttr('selected');
});
$('#group').find("option[value=" + get_group_code($($tds[4]).html()) + "]").attr('selected', 'selected');
$('#state').find("option[value=" + get_account_code($($tds[5]).html()) + "]").attr('selected', 'selected');
}
});
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
$('.paging a').click(function(e) {
e.preventDefault();
$.post($(this).attr("href"), function(data) {
$("#content").html(data);
});
});
});
function get_group_code(name) {
switch (name) {
case "Normal User":
return 1;
case "Admin":
return 2;
}
}
function get_account_code(name) {
switch (name) {
case "Activated":
return 1;
case "Non-Activated":
return 2;
case "Blocked":
return 3;
}
}
</script>
Controller: admin/users.php
function pagination() {
$this->load->library('pagination');
$config['base_url'] = site_url('admin/users/show');
$config['total_rows'] = $this->UsersModel->get_num_rows();
$config['per_page'] = '10';
$config['uri_segment'] = 4;
$config['full_tag_open'] = '<p class="paging">';
$config['full_tag_close'] = '</p>';
$this->pagination->initialize($config);
return $this->pagination->create_links();
}
public function show() {
$data['users'] = $this->UsersModel->get_users(10, $this->uri->segment(4, 0));
$data['links'] = $this->pagination();
$this->load->view('admin/users', $data);
}
public function delete() {
$user_id = $this->input->post('user_id');
if (!$this->UsersModel->delete_user($user_id)) {
echo "Unknown error";
}
$this->show();
}
public function edit() {
$user_id = $this->input->post('user_id');
$state = $this->input->post('state');
$group = $this->input->post('group');
$data = array(
'id' => $user_id,
'account_status_code' => $state,
'group_status_code' => $group
);
if (!$this->UsersModel->edit_user($data)) {
echo "Unknown error";
}
$this->show();
}
The paging function is working, suppose it is on page 4. After I
editting one of the row, the page go back to first page. I want to
keep it on page 4.
When opening that 4-th page in a browser, you can save its number in session and then after editing you can read that value you stored in session i.e - 4.
#session_start();
function indexAction()
{
$_SESSION['curr_page'] = 4; // or take it from $_GET
}
function saveAction(){
// .... do stuff....
header('location: page.php?page=' . $_SESSION['curr_page']);
}
first the best way to do paging is via get, to get the url friendly and rotating the User in case it needs to pass it on.
you need set data in console.log(), for view if data this value,
if the expected values are coming up to the date, try switching by append html:
example.
$ ("# content") html ('.');
$ ("# content") append (date).;