SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax post vote problem

    I need click `ben10` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`. click `winx` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`.
    click `pocoyo` that `<h2>you voted</h2>` will display in its' child `<div class="message"></div>`.

    but my code not worked. can anyone help me?
    and if I add it with other jquery plungin, How to change the `$` so that all the js code run well? Thanks.

    JS CODE
    Code:
    $(function() {
    $(".vote").click(function()
    {
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);
    if(name=='up'){
    $(this).fadeIn(2).html(' ');
    $.ajax({
    type: "POST",
    url: "up_vote.php",
    data: dataString,
    cache: false,
    context: this,
    success: function(html){
    parent.html(html);   // show the total number of votes                    
    $(this).children('.message').fadeIn(100, function() {
    $(this).children('.message').html("<h2>you voted</h2>");
    })
    $(this).children('.message').fadeOut(5000, function() {
    $(this).children('.message').html('');
    })
    }
    });
    }
    return false;
    });
    });
    CSS CODE
    Code:
    .message{display:none;}
    HTML CODE
    HTML Code:
    <div class='up'>
    <a href="" class="vote" id="id1" name="up">ben10</a>
    <div class="message"></div>
    </div>
    <div class='up'>
    <a href="" class="vote" id="id2" name="up">winx</a>
    <div class="message"></div>
    </div>
    <div class='up'>
    <a href="" class="vote" id="id3" name="up">pocoyo</a>
    <div class="message"></div>
    </div>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your code is a little confusing as your using some code that doesn't make any sense to use but try the following

    Code JavaScript:
    $(function() {
        $('.vote').click(function() {
            var id = $(this).attr('id');
            var name = $(this).attr('name');
            var dataString = 'id=' + id;
            var parent = $(this);
     
            if (name == 'up') {
                $(this).fadeIn(2).html(' ');
     
                $.ajax({
                    type    : 'POST',
                    url     : 'up_vote.php',
                    data    : dataString,
                    cache   : false,
                    context : this,
                    success : function(html) {
                        parent
                            .html(html) // show the total number of votes
                            .next('.message')
                            .fadeIn(100, function() {
                                $(this).html('<h2>you voted</h2>');
                            })
                            .delay(5000)
                            .fadeOut(100, function() {
                                $(this).children('.message').html('');
                            });
                    }
                });
            }
     
            return false;
        });
    });

    As for using something other then $ for the jQuery identifier you can use

    Code JavaScript:
    jQuery(function($) {
        // Normal jQuery code here
        //
        // This elminates the conflict between jQuery and other libraries
        // but still allows you to use $ within the scope
    });

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still won't work because variable "parent" is actually the clicked <a> element, not the div containing it. <a> element will not display anything, since the .html() method is being used to populate it, rather than .text() but I assume it's not what the OP wants.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, @SgtLegend, all my problems are solved

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    furicane, yes, you are right. the problem cause there.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to use the div of the clicked <a> element, you need:

    Code JavaScript:
    var parent = $(this).parent();

    But then the problem will be that you use .html() method on the parent variable, which overwrites anything that's found in the selected element.
    I don't know if that's what you want, but you have enough to play with now

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    furicane, have a nice lesson, I learn more from u.

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •