SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery AJAX fetch PHP variables (json?)

    I have a PHP file which is called upon through AJAX.

    The PHP file "fetch.php" searches the database with the given JS variables, an x and y co-ordinate, through GET, and brings back the user id associated with those co-ordinates.

    So I then get that users information...

    I'm then trying to bring those PHP variables back into the AJAX call on the original page and display the results... here's what I've got so far...

    Javascript/jQuery
    Code JavaScript:
    <script type="text/javascript">
     
        jQuery.fn.elementlocation = function() {
     
            var curleft = 0;
            var curtop = 0;
     
            var obj = this;
     
            do {
     
            curleft += obj.attr('offsetLeft');
            curtop += obj.attr('offsetTop');
     
            obj = obj.offsetParent();
     
            } while ( obj.attr('tagName') != 'BODY' );
     
     
                return ( {x:curleft, y:curtop} );
     
        };
     
     
        $(document).ready( function() {
     
            $("#gdimage").mousemove( function( eventObj ) {
     
                var location = $("#gdimage").elementlocation();
                var x = eventObj.pageX - location.x;
                var x_org = eventObj.pageX - location.x;
                var y = eventObj.pageY - location.y;
                var y_org = eventObj.pageY - location.y;
     
                x = x / 5;
                y = y / 5;
     
                x = (Math.floor( x ) + 1);
                y = (Math.floor( y ) + 1);
     
                if (y > 1) {
     
                    block = (y * 200) - 200;
                    block = block + x;
     
                } else {
     
                    block = x;
     
                }
     
                $("#block").text( block );
                $("#x_coords").text( x );
                $("#y_coords").text( y );
     
                if (x == x_org + 5 || x == x_org - 5 || y == y_org + 5 || x == y_org - 5) {
     
                    $.ajax({
                        type: "GET",
                        url: "fetch.php",
                        data: "x=" + x + "&y=" + y + "",
                        dataType: "json",
                        async: false,
                        success: function(data) {
                            $("#user_name_area").html(data.username);
                            $("#user_online_area").html(data.online);
                        }
                    });
     
                }
     
            });
     
        });
     
    </script>

    The displayed PHP file with the Javascript/jQuery:
    Code HTML4Strict:
    <div class="tip_trigger" style="cursor: pointer;">
     
        <img src="gd_image.php" width="1000" height="1000" id="gdimage" />
     
        <div id="hover" class="tip" style="text-align: left;">
            Block No. <span id="block"></span><br />
            X Co-ords: <span id="x_coords"></span><br />
            Y Co-ords: <span id="y_coords"></span><br />
            User: <span id="user_name_area"></span>
            Online: <span id="user_online_area"></span>
        </div>
     
    </div>


    PHP file (fetch.php) called through AJAX
    Code PHP:
    <?
     
        require('connect.php');
     
        $mouse_x = $_GET['x'];
        $mouse_y = $_GET['y'];
     
        $grid_search = mysql_query("SELECT * FROM project WHERE project_x_cood = '$mouse_x' AND project_y_cood = '$mouse_y'") or die(mysql_error());
     
        $user_exists = mysql_num_rows($grid_search);
     
        if ($user_exists == 1) {
     
            $row_grid_search = mysql_fetch_array($grid_search);
     
            $user_id = $row_grid_search['project_user_id'];
     
     
            $get_user = mysql_query("SELECT * FROM users WHERE user_id = '$user_id'") or die(mysql_error());
     
            $row_get_user = mysql_fetch_array($get_user);
     
            $user_name = $row_get_user['user_name'];
            $user_online = $row_get_user['user_online'];
     
            echo "{ username: $user_name }";
            echo "{ online: $user_online }";
     
        } else {
     
            echo "{ username: }";
            echo "{ online: }";
     
        }
     
    ?>

    Everything is working fine, except one thing, I've check the php file and it does echo a username so I know there is a result being sent back from my query. It's just I can't seem to get the user_name_area and user_online_area to display the results from the fetch.php file.

    Am I parsing them correctly, do I have to assign them to a variable or is what I'm trying to do impossible?

    I've never attempted this whole json thing before and I seem to be having some problems with it, so if anyone could give me a hand cause I've been trying for the past couple nights to get it to work and just... can't!!

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Chrome first, then use its console (CTRL + SHIFT + I) to check what you're getting is actually valid JSON.

    Then, to make your life easier - you can use PHP's native function called json_encode() that will properly make stuff in JSON format without having you worry whether you constructed something right or not.

    So, the php part of your script can look like this:

    Code PHP:
    $user_name = $row_get_user['user_name'];
    $user_online = $row_get_user['user_online'];
     
    $json['username'] = $user_name;
    $json['user_online'] = $user_online;
     
    echo json_encode($json);

    That should at least put you on the right track and give you an insight whether you have errors in your JS code or not.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried the json_encode function already tonight but slightly different to how you've written it.

    I used:
    Code PHP:
    $user_name = $row_get_user['user_name'];
     
    echo json_encode($user_name);

    That didn't actually work, and changing it to your approach didn't work either...

    HOWEVER, I have just got rid of the if statement around the AJAX call, and it appears to be working just fine now! I'm also using your method for json_encode too since I can put query results into an array if I'm not mistaken?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    For json_encode to work you need to make sure an array is been sent to it and not a string.

    Eg.
    PHP Code:
    echo json_encode($user_name); 
    Wont work because its a string not an array

    PHP Code:
    echo json_encode($row_get_user); 
    Will work because $row_get_user is already an array and can be converted to a JSON object array.

    Within your JS script you can then use

    Code JavaScript:
    $.ajax({
        success: function(data) {
            alert(data['user_name']);
        }
    });

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see!

    So if I was to, for example, bring back the list of say 5 of the usernames and place them in an array. How would you separate them to display them within the success function of the AJAX which could be placed in the span tags?

    Code JavaScript:
    $("#user_name_1_area").html(data.username1);
    $("#user_name_2_area").html(data.username2);
    etc...

    Or would you need to do something like:
    Code JavaScript:
    $("#user_name_1_area").html(data.username[0]);
    $("#user_name_2_area").html(data.username[1]);
    etc...

    Thanks for explaining the string/array though, I wasn't aware of that!

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    It depends how you build your array

    Example 1
    PHP Code:
    echo json_encode(array('username1' => $username1'username2' => $username2)); 
    Example 2
    PHP Code:
    echo json_encode(array('username' => array($username1$username2))); 


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
  •