I have a question for you to upgrade my knowledge.
I am trying to create an inline editing page, the data are stored in a database.
In the table "content" I create 2 fields for testing purpose, the "id" and the "text" field.
If I want to modify the field with the "id=25" or id=X, I know how to do it manually, just specify in the MySQL Query "WHERE id=25", but if I have a list of 1000 entries, how can I modify the query to get the ID on the fly?
Here is the code, I am playing on:
index.php file
<style>
body {
font-family: Helvetica,Arial,sans-serif;
color:#333333;
font-size:13px;
}
h1{
font-family: Georgia, Times, serif;
font-size: 28px;
}
a{
color: #0071D8;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
:focus {
outline: 0;
}
#wrap{
width: 500px;
margin:0 auto;
overflow:auto;
}
#content{
background: #f7f7f7;
border-radius: 10px;
}
#editable {
padding: 10px;
}
#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}
.success{
background: #B6D96C;
}
.error{
background: #ffc5cf;
}
#footer{
margin-top:15px;
text-align: center;
}
#save{
display: none;
margin: 5px 10px 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:700;
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
#save:hover
{
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#save").click(function (e) {
var content = $('#editable').html();
$.ajax({
url: 'save.php',
type: 'POST',
data: {
content: content
},
success:function (data) {
if (data == '1')
{
$("#status")
.addClass("success")
.html("Data saved successfully")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
else
{
$("#status")
.addClass("error")
.html("An error occured, the data could not be saved")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
}
});
});
$("#editable").click(function (e) {
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
$("#save").hide();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="status"></div>
<div id="content">
<div id="editable" contentEditable="true">
<?php
//get data from database.
include("db.php");
$sql = mysql_query("select * from content");
$row = mysql_fetch_array($sql);
echo $row['id'];
echo "<br />";
echo $row['text'];
?>
</div>
<button id="save">Save</button>
</div>
</div>
</body>
And here is the save.php file:
include("db.php");
$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content); //escape string
$sql = "UPDATE content SET text = '$content' WHERE id = '$id' ";
if (mysql_query($sql))
{
echo 1;
}
I know that this could be a stupid question but I am a newbie.
Thank you in advance for the help.
UPDATE:
thanx to Luis I fixed my old problem but I don't know why if I put all the code in a while only the "Save" button of the first entry is working good, the rest not, any hint?
At the moment I am testing only "description_text".
Here is the "while" code:
<?php
/////////// Now let us print the table headers ////////////////
$query =" SELECT * FROM gallery ORDER BY id DESC ";
$result = mysql_query($query) or die(mysql_error());
echo "<div style='width: 100%; text-align: center;'>";
echo "<table style='margin: auto auto;'>";
echo "<tr><th>ID</th><th>Image</th><th>Category</th><th>Description</th><th>Added on</th></tr>";
while($ordinate = mysql_fetch_array($result))
{
$id = $ordinate['id'];
$img_name = $ordinate['img_name'];
$category = $ordinate['category'];
$description_text = $ordinate['description_text'];
$insert_datetime = $ordinate['insert_datetime'];
echo "<tr><td style='width: 20px;'>".$id."</td><td style='width: 210px;'><img src='../../upload/content/uploaded_images/". $img_name ."' width='200px'></td><td style='width: 100px;'>".$category."</td><td style='width: 100px;'><div id='status'></div><div id='content'><div id='editable' contentEditable='true'>".$description_text."</div><button id='save'>Save</button></div></td><td style='width: 100px;'>".$insert_datetime."</td></tr>";
}
echo "</table><br /><br /></div>";
?>
on index.php move this part of code to the beginning, so you can use same vars in the rest of the script.
<?php
//get data from database.
include("db.php");
$sql = mysql_query("select * from content");
$row = mysql_fetch_array($sql);
// echo $row['id']; but keep this ones in its original place inside their <%php %> tags
// echo "<br />";
// echo $row['text'];
?>
Later in the ajax call, insert this PHP lines:
data: {
content: content
<?php
echo ", id: ".$row['id'];
echo ", token: '".md5('my SALT text'.(int)$row['id'])."'"; // strongly!!! recomended, not mandatory
?>
},
and on save.php
$id = (int)$_POST['id']; // (int) sanitizes id
$token = $_POST['token'];
if(md5('my SALT text'.$id)!=$token) die(); // or whatever but do not execute update
// perhaps echo 0; die();
// ... rest of your code ....
$sql = "UPDATE content SET text = '$content' WHERE id = $id"
the token, prevents the risk that someone uses your save.php as a way to inject whatever on every post on the table.
At least, an advice: use mysqli_query (notice the i) instead of mysql_query as this last is deprecated. Also, but with more diferences, you can use PDO
Instead of simply echoing the $row['id'], echo it inside an HTML element with specific id, so that it can be accessed from jQuery and can be posted.
<span id="idfield"><?php echo $row['id']; ?></span>
<button id="save">Save</button>
</div>
Then, inside the javascript :
$("#save").click(function (e) {
var content = $('#editable').html();
var id = $('#idfield').html();
Use it as a parameter in POST:
$.ajax({
url: 'save.php',
type: 'POST',
data: {
content: content,
id: id
},
Related
I am developing a site which allow uploading multiple images for one id. But I want to upload images into text format into database and real image to my directory. But before uploading image into database I preview images using JavaScript's FileReader.
My problem is, when I click remove in preview image , that image should also be removed from images that I want to upload.
And second, that I don't know how to do this, when I click first time and select some images, then again
I select some images by clicking input field, the images selected second time is being uploaded into database instead of all.
Here are my codes
// image preview
$("#productImage").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$('.image-preview').append("<div class=\"product-image\">" +
"<img class=\"image-thumb\" src=\"" + e.target.result +
"\" title=\"" + file.name + "\" + data-file = \"" + file.name +
"\"/>" +
"<br/><div class=\"remove-image\">❌ Remove</span>" +
"</div>");
$('.remove-image').click(function(e) {
$(this).parent('.product-image').remove();
});
});
fileReader.readAsDataURL(f);
}
});
.form-elements {
display: flex;
flex-direction: column;
justify-content: left;
padding: 10px 0;
}
.form-elements .input-label {
padding: 10px 0;
}
.input-label label {
font-family: sans-serif;
font-size: 20px;
color: #fff;
}
.image-preview {
display: flex;
flex-wrap: wrap;
padding: 10px 0;
margin-bottom: 5px;
}
.image-preview .product-image {
display: block;
margin: 5px 10px;
width: 150px;
text-align: center;
}
.image-preview .product-image .image-thumb {
width: 100%;
border-radius: 10px;
cursor: pointer;
}
.image-preview .product-image .remove-image {
padding: 5px;
margin: 5px 0;
border-radius: 10px;
font-family: sans-serif;
font-size: 15px;
background: #ff3636;
color: #fff;
cursor: pointer;
}
.image-preview .product-image .remove-image:hover {
background: red;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- product images -->
<div class="form-elements outside">
<div class="input-label">
<label for="productName">Select product image(s)</label>
</div>
<div class="image-preview">
<!-- Images will be here -->
</div>
<input type="file" id="productImage" name="productImage[]" multiple />
</div>
PHP code snippet
<?php
//connection
$connect = mysqli_connect('localhost','root','','sahi_chuno_db');
$image = $_FILES['productImage']['name'];
$temp_image = $_FILES['productImage']['tmp_name'];
$product_id = 1;
for ($i=0; $i < count($image); $i++) {
$query = $connect->prepare("INSERT INTO `product_images` (`product_id`, `product_image`)
VALUES(?, ?)");
$query -> bind_param('is',$product_id, $image[$i]);
$run = $query -> execute();
if($run){
//move images to directory
move_uploaded_file($temp_image[$i], "../uploads/$image[$i]");
} else{
echo "Not uploaded";
}
}
?>
You can use
<button onclick = "myFunction()">Remove</button> /Remove button in preview
function myFunction() {
document.getElementById("productImage").value = "";
}
To clear the input field and if it is cleared it will not be uploaded.
Note : For more details Click Here
With help from some of you guys, I managed to partially get the functionality I wanted. Now I'm stuck again, and I'd need some more help.
Check the live version here, the code is below. What I need is:
-
Figure out how to switch to the next/previous product on both sides of the screen with a single click of the arrows. The left side works as expected, the right one doesn't switch in any case.
-
Make the results of slika1, slika2 and slika3 (they contain the filenames of three separate images) on the right side display as links that will switch the image on the left side.
-
Modify the code to prevent SQL injection attacks (optional at the moment, but it would be welcome)
I'm pretty sure the whole functionality could be contained in a single file to be called with POST, but I'm really not sure how to do it properly. That would be a bonus too!
Here's my code:
HTML (index.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
<link href='https://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( data );
});
$.post( "info.php", { id: "1"}, function( data ) {
$("#info").html( data );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
});
return false;
});
$("#info").on("click",".get_info", function(e){
var info_id = $(this).attr('data-id');
$("#info").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "info.php", { pic: info_id}, function( data ) {
$("#info").html( data );
});
return false;
});
});
</script>
<title>2199</title>
</head>
<body>
<div class="navbar-wrapper">
<div class="container"> <img src="logo.png" class="boxy"> </div>
</div>
<div class="jumbotron special">
<div id="picture" align="center"> </div>
</div>
<div class="jumbotron special2">
<div id="info" align="center"> </div>
</div>
</body>
</html>
HTML (art.php):
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_picture=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->id;
}
//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->id;
}
//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();
if($result){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz"></span>':'';
//output html
echo '<div class="prod_img" style="background-image: url(pictures/';
echo $result->slika1;
echo '); background-size: contain; background-repeat: no-repeat; background-position: center center;">';
echo '<h3>';
echo $prev_button;
echo $result->artikel;
echo $next_button;
echo '</h3>';
echo '</div>';
}
HTML (info.php):
<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["info"]) && is_numeric($_POST["info"]))
{
$current_info = filter_var($_POST["info"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_info=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id > $current_info ORDER BY id ASC LIMIT 1")->fetch_object();
if($result2){
$next_id = $result2->id;
}
//get previous picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id < $current_info ORDER BY id DESC LIMIT 1")->fetch_object();
if($result2){
$prev_id = $result2->id;
}
//get details of current from database
$result2 = $mysqli->query("SELECT artikel, slika1, slika2, slika3, dim1, dim2, dim3, obdelava, dodatno FROM gola WHERE id = $current_info LIMIT 1")->fetch_object();
if($result2){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz-wht"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz-wht"></span>':'';
//output html
echo '<div class="info">';
echo '<h3 style="color: #fff !important;">';
echo $prev_button;
echo $result2->artikel;
echo $next_button;
echo '</h3>';
echo '<br />';
echo '<p>';
echo $result2->slika1;
echo '<br />';
echo $result2->slika2;
echo '<br />';
echo $result2->slika3;
echo '<br />';
echo $result2->dim1;
echo '<br />';
echo $result2->dim2;
echo '<br />';
echo $result2->dim3;
echo '<br />';
echo $result2->obdelava;
echo '<br />';
echo $result2->dodatno;
echo '</p>';
echo '</div>';
}
CSS:
html, body {
height: 100%;
background-color: #fff;
font-size: 62.5%;
}
.special, .special .jumbotron {
height: 100%;
background-color: white;
border: 0px solid red;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
height: 100%;
background-color: #62a70f;
border: 0.5rem solid #fff;
border-radius: 3rem;
margin-bottom: 0px !important;
padding: 1rem;
}
.logo {
border: 1px solid red;
width: 10%;
min-height: 100%;
position: relative;
height: 100%;
}
#picture {
border: 0px red solid;
height: 100%;
background: #fff;
}
.prod_img {
height: 100%;
}
h3 {
font-family: 'Syncopate', sans-serif;
font-size: 24px;
font-size: 2.4rem;
color: #62a70f;
}
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 2.5%;
right: 5%;
width: 25%;
padding: 1rem;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
#media (min-width:768px) {
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 5%;
right: 45%;
width: 10%;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
.navbar {
min-height: 10% !important;
max-height: 10% !important;
height: 10%;
background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;
border: 0px solid green;
background-color: #0e0e0e;
animation-name: example;
animation-duration: 1s;
animation-timing-function: ease;
}
.navbar-header {
border: 0px solid green;
min-height: 100%;
}
.logo {
visibility: collapse;
}
.special, .special .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
h3 {
font-size: 48px;
font-size: 4.8rem;
}
.rujz {
font-size: 36px;
font-size: 3.6rem;
color: #62a70f;
margin: 0.5em;
}
.rujz-wht {
font-size: 36px;
font-size: 3.6rem;
color: #fff;
margin: 0.5em;
}
}
#keyframes example {
0% {
bottom:-10%;
}
100% {
bottom:0%;
}
}
As always, thanks in advance!
i suggest using the carousel in bootstrap, since it's much better than what you are trying to achieve using Javascript.
Also, your MySQL queries can be shortened and changed into a more efficient code, by using a whileloop to output in to different sections.
But to not complicate things,
I assume that you are trying to get 2 different sections, one with a image and another with infomation? If so, you would want to cycle between 2 same slideshow with the same function. To do this,
<div id="Section1">Description</div>
<div id="Section1">slika1</div>
<div id="Shift"> Next </div>
and having a seperate javascript to cycle through each section
$(document).ready(function () {
$("#Section1").cycle();
$("#shift").click(function () {
$("#Section1").cycle('next');
});
});
a live example could be viewed here : http://jquery.malsup.com/cycle/pager11.html
edit: i wrote this entire answer without understanding your code.. so.. further clarifications could help :)
UPDATE:
Using #kyeiti's solution, I managed to get the other info where I need it, but I'm unable to navigate; I can go back and forward on the left side, but I can't get the right side to update. Also, if this could be accomplished with a single external PHP file it would be great. To make things clear, I put the whole thing online, you can check it out here. Also, I updated the code sections to reflect the latest changes.
UPDATE 2:
After some more help from #kyeiti, I'm trying to get it working with only 1 external PHP. The JS code is exactly as per #kyeiti's updated answer, while my art.php (now the only external file) looks like below. When I open index.php, I get nothing related to the two divs in the code. I also tried inserting them into the index file itself, but obviously that didn't work either...
Current art.php:
<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_picture=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->id;
}
//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->id;
}
//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();
if($result){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz"></span>':'';
//output html
echo "<div id='loaded_picture'>";
echo "test"; // Put everything that goes into the picture div here
echo "</div>";
echo "<div id='loaded_text'>";
echo "test"; // And everything that goes into the text div here
echo "</div>";
}
Original post:
I have two main divs in my page, the left side displays a photo and the right side should display some info about a specific product.
I get all the data out of MySQL and managed to hack together a working solution to navigate. I can go forward and backward using next/prev buttons and the image changes.
Now for some code:
HTML (index.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
<link href='https://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( data );
});
$.post( "info.php", { id: "1"}, function( data ) {
$("#info").html( data );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
});
return false;
});
$("#info").on("click",".get_info", function(e){
var info_id = $(this).attr('data-id');
$("#info").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "info.php", { pic: info_id}, function( data ) {
$("#info").html( data );
});
return false;
});
});
</script>
<title>2199</title>
</head>
<body>
<div class="navbar-wrapper">
<div class="container"> <img src="logo.png" class="boxy"> </div>
</div>
<div class="jumbotron special">
<div id="picture" align="center"> </div>
</div>
<div class="jumbotron special2">
<div id="info" align="center"> </div>
</div>
</body>
</html>
HTML (art.php):
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_picture=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->id;
}
//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->id;
}
//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();
if($result){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz"></span>':'';
//output html
echo '<div class="prod_img" style="background-image: url(pictures/';
echo $result->slika1;
echo '); background-size: contain; background-repeat: no-repeat; background-position: center center;">';
echo '<h3>';
echo $prev_button;
echo $result->artikel;
echo $next_button;
echo '</h3>';
echo '</div>';
}
HTML (info.php):
<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["info"]) && is_numeric($_POST["info"]))
{
$current_info = filter_var($_POST["info"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_info=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id > $current_info ORDER BY id ASC LIMIT 1")->fetch_object();
if($result2){
$next_id = $result2->id;
}
//get previous picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id < $current_info ORDER BY id DESC LIMIT 1")->fetch_object();
if($result2){
$prev_id = $result2->id;
}
//get details of current from database
$result2 = $mysqli->query("SELECT artikel, slika1, slika2, slika3, dim1, dim2, dim3, obdelava, dodatno FROM gola WHERE id = $current_info LIMIT 1")->fetch_object();
if($result2){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz-wht"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz-wht"></span>':'';
//output html
echo '<div class="info">';
echo '<h3 style="color: #fff !important;">';
echo $prev_button;
echo $result2->artikel;
echo $next_button;
echo '</h3>';
echo '<br />';
echo '<p>';
echo $result2->slika1;
echo '<br />';
echo $result2->slika2;
echo '<br />';
echo $result2->slika3;
echo '<br />';
echo $result2->dim1;
echo '<br />';
echo $result2->dim2;
echo '<br />';
echo $result2->dim3;
echo '<br />';
echo $result2->obdelava;
echo '<br />';
echo $result2->dodatno;
echo '</p>';
echo '</div>';
}
CSS (shall you need it):
html, body {
height: 100%;
background-color: #fff;
font-size: 62.5%;
}
.special, .special .jumbotron {
height: 100%;
background-color: white;
border: 0px solid red;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
height: 100%;
background-color: #62a70f;
border: 0.5rem solid #fff;
border-radius: 3rem;
margin-bottom: 0px !important;
padding: 1rem;
}
.logo {
border: 1px solid red;
width: 10%;
min-height: 100%;
position: relative;
height: 100%;
}
#picture {
border: 0px red solid;
height: 100%;
background: #fff;
}
.prod_img {
height: 100%;
}
h3 {
font-family: 'Syncopate', sans-serif;
font-size: 24px;
font-size: 2.4rem;
color: #62a70f;
}
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 2.5%;
right: 5%;
width: 25%;
padding: 1rem;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
#media (min-width:768px) {
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 5%;
right: 45%;
width: 10%;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
.navbar {
min-height: 10% !important;
max-height: 10% !important;
height: 10%;
background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;
border: 0px solid green;
background-color: #0e0e0e;
animation-name: example;
animation-duration: 1s;
animation-timing-function: ease;
}
.navbar-header {
border: 0px solid green;
min-height: 100%;
}
.logo {
visibility: collapse;
}
.special, .special .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
h3 {
font-size: 48px;
font-size: 4.8rem;
}
.rujz {
font-size: 36px;
font-size: 3.6rem;
color: #62a70f;
margin: 0.5em;
}
.rujz-wht {
font-size: 36px;
font-size: 3.6rem;
color: #fff;
margin: 0.5em;
}
}
#keyframes example {
0% {
bottom:-10%;
}
100% {
bottom:0%;
}
}
Now, my question is the following:
The image and product name display correctly inside <div id="picture" align="center"> </div>
What I want to accomplish is get other data from the database and display it in the other half of the screen. Since it all happens inside art.php, it's not as easy as typing echo $results->columnName, so I'd need a bit of help.
Thanks in advance :)
You could create an other file like art.php to display the data you need and add an other post to that file to your onclick-event.
This is how I would edited the javascript from index.php:
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( data );
});
$.post( "text.php", { id: "1"}, function( data ) {
$("#text").html( data );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
});
$.post( "text.php", { id: picture_id}, function( data ) {
$("#text").html( data );
});
return false;
});
});
I can't really say much about text.php, since I don't know what information you want to display (or how you want to display it).
Edit: If you want only one post and only one external file you could use jQuerys .find-Function to extract portions from the ajax-data.
Javascript:
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( $(data).find("#loaded_picture") );
$("#text").html( $(data).find("#loaded_text") );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( $(data).find("#loaded_picture") );
$("#text").html( $(data).find("#loaded_text") );
});
return false;
});
});
And in the art.php:
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"])) {
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
} else {
$current_picture=1;
}
/* Put connect to database and other preparations here */
echo "<div>";
echo "<div id='loaded_picture'>";
// Put everything that goes into the picture div here
echo "</div>"
echo "<div id='loaded_text'>";
// And everything that goes into the text div here
echo "</div>";
echo "</div>";
By looking at your index.php i think you are having trouble updating your
$result->artikel
in the table section when you call another image in. If this is the case then you can do this wrap your $result->artikel in art.php file with a div like <div class="artikel">$result->artikel</div> and echo it. Now you can do this to update your table section with the new data.
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
//you should give class name to p that's easy after to work
$("table thead th:nth-child(2) p").html($(".artikel").html());
});
return false;
});
This will update your table section also
I am making a chat box in codeigniter, but after enter the name and message, pop up box is coming showing 'Forbidden'.
I am really confused what I put instead shout.php here(chatbox.php')
$.post('shout.php', load_data, function(data) {
instead of 'shout.php' I put http://localhost/myfoldername/application/views/shout.php
my controller
money_c
function chat(){
$this->load->view('chatbox');
}
chatbox.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<style type="text/css">
<!--
.shout_box {
background: #627BAE;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 20%;
z-index:9;
}
.shout_box .header .close_btn {
background: url(images/close_btn.png) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
-->
</style>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('shout.php', load_data, function(data) {
$('.message_box').html(data);
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
});
}, 1000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var iusername = $('#shout_username').val();
var imessage = $('#shout_message').val();
post_data = {'username':iusername, 'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
//reset value of message box
$('#shout_message').val('');
}).fail(function(err) {
//alert HTTP server error
alert(err.statusText);
});
}
});
//toggle hide/show shout box
$(".close_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}
});
});
</script>
</head>
<body>
<div class="shout_box">
<div class="header">chat box<div class="close_btn"> </div></div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
</body>
</html>
shout.php
<?php
####### db config ##########
$db_username = 'root';
$db_password = '';
$db_name = 'money1';
$db_host = 'localhost';
####### db config end ##########
if($_POST)
{
//connect to mysql db
$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
die();
}
if(isset($_POST["message"]) && strlen($_POST["message"])>0)
{
//sanitize user name and message received from chat box
//You can replace username with registerd username, if only registered users are allowed.
$username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$user_ip = $_SERVER['REMOTE_ADDR'];
//insert new message in db
if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))
{
$msg_time = date('h:i A M d',time()); // current time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
}
// delete all records except last 10, if you don't want to grow your db size!
mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");
}
elseif($_POST["fetch"]==1)
{
$results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");
while($row = mysqli_fetch_array($results))
{
$msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
}
}
else
{
header('HTTP/1.1 500 Are you kiddin me?');
exit();
}
}
but after entering name and message alert box will pop up showing 'Forbidden'.
I don't think you fully grasp MVC architecture and this is not really the place to explain it.
I suggest you study it more but what may work for you here is to modify your controller function to this:
function chat(){
$this->load->view('chatbox');
}
function shout(){
$this->load->view('shout');
}
You would then need to ensure that the URL(route) works.
Assume you current URL is www.mysite.com/someController/chat/
then the new URL would be www.mysite.com/someController/shout/
If this URL does not work then you would need to sort out your route to make it work.
If this URL works, then you need to update your JQuery URL from
.post('shout.php', load_data, function(data) {
to
.post('/someController/shout/', load_data, function(data) {
TL;DR
The jquery post function accesses the fule via the URL like a real person. It cannot load the file directly.
I am trying to delete comments from my comment system but the code I have is not working. I want to be able to delete each comment from my table including the parent comments. At the moment my code does not get the parameter of the comment from the delete button link.
function.php:
<?php
function getComments($row) {
echo "<li class='comment'>";
echo "<div class='aut'>" . $row['author'] . "</div>";
echo "<div class='comment-body'>" . $row['comment'] . "</div>";
echo "<div class='timestamp'>" . $row['created_at'] . "</div>";
echo "<a href='#comment_form' class='reply' id='" . $row['id'] . "'>Edit Song</a>";
echo "<span> </span>";
echo "<a href='delete.php?id='" . $row['id'] . "'>Delete Song</a>";
$q = "SELECT * FROM threaded_comments WHERE parent_id = ".$row['id']."";
$r = mysql_query($q);
if(mysql_num_rows($r)>0)
{
echo "<ul>";
while($row = mysql_fetch_assoc($r)) {
getComments($row);
}
echo "</ul>";
}
echo "</li>";
}
?>
delete.php:
<?php
include 'includes/config.php';
$deleteid = $_GET['id'];
mysql_query("DELETE FROM threaded_comments WHERE id='$deleteid'");
echo "Song has been deleted!";
header ('Location: index.php');
?>
I have added the index.php and post_comment page page. Also the delete function still doesn't work when I made the changes.
index.php:
<?php
include("config.php");
include("functions.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi-Lyric Collaboration System</title>
<script type='text/javascript' src='jquery.pack.js'></script>
<script type='text/javascript'>
$(function(){
$("a.reply").click(function() {
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
$("#name").focus();
});
});
</script>
<style type='text/css'>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
body {
font-size: 14px;
line-height:1.3em;
background: url('music.jpg');
height: 100%;
background-size:100% ;
background-position: static;
background-color: purple;
min-height: 100%;
background-repeat: no-repeat;
}
label{
color: white;
font-size: 2em;
}
a, a:visited {
outline:none;
color:#7d5f1e;
}
.clear {
clear:both;
}
#wrapper {
width:480px;
margin:0px auto;
padding:15px 0px;
}
.comment {
padding:5px;
border:2px solid black;
border-width: 1px;
margin-top:15px;
list-style:none;
background-color: white;
opacity: 0.96;
-moz-border-radius:20px;
-webkit-border-radius:20px;
overflow-y: scroll;
}
.aut {
font-weight:bold;
}
.timestamp {
font-size:85%;
float:right;
}
#comment_form {
margin-top:15px;
}
#comment_form input {
font-size:1.2em;
margin:0 0 10px;
padding:3px;
display:block;
width:100%;
}
#comment_body {
display:block;
width:100%;
height:150px;
}
#submit_button {
text-align:center;
clear:both;
}
header{
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id='wrapper'>
<header><font size="20">MultiLyric Collaborator</font></header>
<br>
<ul>
<?php
$q = "SELECT * FROM threaded_comments WHERE parent_id = 0";
$r = mysql_query($q);
while($row = mysql_fetch_assoc($r)):
getComments($row);
endwhile;
?>
</ul>
<form id="comment_form" action="post_comment.php" method='post'>
<label for="name">Name:</label>
<input type="text" name="name" id='name'/>
<label for="comment_body">Enter Song:</label>
<textarea name="comment_body" id='comment_body'></textarea>
<input type='hidden' name='parent_id' id='parent_id' value='0'/>
<div id='submit_button'>
<input type="submit" value="Add comment"/>
</div>
</form>
</div>
</body>
</html>
post_comment.php:
<?php
include("config.php");
$author = mysql_real_escape_string($_POST['name']);
$comment_body = mysql_real_escape_string($_POST['comment_body']);
$parent_id = mysql_real_escape_string($_POST['parent_id']);
$q = "INSERT INTO threaded_comments (author, comment, parent_id) VALUES ('$author', '$comment_body', $parent_id)";
$r = mysql_query($q) or die(mysql_error());
if(mysql_affected_rows()==1) {
header("location:index.php");
}
else {
echo "Comment cannot be posted. Please try again.";
}
?>
From the "SELECT" statement in getComments(), it looks like what you need to do is:
mysql_query("DELETE FROM threaded_comments WHERE parent_id ='$deleteid'");
It is 'parent_id' not 'id'.