#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2012
    Location
    UK
    Posts
    21
    Rep Power
    0

    Jquery/AJAX form issues


    I've been putting a table together with the required data and I'm able to display it as needed. What I'm wanting is this:

    At the end of each row are two buttons "yes" and "no". When the user clicks "yes" the div for that form disappears and the form for "no" appears. During the transition Jquery submits a MySQL query and updates the database. There are a few problems I'm having though.
    Scenario 1
    • When the user clicks the "yes" button all of the "yes" forms fade out and all of the "no" forms fade in on all rows
    • The database does not update

    Scenario 2
    • When the user clicks the "yes" button the "no" form does not fade in when the "yes" form should also fade out but doesn't
    • The database does not update

    When trying out the SQL query everything is running as it should with no problems at all including error checking, but for some reason nothing happens when it's used as an URL in JQuery/AJAX. The MySQL query is the following:
    PHP Code:
    <?php require_once($_SERVER['DOCUMENT_ROOT'] . "/includes/headers.php"); ?>
    <?php
        
    if (($_POST["user_id"]) && ($_POST["game_id"])) {
            
    $user $_POST["user_id"];
            
    $game $_POST["game_id"];
            
            try {
                
    $sql "
                    SELECT game
                    FROM site_games_owned
                    WHERE user = " 
    $user " AND game = " $game "
                "
    ;
                
    $result $pdo->query($sql);
                
    $count    $result->rowCount();
            }
            catch (
    PDOException $e) {
                
    $error "Cannot retrieve the owned games before insertion.<br>Error: " $e -> getMessage();
                echo 
    $error;
                exit();
            }
            if (
    $count != 0) {
                echo 
    $added "You have already added that game.";
            } else {
                try {
                    
    $sql "
                        INSERT INTO site_games_owned SET
                        user = :user,
                        game = :game
                    "
    ;
                    
                    
    $s $pdo->prepare($sql);
                    
    $s->bindValue(":user"$user);
                    
    $s->bindValue(":game"$game);
                    
    $s->execute();
                }
                catch (
    PDOException $e) {
                    
    $error "Cannot add the owned game.<br>Error: " $e -> getMessage();
                    echo 
    $error;
                    exit();
                }
            }
        }
    ?>
    There are no problems as far as I'm aware of with the above PDO query and it currently works anyway. The problem is the Jquery, for Scenario 1 I have the following:
    PHP Code:
    $(function() {
        $(
    ".ownBtn").click(function () {
            var 
    own = $("own").val();
            var 
    user_id = $("user_id").val();
            var 
    game_id = $("game_id").val();
            var 
    dataString "own=" own "&user_id=" user_id "&game_id=" game_id;
            
            $.
    ajax ({
                
    type"POST",
                
    url"game_own.php",
                
    datadataString,
                
    success: function() {
                    $(
    ".owned").fadeOut(function() {
                        $(
    ".owned2").fadeIn();
                    })
                }
            });
            return 
    false;
        });
    }); 
    And for Scenarion 2 I have the following:
    PHP Code:
    $(function() {
        $(
    ".ownBtn").click(function () {
            var 
    own = $("own").val();
            var 
    user_id = $("user_id").val();
            var 
    game_id = $("game_id").val();
            var 
    dataString "own=" own "&user_id=" user_id "&game_id=" game_id;
            
            $.
    ajax ({
                
    type"POST",
                
    url"game_own.php",
                
    datadataString,
                
    success: function() {
                    $(
    ".owned" game_id).fadeOut(function() {
                        $(
    ".owned2" game_id).fadeIn();
                    })
                }
            });
            return 
    false;
        });
    }); 
    And the form is as follows for Scenario 1:
    PHP Code:
    <div class="owned2" style="display:none;">fdhskjfhsdk</div>
    <div class="owned">
        <form>
            <input type="hidden" name="own" value="1">
            <input type="hidden" name="user_id" value="<?php echo $vbulletin->userinfo["userid"]; ?>">
            <input type="hidden" name="game_id" value="<?php echo $games["id"]; ?>">
            <input type="submit" value="No" class="ownBtn">
        </form>
    </div>
    And the form is as follows for Scenario 2:
    PHP Code:
    <div class="owned2<?php echo $games["id"]; ?>" style="display:none;">fdhskjfhsdk</div>
    <div class="owned<?php echo $games["id"]; ?>">
        <form>
            <input type="hidden" name="own" value="1">
            <input type="hidden" name="user_id" value="<?php echo $vbulletin->userinfo["userid"]; ?>">
            <input type="hidden" name="game_id" value="<?php echo $games["id"]; ?>">
            <input type="submit" value="No" class="ownBtn">
        </form>
    </div>
    Any ideas where I might be going wrong?
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    The best way to debug a problem like this is to use a tool for inspecting HTTP requests like Firebug, HTTPFox or Fiddler. You can examine the exact parameter values that are being submitted and the exact data that is being returned by your PHP script. This should help indicate where the problem lies.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    199
    Rep Power
    31
    Probably small mistakes,
    "own", "user_id" and "game_id" are not tags, classnames nor ids but just HTML input's name-attributes. How do you jQuery that? Like the following?
    PHP Code:
      $(".ownBtn").click(function () {
        var 
    own = $('[name="own"]').val();
        var 
    user_id = $('[name="user_id"]').val();
        var 
    game_id = $('[name="game_id"]').val(); 
        ...
      } 

IMN logo majestic logo threadwatch logo seochat tools logo