Please, if someone have idea how to do it...
I have created blog where are many post. Each of the post having 'like', 'not like' and 'comments' (as on the many websites of posts).
When I click on 'like'(is in html part inside of element form) of one of the post by the form element I submit POST. Then in php of the same file I increase value of 'like' in database. This value is by echo shown in the proper post updated from database.
The trouble is by doing this update I am not returning to place of increased 'like'. How to go back where I submit POST?
I have seen for example in Instagram when I click 'like' there is no move from the place, staying on the same one where click was made.
Thanks a lot for let me know...
<?php
$conn = mysqli_connect("localhost", "root", "", "amoscaguias_db");
if(!$conn) {
echo "<h3>No connection to database</h3>";
}
if(isset($_POST['increase-btn'])) {
$post_id = $_POST['post_id'];
$value = 0;
$stmt= $conn->prepare("SELECT very_like FROM blog_data WHERE id=? LIMIT 1");
$stmt->bind_param('i', $post_id);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();
$result_1 = $row['very_like'];
$result_1 = $result_1 + 1;
$stmt1 = $conn->prepare("UPDATE blog_data SET very_like=$result_1 WHERE id=$post_id");
$stmt1->execute();
header("Location: index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>blog_php_mysql</title>
</head>
<body>
<div class="row">
<?php foreach($query as $q) { ?>
<div class="col-12 post">
<div class="card post-card mt-5">
<img class="card-img-top img-thumbnail post-card-image" src="imgs/<?php if(!empty($q['image'])) { echo $q['image']; } ?>" alt="<?php if(!empty($q['image'])) { echo $q['image']; } ?>">
<div class="card-body post-card-body">
<h5 class="card-title"><?php echo $q['title']; ?></h5>
<hr class="mx-auto">
<p class="card-text"><?php echo $q['content']; ?></p>
<hr class="mx-auto">
<div class="row ">
<div class="col-3 post-footer">
<form action="index.php" method="POST">
<button type="submit" id="increase" class="increase_btn" name="increase-btn"><i class="bi bi-hand-thumbs-up"></i></button>
<input type="hidden" name="post_id" value="<?php echo $q['id']; ?>" />
</form>
<span><?php echo $q['very_like'] ?></span>
<form action="index.php" method="POST">
<button type="submit" id="decrease" class="decrease_btn" name="decrease-btn"><i class="bi bi-hand-thumbs-down"></i></button>
<input type="hidden" name="post_id" value="<?php echo $q['id']; ?>" />
</form>
<span><?php echo $q['dont_like'] ?></span>
Comments
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="js/myscript.js"></script>
</body>
</html>
There are several ways to do it:
Common and pretty way: Make an XHR request via javascript to the separate action (endpoint) on the backend, where you will extract data from the POST array, update the value in the database and return response in JSON format, which you can parse easily and set a new value. Also, sometimes there is the approach to increment likes via javascript before the backend will send an acknowledgment about the successful update - it's because likes are not so much important data.
Less common and a bit ugly way: you may add an anchor link on each post.
When you hit the 'like' button, you should send additional data, which includes the way to get this anchor link on the backend. After the backend successfully updates the value, you should redirect to the previous page with an anchor point to the liked post, so you will "return to the same place", because the browser will automatically scroll the page to the block with that anchor.
Related
I'm making a website for my school and my website is like a laptop store and the main thing in my webpage is a product filter. I have made the product filter, it works great, but the problem is that I added shortcuts that send you to a single product page by clicking one of the products in the product filter. You can click on a product when you just came in the website and haven't messed with the product filter and it sends you to the single product page, but once you search for something using the filter the filtrated product cant be clicked on and you have to refresh the page to select your product. This is happening, because when you come in the website, you see index.php, but once you use the product filter, you are seeing action.php.
here is a part of my code from index.php:
<?php
$sql="SELECT * FROM Laptop";
$result=$conn->query($sql);
if ($result-> num_rows > 0) {
while($row=$result->fetch_assoc()){
$Laptop_ID = $row['Laptop_ID'];
?>
<?php echo "<a href='single_laptop.php?Laptop=" . $Laptop_ID ."'>" ?>
<div class="col-md-3 mb-2" style="color: blue">
<div class="card-deck">
<div class="card boarder-secondary">
<div class="card-img-overlay">
<h6 class="text-light bg-success text-center rounded p-1">
<?= $row['Nosaukums']; ?></h6>
</div>
<br>
<img src="<?= $row['Bilde']; ?>" class="card-img-top">
<div class="card-body">
<p>
Procesors : <?= $row['Procesors']; ?><br>
Videokarte : <?= $row['Videokarte']; ?><br>
RAM : <?= $row['RAM']; ?><br>
</p>
</div>
</div>
</div>
</div>
<?php }
}else {
echo "nav rezultātu";
}?>
</div>
</div>
</div>
And here is my action.php:
<?php
require 'dataB.php';
if(isset($_POST['action'])){
$sql = "SELECT * FROM Laptop WHERE Modelis !=''";
if(isset($_POST['Modelis'])){
$Modelis = implode("','", $_POST['Modelis']);
$sql .="AND Modelis IN('".$Modelis."')";
}
if(isset($_POST['Tips'])){
$Tips = implode("','", $_POST['Tips']);
$sql .="AND Tips IN('".$Tips."')";
}
if(isset($_POST['RAM'])){
$RAM = implode("','", $_POST['RAM']);
$sql .="AND RAM IN('".$RAM."')";
}
if(isset($_POST['Procesors'])){
$Procesors = implode("','", $_POST['Procesors']);
$sql .="AND Procesors IN('".$Procesors."')";
}
if(isset($_POST['Videokarte'])){
$Videokarte = implode("','", $_POST['Videokarte']);
$sql .="AND Videokarte IN('".$Videokarte."')";
}
$result = $conn->query($sql);
$output='';
if($result->num_rows>0){
while($row=$result->fetch_assoc()){
$output .='
<div class="col-md-3 mb-2" style="color: blue">
<div class="card-deck">
<div class="card boarder-secondary">
<div class="card-img-overlay">
<h6 class="text-light bg-success text-center rounded p-1">
'.$row['Nosaukums'].'</h6>
</div>
<br>
<img src="'.$row['Bilde'].'" class="card-img-top">
<div class="card-body">
<p>
Procesors : '.$row['Procesors'].'<br>
Videokarte : '.$row['Videokarte'].'<br>
RAM : '.$row['RAM'].'<br>
</p>
</div>
</div>
</div>
</div>';
}
} else {
$output = "<h3>No Products Found!<h3>";
}
echo $output;
}
?>
I need to figure out how to properly put the code from index.php, where it makes it possible to redirect me to single.laptop.php, to action.php, so I can redirect to single_laptop.php with no problems using the product filter.
$(document).keydown(function(e){
var keycode=e.keyCode;
if (keycode == 27)
{
$("#change").trigger('click');
}
});
$("#change").click(function() {
//do what you need
if($("#radio:checked").length==0)
{
alert("abc");
return false;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
Press ESC
</body>
</html>
Hey there stackoverflow users, i have come upon a very confusing problem that I cant seem to move past. I am creating a forum type web page and am currently working on the comments section. I have a form that uses the post method to send your comment as well as a hidden input to store the threads ID. I will post the entire php file below just to make sure nothing is left out.
<?php
session_start();
parse_str($_SERVER['QUERY_STRING'], $link);
$threadID = $link['ID'];
require("config.php");
$connection = mysqli_connect($host, $user, $password, $database);
$error = mysqli_connect_error();
if($error != null) {
$output = "<p>Unable to connect to database!</p>";
exit($output);
} else {
//Get Thread Data
$query = "SELECT username, title, content FROM threads, users WHERE threads.ID = $threadID AND users.ID = threads.makerID;";
$results = mysqli_query($connection, $query);
$row = mysqli_fetch_assoc($results);
//Get Comment Data
$query = "SELECT username, comment FROM comments, users WHERE threadID = $threadID AND users.ID = comments.makerID;";
$results = mysqli_query($connection, $query);
$row = mysqli_fetch_assoc($results);
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
<title>BodyweightMate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/styling.css"/>
</head>
<body>
<!--Top masthead-->
<header class="masthead" id="top">
<h1 class="masthead-title"> Welcome To BodyweightMate </h1>
</header>
<!--Navigation bar-->
<nav class="navbar">
<table class="navbar-table">
<tr>
<!--Logo-->
<td>
<a class="navbar-brand" href="main.php">
<img src="../images/logo.jpg" alt="BodyweightMate" height="30" width="30">
</a>
</td>
<!--Login/Profile-->
<?php if(isset($_SESSION['login_user'])) {
echo"<td><a class=\"navbar-profile\" href=\"profile.php\"> Profile </a></td>";
echo"<td><a class=\"navbar-logout\" href=\"logout.php\"> Logout </a></td>";
} else {
echo"<td><a class=\"navbar-login\" href=\"login.php\"> Login </a></td>";
}?>
</tr>
</table>
</nav>
<!--Main portion-->
<section class="content-section">
<article>
<h3><?php echo $row['username']. ": " .$row['title']; ?></h3>
<p><?php echo $row['content']; ?></p>
<br>
<h3>Comments</h3>
<p>Some annoying user: Gr8 B8 M8</p>
<p>Annoying users friend: I R8 8/8</p>
</article>
<div>
<!--If logged in, ability to comment-->
<?php if(isset($_SESSION['login_user'])): ?>
<form role="comment-form" method="POST" action="processcomment.php" id="mainForm">
<input type="hidden" value="$threadID" name="threadID">
<div class="form-group">
<label for="comment">Comment </label> <br>
<textarea class="comment-text" name="comment" rows="2" maxlength="255"></textarea>
</div> <br>
<input type="Submit" class="btn-newcomment" value="Submit Comment" name="submit">
</form>
<?php endif ?>
</div>
</section>
<!--Right portion-->
<aside class="content-aside">
<div>
<!--If logged in, be able to create a thread-->
<?php
if(isset($_SESSION['login_user'])) {
echo"<form method=\"post\" action=\"makethread.php\">";
echo"<input type=\"submit\" class=\"btn-newthread\" value=\"Create New Thread\" name=\"submit\">";
echo"</form>";
}
?>
</div>
<!--Info-->
<div>
<p> GOING TO NEED A SEARCH FUNCTION HERE
This is the cool little aside section. It will always be there to provide you with some very nice little details, helpful links, maybe a list of moderators? who knows! The uses are endless when you have a beautiful little aside like this one! Here are a few very useful bodyweight fitness links to get us started :D </p>
</div>
<br>
<div>
<ul class="content-aside-links">
<li>
Reddit's Bodyweightfitness Forum
</li>
<li>
Reddit's Bodyweightfitness RR
</li>
<li>
Antranik's Bodyweightfitness Routine
</li>
</ul>
</div>
<div></div>
</aside>
<!--Footer -->
<footer class="footer">
<div>
<p> Use of this site constitutes acceptance of our User Agreement © 2017 BodyweightMate inc. All rights reserved. </p>
</div>
</footer>
</body>
</html>
The error is occurring under the main portion where i check if a user is logged in, and if they are add a short form consisting of a message, a text area, and a submit button. This form sends the information to the following php file.
<?php
session_start();
if(!isset($_SESSION['login_user'])) { header("location: main.php"); }
?>
<!DOCTYPE html>
<html>
<body>
<?php
require("config.php");
$connection = mysqli_connect($host, $user, $password, $database);
$error = mysqli_connect_error();
if($error != null) {
$output = "<p>Unable to connect to database!</p>";
exit($output);
} else {
//Validation
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$comment = $_POST['comment'];
$threadID = $_POST['threadID'];
$user = $_SESSION['login_user'];
} else {
//Redirect back to register
echo"<p>Form must use post or input was bypassed.</p>";
echo" Return to home page. ";
mysqli_close($connection);
exit();
}
There is no issue with connecting to the database, and I don't believe the remainder of the code is necessary to help me with this error since that one if statement of checking if the form is using post is failing and the else statement is always called. Why is this? i have rewritten the form multiple times ensuring that its properly structured and using post yet it fails every time!
Hi all I don't know if anyone will or can help me but for the last week or so I have been trying to make up a profile page setup on my website but I can not get the pages to register any echo's or jest even php (It gives me blank pages and or tell me an error 500 server error)
I have set up my website with a static page for my logo, navbar and footer and using a include line to get the content on the pages. (I hope that makes sense).
if I put any form of php into the content pages it give me errors of 500 server error and or the pages just turns completely white.
Is there a specific way to show SQL content and or any PHP with this set up? if anyone knows any tutorials or could lend a hand that would be amazing (Any help will be placed onto the website on the Credits page).
Here is the static page code:
<?php require '../connection/conn.php'; ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="../css/Master.css" />
<link rel="stylesheet" type="text/css" href="../css/Menu.css" />
<link rel="stylesheet" type="text/css" href="../css/AboutImages.css" />
<link rel="stylesheet" type="text/css" href="../css/Form.css" />
</head>
<body>
<div class="container">
<div class="header">
<div id="logindata"></div>
</div>
<div class="menu">
<nav>
<ul class="cssmenu">
<li>Home</li>
<li>About Us</li>
<li>Videos</li>
<li>Contact Us</li>
<li>Forum</li>
<li></li>
<li>My Account</li>
<li>Logout</li>
</ul>
</nav>
</div>
<div class="content">
<?php echo $content;?>
</div>
<div class="footer">
<p>All Rights Reserved, LPGamers.com, Created And Built by Robert Prince & Amber Milton-White</p> Credits Page
</div>
</div>
</body>
</html>
And the content page:
<?php
$title = 'LPGamers -- Personal Account';
$content = '
<div id="formbox">
<form action="" method="GET">
<p>Search for you friends here !</p>
<input type="text" class="tfield">
<input type="submit" class="button">
</form>
</div>
<div class="ppicture">
<img src="" />
</div>
<div class="pd">
</br>
<p class="pdp">
Account id: # $userid
</p>
</br>
<p class="pdp">
Name:
</p>
</br>
<p class="pdp">
Age:
</p>
</br>
<p class="pdp">
Your Email:
</p>
</br>
<p class="pdp">
Your Bio:
</p>
</div>
';
include ("Site_View.php");
?>
If this help any more Thanks in advance
Edited the answer, it looks like some content of the original post was not displayed initially.
Do not put the form in the PHP code, it is not needed. You want to put the result probably there.
If you want to get data from SQL in PHP do the following:
Prerequisite: setup the php.ini to use whatever database you need, like:
extension=php_sqlsrv_56_nts.dll
Define a database connection
$serverName = "myserver";
$usr="mySQLuser";
$pwd="mySQLpass";
$db="mydatabase";
$connectionInfo = array("UID" => $usr, "PWD" => $pwd, "Database" => $db);
$conn = sqlsrv_connect($serverName, $connectionInfo);
if( !$conn ) {
die( print_r( sqlsrv_errors(), true));
}
Use the SQL connection to retrieve data.
$sql = "Select name from Users where users.name = " . $myparam;
note: the example above is vulnerable to SQL injection, but it is an easy start for coding, you can fix this later when you are familiar with it. Also you need to give a value to $myparam first.
Then:
$stmt = sqlsrv_query($conn, $sql);
sqlsrv_next_result($stmt);
sqlsrv_fetch($stmt);
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
Now you can use the data when you want, like this:
<?php
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$returnedName = $row['name'];
echo $returnedName;
}
?>
In the following page, begins an element that enables user to crop and save an image. It only works for the first item in the loop however, for all the sql rows that follow, clicking the image doesn't open up the modal-dialog box.
I don't have any overlapping tags, I've checked thoroughly. I've moved around the js script tags and don't get any change either. Is there a common cause for this? where would be the first place to troubleshoot? Would using a different type of loop in PHP be preferable?
<?php
ob_start();
session_start();
require_once ('verify.php');
?>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="head">
<ul id="menu">
</ul>
</div>
<div id="area"></div>
<div id="main_listings">
<h1 align="left">Edit listings page</h1>
<?php
include ("../dbcon2.php");
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
?>
<?php while ($data=mysqli_fetch_assoc($result)):
$id = $data['id'];
$id = $data['title'];
$listing_img = $data['listing_img'];
?>
<div id="edit_listing">
<div id="edit_left">
<div class="container" id="crop-avatar">
<div class="avatar-view" title="Change the avatar"> <img src="<?php echo $listing_img; ?>" alt="<?php echo $title; ?>"> </div>
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<input name="avatar_id" type="hidden" value="<?php echo $id; ?>">
<label for="avatarInput">Local upload</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary avatar-save" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
<div id="edit_right">
<form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
<input name="title" type="text" id="title" tabindex="1" value="<?php echo $title; ?>" size="60" maxlength="57"/>
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<input type="submit" formaction="edit_list.php" value="Submit" />
</form>
</div>
</div>
<?php endwhile;$conn->close();?>
<div class="spacer"></div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/crop-avatar.js"></script>
</body>
</html><?php // Flush the buffered output.
ob_end_flush();
?>
js js
// Events
EVENT_MOUSE_DOWN = "mousedown touchstart",
EVENT_MOUSE_MOVE = "mousemove touchmove",
EVENT_MOUSE_UP = "mouseup mouseleave touchend touchleave touchcancel",
EVENT_WHEEL = "wheel mousewheel DOMMouseScroll",
EVENT_RESIZE = "resize" + CROPPER_NAMESPACE, // Bind to window with namespace
EVENT_DBLCLICK = "dblclick",
EVENT_BUILD = "build" + CROPPER_NAMESPACE,
EVENT_BUILT = "built" + CROPPER_NAMESPACE,
EVENT_DRAG_START = "dragstart" + CROPPER_NAMESPACE,
EVENT_DRAG_MOVE = "dragmove" + CROPPER_NAMESPACE,
EVENT_DRAG_END = "dragend" + CROPPER_NAMESPACE,
build: function () {
var $this = this.$element,
defaults = this.defaults,
buildEvent,
$cropper;
if (!this.ready) {
return;
}
if (this.built) {
this.unbuild();
}
$this.one(EVENT_BUILD, defaults.build); // Only trigger once
buildEvent = $.Event(EVENT_BUILD);
$this.trigger(buildEvent);
if (buildEvent.isDefaultPrevented()) {
return;
}
// Create cropper elements
this.$cropper = ($cropper = $(Cropper.TEMPLATE));
// Hide the original image
$this.addClass(CLASS_HIDDEN);
// Show and prepend the clone iamge to the cropper
this.$clone.removeClass(CLASS_INVISIBLE).prependTo($cropper);
// Save original image for rotation
if (!this.rotated) {
this.$original = this.$clone.clone();
// Append the image to document to avoid "NS_ERROR_NOT_AVAILABLE" error on Firefox when call the "drawImage" method.
this.$original.addClass(CLASS_INVISIBLE).prependTo(this.$cropper);
this.originalImage = $.extend({}, this.image);
}
this.$container = $this.parent();
this.$container.append($cropper);
this.$canvas = $cropper.find(".cropper-canvas");
this.$dragger = $cropper.find(".cropper-dragger");
this.$viewer = $cropper.find(".cropper-viewer");
defaults.autoCrop ? (this.cropped = TRUE) : this.$dragger.addClass(CLASS_HIDDEN);
defaults.dragCrop && this.setDragMode("crop");
defaults.modal && this.$canvas.addClass(CLASS_MODAL);
!defaults.dashed && this.$dragger.find(".cropper-dashed").addClass(CLASS_HIDDEN);
!defaults.movable && this.$dragger.find(".cropper-face").data(STRING_DIRECTIVE, "move");
!defaults.resizable && this.$dragger.find(".cropper-line, .cropper-point").addClass(CLASS_HIDDEN);
this.$scope = defaults.multiple ? this.$cropper : $document;
this.addListeners();
this.initPreview();
this.built = TRUE;
this.update();
$this.one(EVENT_BUILT, defaults.built); // Only trigger once
$this.trigger(EVENT_BUILT);
},
The root of your problem is two-fold (and there may be other issues behind this).
First, you have tons of duplicate id values in your HTML.
Here are some of the dups: edit_listing, container, edit_left, crop-avatar, avatar-modal, etc...
A given ID can only be used once in the entire HTML document. All of these id values need to be changed to class names (which can be used as many times as you want) and then any code or CSS that references them needs to be changed to refer to the class name, not the ID value.
This comes into play in your code when you do:
new CropAvatar($("#crop-avatar"));
Because this is an id reference, it will only select the first element in your page with that id. Thus, only the first listing is active. If you change the HTML to be:
<div class="container crop-avatar">
then, you can select all of them with a class selector .crop-avatar.
Second, your CropAvatar() constructor is only ever called once, but it's written as if it is only going to be operating on a single avatar. So, either you need to call CropAvatar() separately for each listing OR you need to rewrite CropAvatar() and it's event handlers to work for all the listings instead of just one.
You could probably make the existing CropAvatar() constructor work if you fix all the duplicate ID values and then change this:
var example = new CropAvatar($("#crop-avatar"));
to this:
$(".crop-avatar").each(function() {
new CropAvatar($(this));
});
This will call the CropAvatar() constructor for each listing.
These are the first two main issues I see. I cannot promise that there are not other things to fix also, but those issues can't be seen until these first two are fixed.
I'm currently learning PHP and am creating a small CMS feature that includes a login area. I have used the code below which includes an include header file that contains the doctype/head info and the opening tag. It also includes the header content. I also have a connection file for connecting to the db.
My header include code is:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title><?php echo $pagetitle ?></title>
<link rel="stylesheet" href="../stylesheets/foundation.css">
<link rel="stylesheet" href="../stylesheets/app.css">
<style>#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); #import url (http://fonts.googleapis.com/css?family=Kreon:100,200,300,400);</style>
<script src="../javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="subHeader">
<div class="row">
<div class="four columns logo">
<img src="../images/logo.png" alt="logo" />
</div>
<div class="eight columns navigation right">
<ul class="navigationMain">
<li class="<?php if($navcurrent == "home"){echo "navigationActive";} ?>">Home</li>
<li class="<?php if($navcurrent == "services"){echo "navigationActive";} ?>">Services</li>
<li class="<?php if($navcurrent == "work"){echo "navigationActive";} ?>">Recent Work</li>
<li class="<?php if($navcurrent == "about"){echo "navigationActive";} ?>">About</li>
<li class="<?php if($navcurrent == "contact"){echo "navigationActive";} ?>">Contact</li>
</ul>
</div>
<div class="twelve columns titlesection">
<h2><?php echo $headTitle ?></h2>
<h4><?php echo $headsubTitle ?></h4>
</div>
</div><!--End Feature Row-->
</div><!--End Feature-->
<div class="underbar">
<div class="bordertriangle"></div>
<div class="row">
<div class="eight columns"> </div>
<div class="three columns right socialcontainer">
<ul class="socialicons">
<li><a><img id="linkedinIcon" src="../images/socialli.png" alt="linkedin icon" /></a></li>
<li><a><img id="twitterIcon" src="../images/socialtw.png" alt="twitter icon" /></a></li>
<li><a><img id="facebookIcon" src="../images/socialfb.png" alt="facebook icon" /></a></li>
</ul>
</div>
</div>
When I open the admin page, the username password form, header and footer appear as they should. If I test the errors, they return as they should. However, when I successfully log in using a valid username and password, no content appears except the what is included in the header file. Can anyone point me in the direction of what i might be doing wrong? Any help would be much appreciated. I am a relative noob to PHP...
<?php
$pagetitle = "Admin";
$navcurrent = "home";
$headTitle = "ADMIN AREA";
$headsubTitle = "SITE ADMINISTRATION AREA";
include_once('../includes/connection.php');
include_once('../includes/headeradmin.php');
if (isset($_SESSION['logged_in'])) {
echo('Successfully Logged In');
} else {
if (isset($_POST['username'], $_POST['password'])){
$username = $_POST['username'];
$password = $_POST['password'];
if (empty($username) or empty($password)){
$error = 'An Error Has Occurred - All Fields Are Required';
}
else{
$query = $pdo->prepare('SELECT * FROM users WHERE user_name = ? AND user_password = ?');
$query->bindValue(1, $username);
$query->bindValue(2, $password);
$query->execute();
$num = $query->rowCount();
if ($num == 1) {
$_SESSION['logged_in'] = true;
header('location: index.php');
exit();
}
else{
$error = 'The username/password you entered was incorrect - Please try again';
}
}
}
?>
<div class="row">
<div class="four columns centered">
<?php if (isset($error)) { ?>
<h5 style="color: #e63333;"><?php echo $error; ?></h5>
<br />
<br />
<?php } ?>
<form action="index.php" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
You can't use the header('location: index.php'); line if you've already output content (i.e - html code) to the browser when you included the header in this line include_once('../includes/headeradmin.php');
read the documentation of header - Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP
you need to redirect the user with the header() function before you output the head html of the admin page