two ajax requests in a non existent only appended div - javascript

I've been working on a 9gag like page. I tried to integrate a voting system which has been made by another guy, because I'm not really familiar with AJAX requests, and it just doesn't want to work.
My index.php loads five posts from the mySQL database then it appends them to the main div. After you scroll down it appends five more etc. This is done by an AJAX request which works like a charm.
When I append it to the div by AJAX, I also append some variables in the div so I can then use it for another AJAX request and this is where the problem occurs. It just doesn't do any AJAX requests. After an hour of debugging I've come to question whether one can append some data to a div, which doesn't exist in the original index.php and then run AJAX requests with it.
I won't post the pagination.js and it's stuff here because it works, I'm only going to post the ajax.php request where it could go wrong:
<?php
include 'config/connection.php';
$db = "test";
$table = "posts";
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$run = mysqli_query($con,"SELECT * FROM $db.$table ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);
while($row = mysqli_fetch_array($run)) {
echo " <article>\n";
echo " <div id='title'><h1>".utf8_encode($row['title'])."</h1></div>\n";
echo " <div id='image'><img src='posts/".$row['dDate']."/".$row['image']."'></div>\n";
echo " <div id='text' class='item' data-postid='".$row['id']."' data-score='".$row['vote']."'>\n";
echo " <p>Beküldte: ".$row['postedBy']."\n";
echo " <div class='vote-span'><!-- voting-->\n";
echo " <div class='vote' data-action='up' title='Vote up'>\n";
echo " <i class='icon-chevron-up'></i>\n";
echo " </div><!--vote up-->\n";
echo " <div class='vote-score'>".$row['vote']."</div>\n";
echo " <div class='vote' data-action='down' title='Vote down'>\n";
echo " <i class='icon-chevron-down'></i>\n";
echo " </div><!--vote down-->\n";
echo " </div>\n";
echo " </div>\n";
echo " </article>\n";
}
?>
The output looks like this:
<article>
<div id='title'><h1>Azért azt mondtam már hogy héjhó halihó, de igazából yolo, mert nem is igaz az, hogy ez tök gáz lenne.</h1></div>
<div id='image'><img src='posts/2014-08-23/Screen Shot 2014-06-29 at 1.00.45 PM.png'></div>
<div id='text' class='item' data-postid='52' data-score='0'>
<p>Beküldte: zsombor
<div class='vote-span'><!-- voting-->
<div class='vote' data-action='up' title='Vote up'>
<i class='icon-chevron-up'></i>
</div><!--vote up-->
<div class='vote-score'>0</div>
<div class='vote' data-action='down' title='Vote down'>
<i class='icon-chevron-down'></i>
</div><!--vote down-->
</div>
</div>
</article>
But, when I inspect the resource it's not in index.php (of course) but only in an ajax.php file, which is appended to the index.php.
Here is the votingsys.js file:
$(document).ready(function(){
// ajax setup
$.ajaxSetup({
url: '../vote.php',
type: 'POST',
cache: 'false'
});
// any voting button (up/down) clicked event
$('.vote').click(function(){
var self = $(this); // cache $this
var action = self.data('action'); // grab action data up/down
var parent = self.parent().parent(); // grab grand parent .item
var postid = parent.data('postid'); // grab post id from data-postid
var score = parent.data('score'); // grab score form data-score
// only works where is no disabled class
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'up') {
// increase vote score and color to orange
parent.find('.vote-score').html(++score).css({'color':'orange'});
// change vote up button color to orange
self.css({'color':'orange'});
// send ajax request with post id & action
$.ajax({data: {'postid' : postid, 'action' : 'up'}});
}
// voting down action
else if (action == 'down'){
// decrease vote score and color to red
parent.find('.vote-score').html(--score).css({'color':'red'});
// change vote up button color to red
self.css({'color':'red'});
// send ajax request
$.ajax({data: {'postid' : postid, 'action' : 'down'}});
};
// add disabled class with .item
parent.addClass('.disabled');
};
});
});
aaaand the vote.php file:
include('config/connection.php');
# start new session
session_start();
if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
if (isset($_POST['postid']) AND isset($_POST['action'])) {
$postId = (int) mysql_real_escape_string($_POST['postid']);
# check if already voted, if found voted then return
if (isset($_SESSION['vote'][$postId])) return;
# connect mysql db
dbConnect();
# query into db table to know current voting score
$query = mysql_query("
SELECT vote
from posts
WHERE id = '{$postId}'
LIMIT 1" );
# increase or dicrease voting score
if ($data = mysql_fetch_array($query)) {
if ($_POST['action'] === 'up'){
$vote = ++$data['vote'];
} else {
$vote = --$data['vote'];
}
# update new voting score
mysql_query("
UPDATE posts
SET vote = '{$vote}'
WHERE id = '{$postId}' ");
# set session with post id as true
$_SESSION['vote'][$postId] = true;
# close db connection
dbConnect(false);
}
}
}
?>
So is it possible to use another AJAX request like this or am I doing something really wrong?
I'm using jQuery 1.4.3.

Aha, I bet I know what the problem is. You have five initial divs, which have click event handlers attached to them via this:
$('.vote').click(function(){ ... });
However, you are adding new divs via an infinite scroll device, and these do not have events attached to them. That is correct behaviour, since you are not re-running the code to attach them again.
There is a clever device in jQuery that will help you get around this. It lets you attach events to things now and in the future. To use it, try this:
$('container-selector').on('click', '.vote', function() { ... });
The on method with a 'click' parameter is just the new preferred way of attaching events in jQuery, and if you add your handler as a second parameter it will just do the same as now. However if you add the new parameter, '.vote', it will attach the event to anything matching this inside the overall container selector, even if it did not exist at the time of attaching the event.
You can use 'body' for the container selector here, but for performance reasons it is a good idea to be more specific than that. Just use whatever CSS selector will contain all of the divs to which you wish to attach this particular event handler.

Related

how to have different comments from you in different pages

I am creating a website that contains different movies, every movie has a specific id_movie, i have added a comment box where the user can add a comment about the movie, however, every movie i click on, they all show the same comments that have been entered, I want every movie to have its own comments, I will be happy if you can help me with that. thanks
comments.php
<body>
<br />
<h2 align="center"><p >Add Comment</p></h2>
<br />
<div class="container">
<form method="POST" id="comment_form">
<div class="form-group">
<input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="comment_id" id="comment_id" value="0" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
<span id="comment_message"></span>
<br />
<div id="display_comment"></div>
</div>
</body>
<script>
$(document).ready(function(){
$('#comment_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val('0');
load_comment();
}
}
})
});
load_comment();
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment').html(data);
}
})
}
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
</script>
add_comment.php
<?php
$con = new PDO('mysql:host=localhost;dbname=db_movie', 'root', '');
$error = '';
$comment_name = '';
$comment_content = '';
if(empty($_POST["comment_name"]))
{
$error .= '<p class="text-danger">Name is required</p>';
}
else
{
$comment_name = $_POST["comment_name"];
}
if(empty($_POST["comment_content"]))
{
$error .= '<p class="text-danger">Comment is required</p>';
}
else
{
$comment_content = $_POST["comment_content"];
}
if($error == '')
{
$query = "
INSERT INTO tbl_comment
(parent_comment_id, comment, comment_sender_name, movie_id)
VALUES (:parent_comment_id, :comment, :comment_sender_name)
";
$statement = $con->prepare($query);
$statement->execute(
array(
':parent_comment_id' => $_POST["comment_id"],
':comment' => $comment_content,
':comment_sender_name' => $comment_name
)
);
$error = '<label class="text-success">Comment Added</label>';
}
$data = array(
'error' => $error
);
echo json_encode($data);
?>
fetch_comment.php
<?php
//fetch_comment.php
$con = new PDO('mysql:host=localhost;dbname=db_movie', 'root', '');
$query = "
SELECT * FROM tbl_comment
WHERE parent_comment_id = '0'
ORDER BY comment_id DESC
";
$statement = $con->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="panel panel-default">
<div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
<div class="panel-body">'.$row["comment"].'</div>
<div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
</div>
';
$output .= get_reply_comment($con, $row["comment_id"]);
}
echo $output;
function get_reply_comment($con, $parent_id = 0, $marginleft = 0)
{
$query = "
SELECT * FROM tbl_comment WHERE parent_comment_id = '".$parent_id."'
";
$output = '';
$statement = $con->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$count = $statement->rowCount();
if($parent_id == 0)
{
$marginleft = 0;
}
else
{
$marginleft = $marginleft + 48;
}
if($count > 0)
{
foreach($result as $row)
{
$output .= '
<div class="panel panel-default" style="margin-left:'.$marginleft.'px">
<div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
<div class="panel-body">'.$row["comment"].'</div>
<div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
</div>
';
$output .= get_reply_comment($con, $row["comment_id"], $marginleft);
}
}
return $output;
}
?>
and here when I click on each movie:
<?php include('header.php');
$qry2=mysqli_query($con,"select * from tbl_movie where movie_id='".$_GET['id']."'");
$movie=mysqli_fetch_array($qry2);
?>
<div class="content">
<div class="wrap">
<div class="content-top">
<div class="section group">
<div class="about span_1_of_2">
<h3><?php echo $movie['movie_name']; ?></h3>
<div class="about-top">
<div class="grid images_3_of_2">
<img src="<?php echo $movie['image']; ?>" width="180px" height="280px" alt=""/>
<?php include('ratte.php'); ?>
</div>
<div class="desc span_3_of_2">
<p class="p-link" style="font-size:15px">Type: <?php echo $movie['type']; ?></p>
<p class="p-link" style="font-size:15px">Price: £<?php echo date($movie['price']); ?></p>
<p style="font-size:15px"><?php echo $movie['desc']; ?></p>
Watch Trailer
</div>
<div class="clear"></div>
</div>
<?php $s=mysqli_query($con,"select DISTINCT theatre_id from tbl_shows where movie_id='".$movie['movie_id']."'");
if(mysqli_num_rows($s))
{?>
<table class="table table-hover table-bordered text-center">
<?php
while($shw=mysqli_fetch_array($s))
{
$t=mysqli_query($con,"select * from tbl_theatre where id='".$shw['theatre_id']."'");
$theatre=mysqli_fetch_array($t);
?>
<tr>
<td>
<?php echo $theatre['name'].", ".$theatre['place'];?>
</td>
<td>
<?php $tr=mysqli_query($con,"select * from tbl_shows where movie_id='".$movie['movie_id']."' and theatre_id='".$shw['theatre_id']."'");
while($shh=mysqli_fetch_array($tr))
{
$ttm=mysqli_query($con,"select * from tbl_show_time where st_id='".$shh['st_id']."'");
$ttme=mysqli_fetch_array($ttm);
?>
<button class="btn btn-default"><?php echo date('h:i A',strtotime($ttme['start_time']));?></button>
<?php
}
?>
</td>
</tr>
<?php
}
?>
</table>
<div id='display_comment'></div>
<?php
}
else
{
?>
<h3>No Show Available</h3>
<div id='display_comment'></div>
<?php
}
?>
</div>
<?php include('related-movies.php');
?>
</div>
<div class="clear"></div>
</div>
<?php include('comments.php'); ?>
</div>
</div>
<?php include('footer.php'); ?>
I'll try my best, but there is a lot to cover.
comments.php
//add the target files URL as the form's action
<form method="POST" id="comment_form" action="add_comment.php" >
//add movie to the form, that way when we insert the comment we know what its for
<input type="hidden" name="movie_id" id="movie_id" value="<?php echo $movie_id; ?>" />
//.. in your JS, add the movie id to the fetch comment call
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
data: {movie_id : <?php echo $movie_id; ?>},
dataType: 'json',
success:function(data){
//...
})
}
//move this below the function definition
load_comment();
add_comment.php
//add movie id here to match what is in the form above
INSERT INTO tbl_comment
(parent_comment_id, comment, comment_sender_name, movie_id)
VALUES (:parent_comment_id, :comment, :comment_sender_name, :movie_id)
// add ':movie_id' => $_POST['movie_id'] to the array you have there for
// $statement->execute([ ....]). The arrays below go the same way
//add those to $statement->execute() for there respective DB calls,
You had the movie in the FIELDS part of the insert, but not the VALUES, which is probably an SQL syntax error. You may not have seen an actual error because this is called with AJAX so it would just break on the client side. You could look in the browser debug window > network [XHR] requests and look at the response. There you would probably find it or you may simply get a 500 error from the server.
fetch_comment.php
//add movie id here to match what is in the AJAX fetch comment call
SELECT * FROM tbl_comment
WHERE parent_comment_id = :parent_comment_id AND movie_id = :movie_id
ORDER BY comment_id DESC
//for execute add
['parent_comment_id'=>0, 'movie_id'=>$_POST['movie_id']]
Important prepare this query properly
$query = "
SELECT * FROM tbl_comment WHERE parent_comment_id = '".$parent_id."'
";
So it should be like this:
$query = "SELECT * FROM tbl_comment WHERE parent_comment_id = :parent_id";
//then add this to execute ['parent_id' => $parent_id]
mainpage.php (not sure the name on this one)
In the last unnamed code chunk you are using mysqli but above your using PDO it's better to use one or the other, personally I prefer PDO, its just better API wise. You are also not preparing these (so convert these to PDO). Using both just adds unnecessary complexity to your application (I think there were 2 of theses in there):
$qry2=mysqli_query($con,"select * from tbl_movie where movie_id='".$_GET['id']."'");
$movie=mysqli_fetch_array($qry2);
It looks like you include the comments.php into that last page <?php include('comments.php'); ?> So what I would do is where the query is above that I said to fix:
require_once `db.php`; //- create a separate file to do the DB connection for you
//then you can add that to the top of all the pages you need the DB for
include 'header.php'; //no need for the ( ) for any of the include* or require* calls.
/*
require will issue an error if the included file is not found
include will fail silently, for things that are required for your
page to work and not produce errors use require (like the DB)
for things you only ever include once, also like the DB stuff use *_once
then no matter how many *_once calls are stacked from including
the other page you don't have to worry about it.
as above those simple rules give us require_once for the DB.
the other pages I am not sure which would be best.
*/
//localize the movie ID - change any use of `$_GET['id']
$movie_id = isset($_GET['id']) ? $movie_id : false;
if(!$movie_id){
//do something if someone goes to this page with no ?id= in the URL
//you could redirect the page
//you could have a default movie id etc...
}
$statement = $con->prepare('select * from tbl_movie where movie_id=:movie_id');
$statement->execute(['movie_id' => $movie_id]);
$movie = $statement->fetch();
//dont forget to fix the other DB call and remove the MySqli stuff.
Above I suggest using a single file for the DB, in your case it can be quite simple,
db.php
<?php $con = new PDO('mysql:host=localhost;dbname=db_movie', 'root', '');
That is literally all you need then, at the very top of each page you use the DB, simply add this file
require_once 'db.php';
This way if you need to change the password or something like that, you can go to one place named in way that is easy to remember and change it. How it is now, you would have to dig though all your code to change it. In that page your including a file named header.php and it looks like from your MySQLi code that it may have some connection stuff in there. I would remove any MySQLi stuff there too. You want to keep the DB file separate as you may need to include it in the AJAX backend parts and any output from header.php would mess you up.
Summery
What I showed above is a simple example of what you need to do, in that AJAX call This may not be all you need to do, these are just the things that were obvious to me.
You don't have to worry about child comment's movie ID, as they inherit it from the parent comment, which wouldn't exist (on the page) if it had the wrong ID. In your current setup, I would still save it as part of the data. It's just you dont need it to get child comments if you know the parent (which you sort of have to know). I didn't add it into one thing that looked like it was for child comment. You can add it, but as I said above, it's not really needed.
Really the question is way to broad, why isn't my code working kind of question. The only reason I took the effort was that you also took the effort to provide well organized code that is relatively minimal.
So thank you for that.
The last suggestion I would make, is clean up the extra line returns in some of the SQL, and format the TABs a bit better. But that is just a readability issue, I am very picky about formatting my code and some of that could be related to creating an question on SO as it takes a bit of getting used the markdown they use.
Hope it helps you!
Update
thanks for your answer, I really dont know what i should post here and what i shouldnt, and the thing that i dont understand is that: i have a tbl_comment which stores all comments from user and this table include movie_id, and i have another tbl_movie which has movie_id as a primary key, how can i link the movie _id with the tbl_comment so that every comment is stored for a specific movie_id
I will try to explain the flow of your application, with an example. For the sake of this example lets say the movie id is 12 and our main page is www.example.com/movies?id=12:
Inserting a comment
User goes to a url with ?id=12
everything after the ? is called the query string
PHP knows to take the query string and populate the supper global $_GET
so in the main page your movie id is now $_GET['id']
We localize this (make a local variable) at the top of the page with some basic checks. $movie_id = isset($_GET['id']) ? $movie_id : false;
if movie id is set ?id=12 then put it in $movie_id
if its not www.example.com/movies then set $movie_id to false
this avoids some errors if someone goes to the page without that set
At the bottom of the page you include this file <?php include('comments.php'); ?> think of it like pasting that code into this place
In comments.php, which runs when it's included above,
if someone inserts a new comment (submits the form) weve added that same $movie_id into the form with this line
<input type="hidden" name="movie_id" id="movie_id" value="<?php echo $movie_id; ?>" />.
-So now when the form submits to add_comment.php which you need to put in the form's action.
<form method="POST" id="comment_form" action="add_comment.php" >
It will contain the id as $_POST['movie_id'] on that page. The $_POST['movie_id'] is basically the same as $_GET['id'] but the form method tells us its post instead of get. Typically Get is used to retrieve resources, Post is used to modify them.
When PHP runs the above piece of HTML it replaces the <?php echo $movie_id; ?> with it's value of 12 so you get this
<input type="hidden" name="movie_id" id="movie_id" value="12" />
Now On add_comment.php (where the form action takes us) we can take that $_POST['movie_id'] and add that to your SQL used to Insert the comment from the form in #4. into the Database.
INSERT INTO tbl_comment
(parent_comment_id, comment, comment_sender_name, movie_id)
VALUES (:parent_comment_id, :comment, :comment_sender_name, :movie_id)
As this is a prepared statement we have the place holder :movie_id in the SQL query. In PDO we can feed that to the PDOStatment object ($statement) you get back from $statment=$conn->prepare($sql) by calling it's execute method or $statement->execute([..other stuff here..., 'movie_id'=>$_POST['movie_id']]).
The query that runs looks like this after PHP is done with it
INSERT INTO tbl_comment
(parent_comment_id, comment, comment_sender_name, movie_id)
VALUES (0, 'foo', 'ArtisticPhoenix', 12) <-- see what I did there.
So you see we took the value from the original URL request, added it to our form and then we wait for user action to submit that form with the movie id embedded in it. The when the form submits it calls our add comment page, where we take it out of the Posted data, and feed it into the DB with the rest of the form data for that comment.
The other ones are exactly the same except in those we are using AJAX to submit the data so instead of a form we just add it to the AJAX call. I will give you an example of how that executes.
Showing a comment
This is the same up to #4 above
In comments.php you call load_comment(); "After" defining the function as it doesn't exist tell you do that, so you cant call it before.
This runs your AJAX request $.ajax, for the purposes of this example think of it like a fancy way to do a form. The url is the form action the method is well the method. The data is the form data, the dataType is the type of encoding in this case JSON or Javascript Object Notation. Which is a fancy way of saying structured data, as in PHP its basically an array (or data with nested elements).
The url (action) points us to fetch_comment.php, so when that runs our data: {movie_id : <?php echo $movie_id; ?>}, becomes data: {movie_id : 12}, which gets sent back to server where PHP sees it as $_POST['movie_id']
Similar to the Insert, we use that ID in our SQL query that pulls the parent comments
SELECT * FROM tbl_comment
WHERE parent_comment_id = :parent_comment_id AND movie_id = :movie_id
ORDER BY comment_id DESC
This says "Select all columns From table tbl_comment WHERE parent_comment_id IS 0 and Movie Id is 12" So it will only return comments for movie 12 that are also parents.
in your code you have just $statement->execute(); But you had the parent_comment_id hard coded as 0. This was fin until we needed to add the movie_id Once we did that it makes more senses to make it part of the prepared statement so it reads better. But like the insert, now we have place holder in place of values so we need to take that data and add it to execute for this query.
So $statement->execute(); becomes $statement->execute(['parent_comment_id'=>0, 'movie_id' => $_POST['movie_id']]); Or when PHP is done with it $statement->execute(['parent_comment_id'=>0, 'movie_id' => 12]); which the Database knows to use the keys to match the placeholders and it completes our query.
SELECT * FROM tbl_comment
WHERE parent_comment_id = 0 AND movie_id = 12
ORDER BY comment_id DESC
Then we take the results and send them back to the success handler for the AJAX with echo and in this case add it to the page with this line $('#display_comment').html(data);
So In conclusion
Your code:
load_comment();
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment').html(data);
}
})
}
Correct code (what I said):
//.. in your JS, add the movie id to the fetch comment call
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
data: {movie_id : <?php echo $movie_id; ?>},
dataType: 'json',
success:function(data){
//...
})
}
load_comment();
What you need to do
//$movie_id = $_GET['id'] in the main page that included this file.. #2 above
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
data: {movie_id : <?php echo $movie_id; ?>},
dataType: 'json',
success:function(data)
{
$('#display_comment').html(data);
}
});
}
load_comment();
When PHP completes the above code it sends this to the client (using 12 from our example)
//$movie_id = $_GET['id'] in the main page that included this file.. #2 above
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
data: {movie_id : 12}, //PHP takes the value of $movie_id and puts it here
dataType: 'json',
success:function(data)
{
$('#display_comment').html(data);
}
});
}
load_comment();
Above is what actually runs in the browser
That is pretty much the gist of it. As I said its more beneficial to you to learn how it works. Sure I can post the complete code but I have no way to test it, no way to know if that is all the errors or not. If you learn how it works, you will be better equipped to take on those challenges yourself. I would rather spend 3 or 4 times the effort teaching you how it all works, then to post some code that you have no idea how it works.
Hope that all makes some sense.

How to set $_SESSION variable when click on a div

In my portfolio I implemented a PHP script that generate some div that contain images of some works.
When users click on a div, there is a redirect on a details.php page that contains work details. How can I set $_SESSION variable values, in order to use them on details.php?
PHP scipt:
$query2="SELECT * FROM Posts WHERE Category='".$record1['Category']."' ORDER BY data_pubb DESC";
$esito2 = mysql_query($query2);
while($record2 = mysql_fetch_array($esito2))
{
echo "
<div class='col-sm-4 job'>
<div class='container hover-image-container'>
<a href=''>
<img src='".$record2['static_img']."' data-src='".$record2['static_img']."' data-animated-src='".$record2['dinamic_img']."' width='100%' height='100%' />
<div class='overlay'>
<div class='text'>".$record2['title']."</div>
</div>
</a>
</div>
</div>
";
}
You would need to use JavaScript to detect the onclick and use AJAX to start the session.
For starters, add session_start(); to the top of your page.
Then add an onclick event to your div:
<div class='col-sm-4 job' onclick='startsession()`>
Then define the startsession() function:
function startsession() {
$.ajax({
var name = ''; // the name of your session e.g $_SESSION['counters'];
var value = ''; // the value of your session e.g 10
url: "sessionstart.php",
data: {session: name, value: value},
success: function(data){
// your success function
}
});
}
Then on sessionstart.php:
<?php
session_start();
$_POST['name'] = $_POST['value'];
<?
session_start();
//Set session
$name = $_POST['name'];
$_SESSION['user'] = $name;
//Fetch session
echo $_SESSION['user'];
You can perform an AJAX Request on click of the div. Pass the data in this request that you want to set in the Session variable. Once you get the response back you can then visit the details.php and access the Session variable that got set.
For onclick either you can set
<div ... onclick="functionName()" ></div>
Or, set an ID or class and attach an event listener to it.
<div id="myDiv">...</div>
$('#myDiv').on('click',function(){
//perform the ajax request here.
});

Change of div in the same page without refresh

In one of my pages, I have an <a> tag. When I click it, I am passing the variable as a GET parameter and retrieving it in the same page and displaying the details.
The code to get the parameters:
if(isset($_GET['CatId']))
{
$CatId= $_GET['CatId'];
}
else $CatId=0;
if(isset($_GET['MainProductId']))
{
$MainProductId= $_GET['MainProductId'];
$FilterAllProductQuery ="WHERE Product.MainProductId = '$MainProductId'";
$FilterProductQuery = "AND Product.MainProductId = '$MainProductId'";
}
else
{
$MainProductId=0;
$FilterAllProductQuery="";
$FilterProductQuery="";
}
The <a> tag:
<a href='Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>' ><?php echo $row["MainProdName"] ?></a>
The details to be displayed:
if($CatId == 0)
{$sql = "SELECT *,Product.Id AS ProdId, Product.Name as ProdName FROM Product $FilterAllProductQuery ";}
else
{$sql = "SELECT * ,Product.Id AS ProdId, Product.Name as ProdName FROM Product INNER JOIN MainProduct ON MainProduct.Id = Product.MainProductId
INNER JOIN Category ON Category.Id = MainProduct.CategoryId WHERE Category.Id = '$CatId' $FilterProductQuery ";}
$result1 = $dbcon->query($sql);
if ($result1->num_rows > 0) {
while ($row = $result1->fetch_assoc()) {
$id = $row["ProdId"];
// $image=$row["ImagePath1"];
$qty = $row["Quantity"];
?>
<li class="col-lg-4">
<div class="product-box">
<span class="sale_tag"></span>
<div class="row">
<img src='themes/images/<?php echo $row["ImagePath1"]; ?>' height='200' width='250'> </a></div></div></li>
Now the code is working fine, but what's happening is that when I click the <a> tag, as I am passing the get parameters, the page is refreshing. As all the code are on the same page, I don't want the page to be refreshed. For that, I need to use Ajax request. How can I do that?
I would make an onclick() event on the a tag like so:
<?php echo '<a c_id="'.$CatId.'" MainProductId="'.$id.'" onclick="sendProduct()">'.$row["MainProdName"].'</a>';
Afterwards i would in a .js file write a simple function called sendProduct() and inside i would do an ajax request to a page named ex: insertproduct.php, get the information back and Insertproduct.php would process the data and you could use .html() or .append() to assign the data to the div showing the data with a normal id.
The c_id, MainProductId are custom attributes you could recieve in the .js file as $("#youraTag").attr("c_id");
There's a really good guide here on basic ajax: https://www.youtube.com/watch?v=_XBeGcczFJo&list=PLQj6bHfDUS-b5EXUbHVQ21N_2Vli39w0k&index=3&t=1023s
First you have to remove the href of the link and give it an id.
<a id='link'>
<?php echo $row["MainProdName"] ?>
</a>
Then you put this jQuery into your page. Note, you need to have a div in which you are going to put in all your obtained results. I reffered to this div in the code as #mydiv.
$("#link").click(function(){
$("#mydiv").load("Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>");
});

Trying to print onto an html page via PHP

I'm making a custom WYSIWYG editor with a save function, and through the save function I have run some code to get everything within a certain div, save it into a data table or overwrite it. But right now, I'm trying to load the page back.
The process is as follows: you press the save button, and it runs a PHP script called save.php, which is seen below.
My issue is that I want it to load or echo the contents within a certain div on the original html page. How would I go about doing that? I need it to work like Javascript's innerHTML function, basically.
Below are the files I use, at least the relevant parts.
test.html:
<form method="post" name="blog-post" id="blog-post">
<input type="hidden" name="postID" value="1"><!--Get the post's id-->
<div class="blog-editor-bar">
<a href="#" data-command='save'
onclick="submitForm('save.php');">
<i class='fa fa-save'></i>
</a>
</div>
<div id="blog-textarea" contenteditable>
</div>
<textarea style="display:none;" id="blog-post-cont" name="post-content"></textarea>
</form>
test.js:
function submitForm(action){
var theForm = document.getElementById("blog-post");
theForm.elements("post-content").value = document.getElementById("blog-textarea").innerHTML;
theForm.action = action;
theForm.submit();
}
save.php:
$conn = mysqli_connect('localhost', 'root', '', '');
if (mysqli_connect_errno()){
echo "<p>Connection Failed:".mysqli_connect_error()."</p>\n";
}
//store stuff in database
//Get Variables
$postid = $_POST['postID'] ? $_POST['postID'] : null;
$post = $_POST['post-content'] ? $_POST['post-content'] : null;
//if exists, overwrite
if($postid != null || $postid != ""){
$sqlSave = "SELECT * FROM wysiwyg.post WHERE idpost = $postid";
$rSave = mysqli_query($conn, $sqlSave) or die(mysqli_error($conn));
if(mysqli_num_rows($rSave)){
$sqlOverwrite = "INSERT INTO wysiwyg.post(post) VALUES(?) WHERE idpost = ?";
$stmt = mysqli_prepare($conn, $sqlOverwrite);
mysqli_stmt_bind_param($stmt, "sd", $post, $postid);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
mysqli_close($conn);
} else {
newSave();
}
loadSave();
}
function newSave(){
$sqlNewSave = "INSERT INTO wysiwyg.post(post) VALUES(?)";
$stmt = mysqli_prepare($conn, $sqlNewSave);
mysqli_stmt_bind_param($stmt, "s", $post);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
mysqli_close($conn);
}
function loadSave(){
$sqlLoad = "SELECT * FROM wysiwyg.post WHERE idpost = $postid";
$rLoad = mysqli_query($conn, $sqlLoad) or die(mysqli_error($conn));
//This is the part I'm stuck on
}
Thank you all in advance for helping me out! I've been stuck on it for at least a few hours!
EDIT: Before people comment on SQL Injections, I have taken it into consideration. This is me getting the code working on my localhost before I run it through a ton of anti-sql injection methods that I have already done in the past. The code i provide is only important to the functionality at this point.
EDIT #2: The anti-injection code already exists. I guess i seem to have forgotten to provide that information. I repeat, the code I have provided here is only code relating to functionality. I have escaped the strings, trimmed, etc. and more, but that code is not necessary to provide for people to get an understanding of what it is i am trying to do.
You can use an AJAX request to communicate with the server, send data and receive a response. There are many good tutorials out there, but since I first learned it in W3Schools website I am going to refer you there.
JavaScript tutorial.
jQuery tutorial.
You can use an AJAX request which is written like this:
<script>
$(document).ready(function(){
$.ajax({ //start an AJAX call
type: 'GET', //Action: GET or POST
data: {VariableName: 'GETvalue'}, //Separate each line with a comma
url: 'Destination.php', //save.php in your case
success: function(data)){ //if values send do this
//do whatever
}
}); //end ajax request
});
</script>
This allows you to send information to your php page without refreshing
So in my example you can do this on the PHP side
<?php
echo $_GET['VariableName'];
?>
Will echo out "GETvalue as specified in the data section of the Ajax call"
EDIT************
In the AJAX call you can add dataType if you want json
$.ajax({
type: 'GET',
data: {VariableName: 'GETvalue'},
dataType: 'json' // Allows Json values or you can change it to whatever you want
url: 'Destination.php',

Creating a new div (with its content) for each row in the database

I have a feature, where users can post thoughts and users can add comments to each thought The way it works is that, when the comments link is clicked, all comments associated with that thought_id will be loaded.
Here is the structure of my user_comments table:
id
body_of_msg
comment_posted_by
comment_posted_to
post_id (which is the id of a thought from the `user_thoughts` table)
Consider the following data:
user_thoughts table (1 row):
id: 184
thought: "hello, this is a thought from anderson."
Assume I have two rows in the user_comments table:
id: 1
body_of_msg: Comment assigned to thought_id of 184
comment_posted_by: conor
comment_posted_to: anderson
post_id: 184
id: 2
body_of_msg: Another comment assigned to thought_id of 184
comment_posted_by: alice
comment_posted_to: anderson
post_id: 184
Problem: At the moment, when I click the comments link, only one of the comments is being shown (the latest comment is being shown, so in this case, Alice's comment).
Here is the code:
<?php
// Get the comments attached to a users post...
$get_comm = mysqli_query ($connect, "SELECT * FROM user_comments WHERE post_id='$thought_id' ORDER BY post_id DESC");
$num_of_comments = mysqli_num_rows($get_comm); // get number of comments for each post by post_id
// if there are comments for the post, get its content
if ($num_of_comments !=0 || $num_of_comments == 0){
while( $comment = mysqli_fetch_assoc ($get_comm)){
$comment_body = $comment['body_of_msg'];
$comment_posted_to = $comment['comment_posted_to'];
$comment_posted_by = $comment['comment_posted_by'];
$removed = $comment['comment_removed'];
}
echo "";
/** There are other divs and content echo'd here**/
////////////////////////////////////////////
// this is where each comment is displayed
echo "
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/><b><a href = 'profile_page/$comment_posted_by'> $comment_posted_by said</a></b>: $comment_body "; ?><?php
if ($comment_posted_by == $username){
echo "<a id='remove_comment' href = '/inc/remove_comment.php'> Delete </a>";
} echo "
</div>";
/////////////////////////////////////////////
}
?>
Where $thought_id comes from:
$count = mysqli_query ($connect, "SELECT * FROM user_thoughts");
while ($row = mysqli_fetch_assoc($get_thoughts_from_db)) {
$thought_id = $row['id'];
}
What I think:
This could just be me struggling to find a solution, but, could it be that each comment is overlapping the other? My comment feature involved comments dynamically appearing below the thought, so I have utilized Javascript, to achieve this. Just thinking the block may be getting replaced by a new comment?
What I have tried:
while( $comment = mysqli_fetch_assoc ($get_comm)){
$comment_body = $comment['body_of_msg'];
$comment_posted_to = $comment['comment_posted_to'];
$comment_posted_by = $comment['comment_posted_by'];
$removed = $comment['comment_removed'];
// this is where each comment is displayed
echo "
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/><b><a href = 'profile_page/$comment_posted_by'> $comment_posted_by said</a></b>: $comment_body "; ?><?php
if ($comment_posted_by == $username){
echo "<a id='remove_comment' href = '/inc/remove_comment.php'> Delete </a>";
} echo "
</div>";
}
}
This still only shows one comment, when there are two to be shown.
Why don't you use ajax? I had done a site web that use comments (like stackoverflow) and I used a lot ajax for that. Of course, all the creations of html elements will be done in js and what you will return from php will be only json (containing the content of comments and its info).
This will help you also to load new comments without refreshing the page (setInterval).
For the answer, I have find three things that are strange, the first one is
if ($num_of_comments !=0 || $num_of_comments == 0){
which will be always true. The second thing is the fact that the echo is outside the while bloc (this probably the cause of having one comment echoed). The last thing is display none that you put in the style of the html element. So what I suggest you is to make the echo in the while block or to make an array of comments and make an iterator. After that, try to use the inspector tool of your browser to see if the code source returned contain only one comment or more. This will help you to see if the php works or not.

Categories