Linking jquery functions to PHP query results
Using PHP I am retrieving a list of videos. I am using jquery to display the video in an overlay. I have everything working, but the problem is the method of implementation seems a little brute force to me and I am looking for a way to cut out the redundant code.
Basically I get a list of videos from the database and output those using a foreach loop to the screen. I use the ID of the video to make the like link id for each result unique:
<a id=like<?php echo $video['fileID'] ?>" ...
I then have to add the jquery to each iteration of the loop. Its an ajax call that passes the information ab开发者_开发问答out the video, the current user, etc. If the current user votes for a video then the jquery ajax function is called and a new vote count is displayed:
//upVote for a discussion
$('#like<?php echo $video['fileID'] ?>').click(function(){
$.ajax({
type:"POST",
url:'/ajax/likeFile.php',
data:"voter=" + <?php echo (isset($_SESSION['user_id']) ? $_SESSION['user_id'] : ''); ?>
+ "&poster=" + <?php echo $video['userID'] ?>
+ "&classID=" + <?php echo $_SESSION['class'] ?>
+ "&lessonID=" + <?php echo $_SESSION['lesson'] ?>
+ "&id=" + <?php echo $video['fileID'] ?>
+ "&type=like",
success: function(data) {
var $response=$(data);
var votes = $response.filter('#voteCount').text();
$('#fileVotes').text(votes);
$('#like').attr('src', '/images/upvoteDisabled.png');
$('#unlike').attr('src', '/images/downvote.png');
}
});
});
Like I said, this is working fine. The problem is that I would like to cut down on repeating the jquery over and over for each link. Is there a way to call this and just have the item that gets selected pass its current loop iteration variables instead of having create a jquery function for each link?
This is a really convoluted question I know. Thanks in advance to anyone who wants to tackle this.
First, set an HTML5 DOCTYPE so you can take advantage of custom data attributes:
<!DOCTYPE HTML>
Then have PHP populate your data attributes for each anchor:
<a class="like-btn" id="like<?=$video['fileID']?>" data-voter="<?php echo (isset($_SESSION['user_id']) ? $_SESSION['user_id'] : '');" data-poster="<?=$video['userID']?>" data-class="<?=$_SESSION['class']?>" data-lesson="<?=$_SESSION['lesson']?>" data-file="<?=$video['fileID']?>"> ... </a>
Then use a single JQuery click handler:
$('a.like-btn').click(function(){
$.ajax({
type:"POST",
url:'/ajax/likeFile.php',
data:"voter=" + $(this).data('voter')
+ "&poster=" + $(this).data('poster')
+ "&classID=" + $(this).data('class')
+ "&lessonID=" + $(this).data('lesson')
+ "&id=" + $(this).data('file')
+ "&type=like",
success: function(data) {
var $response=$(data);
var votes = $response.filter('#voteCount').text();
$('#fileVotes').text(votes);
$(this).attr('src', '/images/upvoteDisabled.png');
//$('#unlike').attr('src', '/images/downvote.png'); // fix in your DOM
}
});
});
Why not use custom attributes and a class for your jQuery selector?
<a class="like"
data-fileID="<?php echo $video['fileID'] ?>"
data-userID="<?php echo $video['userID'] ?>">Like</a>
Then, you can:
$('a.like').click(function(){
$.ajax({
type:"POST",
url:'/ajax/likeFile.php',
data:"voter=" + <?php echo (
isset($_SESSION['user_id']) ? $_SESSION['user_id'] : ''); ?>
+ "&poster=" + $(this).data('userID')
+ "&classID=" + <?php echo $_SESSION['class'] ?>
+ "&lessonID=" + <?php echo $_SESSION['lesson'] ?>
+ "&id=" + $(this).data('fileID')
...
Prefixing the attribute with data- will make it HTML5 forward-compatible, and if you need to validate for previous versions of XHTML, just extend the DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST a data-fileID CDATA #IMPLIED>
<!ATTLIST a data-userID CDATA #IMPLIED>
]>
Give a class to all elements upon which vote up function should be triggered on clicking. Then it would be something like
e.g. that is an anchor element with voteup class
$('.voteup').click(function(){
var fileid = $this.attr('id');
//update $video['fileid'] with fileid
//the code to update a specific class element can be implemented with this approach as well
})
Instead of generating the JavaScript code on the fly, generate a PHP array, transform it to a native JavaScript data type using json_encode(). In JavaScript you loop trough the data binding the click event. It will be easier and you won't need to create special HTML markup.
加载中,请稍侯......
精彩评论