1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Working Voting System but requires jQuery modernization

Discussion in 'jQuery' started by VicarInATutu, Jan 28, 2014.

0
  1. #1
    Thanks for helping out on this. I'm having problems getting jQuery to work with my current PHP voting system.

    It's a three stage process: voting page, jQuery, processing page

    1. The voting page (three possibilities shown below).

    <head>
    <script src="jquery.js"></script>
    <script src="submit_vote.js"></script>
    </head>

    a).
    <submit_vote>
    <?php
    echo "<a href='Voting_Send.php?FixedIDvalue=123'>VOTE</a>";
    ?>
    </submit_vote>

    or b).
    <div id="submit_vote>
    <?php
    echo "<a href='Voting_Send.php?FixedIDvalue=123'>VOTE</a>";
    ?>
    </div>

    or c).
    <?php
    echo "<a id="submit_vote" href='Voting_Send.php?FixedIDvalue=123'>VOTE</a>";
    ?>

    jQuery has no effect on any of these possibilities, although jQuery is working in its own right after testing elsewhere.

    2. The jQuery file:

    $("submit_vote").click(function() {
    var vote = $('FixedIDvalue').val();
    $.post('Voting_Send.php', {castvote:vote}, function(data) { //do something with data
    });
    }

    I'm not currently receiving or sending the $FixedIDvalue.

    3. The processing PHP page:

    <?php
    $FixedIDvalue = $_POST['FixedIDvalue'];

    require ('db_connect.php');

    mysql_db_query("database", "UPDATE VoteTest SET Rank = Rank + 1 WHERE FixedID=$FixedIDvalue ");

    ?>

    If I set $_POST to $_GET, the process works as normal, updating the table by + 1 after receiving the variable from the original voting page, but if I set it to POST, as shown above, I do not receive the variable container value from the jQuery file. In fact, the jQuery file is being ignored completely because I don't know how to configure it properly or because I've done something wrong in the original voting page.

    Any help, greatly appreciated.

    All The Best
     
    Solved! View solution.
    VicarInATutu, Jan 28, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well, first of, you need some sort of identifier to let jQuery know what you're clicking - the code you've shown doesn't do that.
    You need to either add a # in front, like this: $("#submit_vote") if it's an ID, and $(".submit_vote") if it's a class.
    However, you won't be able to access the value from the link like you've tried - there's no $("FixedIDValue")-element.
    What you should do is just make the voting system a form - like this:
    
<form class="submit_vote_form" method="post" action="votingpage.php">
<input id="vote" name="vote" value="123" type="hidden">
<input type="submit" value="submit vote">
</form>
    Code (markup):
    and then use a jQuery function, something like this:
    
$(".submit_vote_form input[type=submit]").click(function(e) {
e.preventDefault();
var vote = $("#vote").val();
$.post('votingpage.php',{castvote:vote},function(data) { // do something with data
});
})
    Code (markup):
    This isn't 100%, but should give you a start
     
    PoPSiCLe, Jan 28, 2014 IP
  3. VicarInATutu

    VicarInATutu Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hi,
    Thanks for your suggestion PoPSiCLe, but using <forms> will lead to nasty website navigation expiry messages.
    Once you submit a form, i.e. when you vote, and then move away from the page and then go back to it, you'll get the horrible 'confirm you wish to re-submit the form message'. I can't take a step backwards and use forms like that.

    Thanks for your help, but I need to use a different route.

    At the moment, I pull an ID number from the MySQL database and then store it in a PHP variable.
    $FixedIDValue
    I then send that variable to another PHP file so that the MySQL table row containing that unique ID can be updated. It works well.

    But I don't want website visitors to see the redirection from one PHP page to another PHP page. It's old-fashioned and ugly.

    So I would like to pass that ID value, let's say '123', through jQuery before being sent to the php processing page, so that jQuery can hide the process from the website visitor or do other things with the data.

    I thought I could wrap the hyperlink in a DIV ID or CLASS:

    <div id="submit_vote">
    <?php
    echo "<a href='Voting_Send.php?FixedIDvalue=123'>VOTE</a>";
    ?>
    </div>

    ---->

    The 'submit_vote' jQuery file you gave me looks like this:

    $("#submit_vote").click(function() {
    var vote = $('FixedIDvalue').val();
    $.post('Voting_Send.php', {castvote:vote}, function(data) { //do something with data
    });
    }

    (It's not done anything with the data yet, I'm just hoping to get the variable sent through jQuery to the processing PHP file so that I can then work on developing the jQuery code itself)

    ---->
    The 'Voting_Send.php' file receives the variable like this:

    <?php
    $FixedIDvalue = $_POST['vote'];
    ?>

    I'm afraid I don't understand how the ID value '123', or whatever other value, gets transferred into jQuery using the div ID or CLASS.

    I'd like to get the basic process working, but I'm getting a bit overwhelmed.

    All The Best
     
    VicarInATutu, Jan 28, 2014 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    The point is, since you're using a link to send the value, you need to do a bit of parsing of the link value to get the right info into the variable being sent by PHP.
    Lets say your link is this:
    
<a href="includes/votingpage.php?FixedIDvalue=123">Vote here</a>
    Code (markup):
    to get to that value, you need to parse the content of the href - something like this:
    
$(document).ready(function() {
   $(".votelink").click(function(e) {
     e.preventDefault();
     var votingvalue = $(this).attr('href').split('=');
     $.post('votingscript.php',{castvote:votingvalue[1]}, function(data) {
       //do something with data
     })
   });
});
    Code (markup):
    This does, however, base itself on a class for the <a> as class="votelink" and bases itself of only one value assigned by =, and that there are only two elements in the resulting array (votingvalue). It can of course be adapted to accept other types of input - I haven't used the names you provided, simply because I'm a big opposer of camelcase filenames and names used in URLs, as URLs are case-sensitive. I prefer all lowercase :)
     
    PoPSiCLe, Jan 28, 2014 IP
  5. #5
    Your code needs lots of improvements:

    HTML Code:
    <!DOCTYPE html>
<html>
<head>
<title>Vote Debug</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<a href="Voting_Send.php?FixedIDvalue=123" id="vote">VOTE</a>
<span id="result"></span>
</body>
</html>
    HTML:
    JS Code:
    $(document).ready(function() {
    $("#vote").click(function(){
    var vote = $(this).attr('href').replace('Voting_Send.php?FixedIDvalue=', '');
    $.ajax({
        url: "Voting_Send.php",
        type: 'post',
        data: {FixedIDvalue:vote},
        success: function(data) {
            $('#result').html(data);
        }
     });
    return false;
    });
});
    Code (markup):
    PHP Code:
    <?php
$FixedIDvalue = $_POST['FixedIDvalue'];
echo $FixedIDvalue;
?>
    PHP:
     
    Code Developer, Jan 28, 2014 IP
  6. VicarInATutu

    VicarInATutu Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Thanks Popsicle for all your help in getting me to understand the concept here, but for some reason I couldn't get your code to work. Please don't be offended, but I found the solution posted by Code Developer to be more useful, so that's what I implemented.

    Here's what I ended up doing:

    
$(document).ready(function() {
    $(".votepos").click(function(event){
    var vote = $(this).attr('href').replace('http://mysite/file.php?FixedIDvalue=', '');
    $.ajax({
        url: "http://mysite/file.php",
        type: 'post',
        data: {FixedIDvalue:vote},
        success: function(data) {
            window.location.reload(false);
        }
     });
    event.preventDefault();
    });
});
    Code (markup):
    In a nutshell, I changed the ID to CLASS because I think I'll be using the variable throughout the page at various times. Not sure if that's actually valid.

    I didn't want to implement $('#result').html(data); so I replaced it with a simple window.location.reload(false); statement instead. Obviously, I removed the <span id="result"></span> section from my HTML, instead refreshing the entire page to get the newly updated data from the MySQL server. It's not ideal, but rudimentary is fine at this point.

    I also changed the return false; statement to event.preventDefault(); because I believe it to be a more up-to-date option. I'm not sure whether to use (e) or (event), but (event) works fine for me.

    That's about it really, it's working. I'll spare you the details of the site and what goes on there.

    Thanks again.
     
    Last edited: Feb 3, 2014
    VicarInATutu, Feb 3, 2014 IP