I'm working on a voting system in AJAX and PHP and I've run into a bit of trouble. We're displaying a bunch of posts from our database and each post has an image next to it -- clicking the image is supposed to 1) toggle the image colour and then 2) use AJAX call a PHP script which then decides whether to add or subtract a vote. I have the image toggle working, but I'm not sure how to do the next part. What's the best way to do this?
This is the while-loop which outputs the posts:
while($row = mysql_fetch_array($result))
{
?>
<li class = "post">
<img name = "heart<?php echo $row['post_id'];?>" src = "/images/heart.png" class = "thumbnail" width = "15" />
<p class = "title"><img class = "favicon" width = "16" height = "16" src = "<? echo $row['favicon']; ?>" /><? echo $row['post_title']; ?></p>
<p class = "postinfo">posted <? echo doRelativeDate( $row['date'] ); ?> by <? echo $row['blog_name']; ?>
</li>
<?
}
?>
" src = "/images/heart.png" class = "thumbnail" width = "15" id="voteImage />
add one ID to your image. catch click event on this Id by any javascript framework.
I am giving example in jQuery.
jQuery("#voteImage").live("click",function(){
var imageName = jQuery(this).attr('name');
var postId = imageName.substr(5); //Here you will have post Id because remove heart from heart20
//now you can hit ajax call to your vote-up or vote-Down php with postId
jQuery.ajax({
type: 'POST',
url: baseURI+'voteup.php',
data:"postId="+postId,
cache: false,
success: function(result)
{
//perform further action like give alert to user that action performed
}
});
}
Related
I want to open a new page and transfer data from an array. Using the name of the image seemed like the easiest way so that's what i want to do.
on the page i want to call it
function meghiv($img)
{
$be=$img.alt;
echo $be;
session_start();
$_SESSION['kod'] = $be;
}
for($j=0;$j<4;$j++)
{
echo ' <img src="'.$nevek[$i].'.png" class="card-img-top " alt="'.$i.'" onclick="meghiv(this)"> ';
$i++;
}
on the new page
<?php
session_start();
echo $_SESSION['kod'];
?>
I don't know if it answers your question but try using javascript to load the image name into your php file
let images = document.querySelectorAll('.card-img-top'); // returns NodeList
let img_list = [...images]; // converts NodeList to Array
img_list.forEach(div => {
div.addEventListener("click", function(e){
e.preventDefault()
let alt = div.getAttribute("alt")
window.open(`https://link.here/?alt=${alt}`, "_blank");
})
});
Then in your php file
$image_name = $_GET['alt'];
I have a page that loads 200 or more images on one page.
All images load fine but after a few seconds, I am sending a request using
setInterval(function() {
var d = new Date();
$("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?"+d.getTime()); },
8000);
and I load new images to this same page. I call this function in a while loop.
What I am looking for:
Is there a way to refresh just the images that have been changed?
What is meant by change?
Actually, I have two pages one is used for editing images and the other is a viewer I am using wPaint js for editing images. Below you'll find screenshots of both pages.
VIEW PAGE
Editor Page
Editor page code
//while loop start here
<div class="wPaint" id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:60px auto 20px auto;">
<input type="hidden" class="editEnable" value="0">
Save Image
</div>
<script type="text/javascript">
function saveImg(image) {
var _this = this;
$.ajax({
type: 'POST',
<?php if($_REQUEST['nz']==1){ ?>
url: 'ajax/upload-nz.php?imgName=<?php echo $row['
image_name ']; ?>&imgID=<?php echo $row['
id ']; ?>',
<?php }else{?>
url: 'ajax/upload.php?imgName=<?php echo $row['image_name ']; ?>&imgID=<?php echo $row['id ']; ?>',
<?php } ?>
data: {
image: image
},
success: function(resp) {
if (resp == 1 || parseInt(resp) == 1) {
_this._displayStatus('Image saved successfully');
$(this).find(".editEnable").attr('value', '2');
setTimeout(function() {
$("#saveImg<?php echo $row['id']; ?>").css({
'pointer-events': '',
'opacity': '1'
});
}, 800);
} else {
alert('Some one delete this image. You can not edit or save this image now.');
}
}
});
}
// both funciton use to load image on page load
function loadImgBg() {
this._showFileModal('bg', images);
}
function loadImgFg() {
this._showFileModal('fg', images);
}
// init wPaint
$('.wPaint').wPaint({
path: '', // set absolute path for images and cursors
autoScaleImage: true, // auto scale images to size of canvas (fg and bg)
autoCenterImage: true, // auto center images (fg and bg, default is left/top corner)
menuHandle: false, // setting to false will means menus cannot be dragged around
menuOffsetLeft: 0,
menuOffsetTop: -90,
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg,
bg: '<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['
src_path ']).$row['
image_name ']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>', // set bg on init
imageStretch: false, // stretch smaller images to full canvans dimensions
mode: 'text',
fontSize: '40',
fillStyle: '#FF0000',
fontBold: true,
strokeStyle: '#F00',
});
</script>
//while loop ended here
View Page Code
//while loop start here
<div id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:0px auto 20px auto;">
<span id='ex<?php echo $row[' id ']; ?>' class="zoom"><img src='<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>' id="img<?php echo $row['id']; ?>" />
</span>
</div>
<script>
setInterval(function() {
// Date use to prevent browser cache
var d = new Date();
$("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace(".. / ","
",$row['src_path']).$row['image_name']; ?>?" + d.getTime());
}, 15000);
</script>
//while loop ended here
Your php code loads once when the page is loaded. Your setInterval doesn't re-initialize your php code.
You can do one of three things.
1.Create an ajax call that requests the images table and updates when necessary and put the ajax call in the setInterval
2.When submitting a change have a proper php response with the image id stored in a new variable, let's say newId and the new imgSrc in a variable newImgSrc. Then with:
$("#img"+newId).attr("src", newImgSrc+"?"+d.getTime());
you can update directly the affected image.
When you load the page you can store all images using jquery. To do that you would need either a common selector or a parent for the images. SO you could enclose all images in a div with id="images-parent". In this case you can put everything in a setInterval and update like this:
setInterval(function() {
var d = new Date();
$("#images-parent").children("img").each(function() {
var newImgSrc = $(this).attr("src");
$(this).attr("src",newImgSrc+"?"+d.getTime());
});
},8000);
I have a comics website which loops through all images in a db and displays them as thumbnails.
The user can click on one of those images to see it in normal size on a viewComic.php template.
I'd like to allow users to press left and right arrows to navigate images.
So, my idea is:
pagination.php handles image display on correct pages (by offsetting) by looping through database result array. The user can click on a result (below) to go to that specific image on the viewcomic.php template.
'<br />IMG: <a href="./templates/viewcomic.php?id=' . $row['imgid'] . '&image=' . $imgpath.$row['imgname'] . '">
Now on viewcomic.php, I get the id and image, and display the image
$imgid = $_GET['id'];
$imgpath = $_GET['image'];
<center><img src=".<?php echo $imgpath ?>" /></center>
The user can press left and right arrows to navigate through images...
My goal was to somehow increment the image id to move to the next image, but that doesn't seem to be working...
<script type="text/javascript">
$(document).ready(function() {
$(document).keydown(function (e) {
if (e.which == 39) { //get next image
<?php
$count = 0;
$count++;
echo "<img src=" . $imageArray[$count] . "/>";
?>
}
});
});
</script>
Any ideas?
EDIT: I'm going to go through an image array passed in from pagination.php.
So, in my viewcomic.php file, I've updated my jquery script (see above).. but the jquery doesn't seem to like the embedded php, even though it's all in a php file.
Here's a picture of page source vs code:
Here is what i would do:
assuming that an imagepath is surrounded by quotes:
echo $imageArray[0]; // 'imagepath/image'
Script:
<script type="text/javascript">
var imgArray = [<?php echo implode(',',$imageArray) ?>];
// now the image array have the list of all your images.
$(document).ready(function() {
var img = document.getElementById("theImage");
imgIndex = 0;
$(document).keydown(function (e) {
if (e.which == 39) { //get next image
img.src = imgArray[imgIndex++]
}
... /* Logic to check if at the end of imageArray */ ...
});
});
</script>
The Html:
<center><img src="" id="theImage"/></center>
How about:
$(document).ready(function() {
$(document).keydown(function (e) {
if (e.which == 39) {
var nextId = $_GET['id'] + 1;
window.location = "./templates/viewcomic.php?id=" + nextId;
}
});
});
In this case your page is submit on every request, You can also handle this at client site.
Click link to see demo about rotate link using JavaScript. : Link Rotate using javascript
i'm creating a simple slideshow. 4 images coming from db by php stored in a div called home_gallery_thumb with relative position and the images are wrapped inside anchor tag trying to change them with a next and previous buttons but it jumps to the third image then everything stops completely though it works without any problem if these images are static not coming from the db here's the div fetching images
<div class="home_gallery_thumb" style="background-color:#006; position:relative;">
<?php
require('_req/base.php');
$getImgsQ = "select Photo_Name from photos order by Photo_ID DESC limit 4";
$getImgsR = mysql_query($getImgsQ);
while($galleryRow = mysql_fetch_array($getImgsR)){
?> <a class="galleryLink" style="position:absolute;" href="products_large/<?php echo $galleryRow['Photo_Name']; ?>"><img src="products_thumb/<?php echo $galleryRow['Photo_Name']; ?>" /></a> <?php
}
mysql_close($connect);
?>
so now i have links with images inside the div and here's the jq code
$(".home_gallery_thumb a.galleryLink").css("display","none");
$("a.galleryLink:first").fadeIn(500);
var allImgs = $(".home_gallery_thumb a").length;
$(".next").click(function(){
var curImg = $("a.galleryLink:visible").index();
var nxtImg = curImg+1 ;
if(nxtImg == allImgs) { nxtImg = 0; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+nxtImg+")").fadeIn(800);
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible").index();
var prevImg = curImg-1 ;
if(prevImg == -1) { prevImg = allImgs-1; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+prevImg+")").fadeIn(800);
});
});
this code is inside document.ready and that's what i noticed through firebug
first : images load and all other links are : display:none
after clicking next button first link doesn't get display:none style and it jumps to the third link making it visible then everything stops. And the previous button does nothing at all as it doesn't exist
try this, if not work, provide a link to your slide
$("a.galleryLink").hide();
$("a.galleryLink:first-child").fadeIn(500);
$(".next").click(function(){
var curImg = $("a.galleryLink:visible");
var nxtImg = curImg.next();
if(!nxtImg.length) { nxtImg = $("a.galleryLink:first-child"); }
curImg.fadeOut(800,function(){
nxtImg.fadeIn();
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible");
var prvImg = curImg.prev();
if(!prvImg.length) { prvImg = $("a.galleryLink:last-child"); }
curImg.fadeOut(800,function(){
prvImg.fadeIn();
});
});
I have a problem with some JSON data. I don't know how to take some data generated in PHP and turn that into something that I can use in my jQuery script. The functionality I need is this: I need to be able to click on images on the page, and depending on the selected element, I need to show results from my DB.
Here's the HTML page that I've got:
<html>
<head>
<title>pippo</title>
<script><!-- Link to the JS snippet below --></script>
</head>
<body>
Contact List:
<ul>
<li><a href="#">
<img src="contacts/pippo.png" onclick="javascript:change('pippo')"/>pippo
</a></li>
<li><a href="#">
<img src="contacts/pluto.png" onclick="javascript:change('pluto')"/>pluto
</a></li>
<li><a href="#">
<img src="contacts/topolino.png" onclick="javascript:change('topolino')"/>topolino
</a></li>
</ul>
</body>
</html>
Here's PHP code being called:
<?php
include('../dll/config.php');
$surname = $_POST['surname'];
$result = mysql_query("select * from profile Where surname='$surname'") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
$_POST['name'] = ucfirst($row['name']);
$_POST['tel'] = $row['telephone'];
$_POST['companymail'] = $row['companymail'];
$_POST['mail'] = $row['email'];
$_POST['fbid'] = $row['facebook'];
}
?>
Here's the Ajax JavaScript code I'm using:
<script type="text/javascript">
function change(user) {
$.ajax({
type: "POST",
url: "chgcontact.php",
data: "surname="+user+"&name=&tel=&companymail=&mail=&fbid",
success: function(name,tel,companymail,mail,fbid){
alert(name);
}
});
return "";
}
</script>
Someone told me that this JS snippet would do what I want:
$.getJSON('chgcontact.php', function(user) {
var items = [name,surname,tel,companymail,email,facebook];
$.each(user, function(surname) {
items.push('surname="' + user + "'name='" + name + "'telephone='" + telephone + "'companymail='" + companymail + "'mail='" + mail + "'facebook='" + facebook);
});
/*
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
*/
});
But it is not clear to me - I don't understand how I need to use it or where I should include it in my code.
You will have to create a proper JSON string in your PHP script, and then echo that string at the end of the script.
A simple example:
$person = new stdClass;
$result = mysql_query("select * from profile Where surname='$surname'")
or die(mysql_error());
while ($row = mysql_fetch_array( $result )) {
$person->name = ucfirst($row['name']);
$person->tel = $row['telephone'];
$person->companymail = $row['companymail'];
$person->mail = $row['email'];
$person->fbid = $row['facebook'];
}
echo json_encode($person);
There are several problems with your code I have tried to explain via the corrected and commented code here:
HTML & JavaScript
<html>
<head><title>pippo</title>
<!-- added link to jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- javascript can go here -->
<script type="text/javascript">
$.ajax({
type: "POST",
url: "chgcontact.php",
// use javascript object instead of `get` string to represent data
data: {surname:user, name:'', tel:'', companymail:'', mail:'', fbid:''},
success: function(data){
// removed name,tel,companymail,mail,fbid
alert(JSON.parse(data));
}
});
return "";
}
</script>
</head>
<body>
Contact List:
<ul>
<!-- removed `javascript` form onclick handler -->
<li><img src="contacts/pippo.png" onclick="change('pippo')"/>pippo</li>
<li><img src="contacts/pluto.png" onclick="change('pluto')"/>pluto</li>
<li><img src="contacts/topolino.png" onclick="change('topolino')"/>topolino</li>
</ul>
</body>
</html>
PHP
<?php
$surname = $_POST['surname'];
$result = mysql_query("select * from profile Where surname='$surname'")
or die(mysql_error());
while ($row = mysql_fetch_array( $result )){
// create data object
$data = new stdClass();
// add values to data object
$data->name = ucfirst($row['name']);
$data->tel = $row['telephone'];
$data->companymail = $row['companymail'];
$data->mail = $row['email'];
$data->fbid = $row['facebook'];
// send header to ensure correct mime type
header("content-type: text/json");
// echo the json encoded data
echo json_encode($data);
}
?>
All code is untested, but you should be able to see what I have done at each step. Good luck.
And to expand on Brian Driscoll's answer. You will need to use the user.name format to access the name field from the returned $.getJSON("blah", function(user){});
so...
items.push('surname="'+user+"'name='"+user.name+"'telephone='"+user.telephone+"'companymail='"+user.companymail+"'email='"+user.email+"'facebook='"+user.facebook+);
In this format that you have created it will just push a long ugly looking string so you might want to spend some time making it look better. Good luck!
JSON that is POSTed to a PHP page generally isn't in the $_POST variable, rather it is in $HTTP_RAW_POST_DATA.