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.