SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax - Passing results back

    Hi all,

    I'm just getting started with Ajax. I've found out how to run an outside PHP script and return the results in the Ajax page, but I want to take the results a bit further now.

    Instead of outputting the values in the PHP script, I want to pass the information I collected in the PHP file to the Ajax file. Does anyone know how I could do this?

    Sorry if that seems a little complicated, it was hard to explain

    Thanks,
    Mike

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As long as the output is text, you can pass almost anything from php through ajax to your page.

    So if you have some data you want to pass down, output it using your php page, and then your javascript will do the rest (with a little help).

    When you mean information you collected in the php file, can you explain this a little more?

    Gav


  3. #3
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you want to pass your results as XML or JSON types. Rather than simply print results to the screen, you can retrieve objects in the form of XML or JSON, then you can do whatever you want.
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  4. #4
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    When you mean information you collected in the php file, can you explain this a little more?
    Gav
    Say I make a query to MySQL in the PHP file... I want to be able to use the results in the original AJAX file. I'm not sure how I can pass them though... which is where I need help

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IIRC you can use something to convert the mysql_result into either JSON or XML data, or if you want to start simple, output it as CSV.

    Basically, what ever you want to transfer across to your page via ajax, you need to use PHP to write it to the page, so if you were to view it normally in the browser, you'd see data.

    Gav


  6. #6
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, seems complicated, thanks for your advice.

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not really, I'm sure you could use print_r with the mysql_result value.

    heres something that may help: http://codingforums.com/archive/index.php?t-74902.html
    http://www.cristiandarie.ro/ajax-php/


  8. #8
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well what I want to do is get the results from the PHP page and return some links. When one of these links is clicked, I want a form to be auto filled based on the results from the PHP page.

    Would that be possible?

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its easier to do then explain.

    I'm stuck as to how to explain it, without throwing an example at you.

    I'll see what i can do and find for you.


  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok:

    create a php file called test.php

    Code:
    <?php
    
        if(isset($_GET["id"])) {
            switch($_GET["id"]) {
                case "1" :
                    echo "Joe Blogs;Joe@Blogs.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/071.gif";
                break;
                case "2" :
                    echo "Fred Johns;Fred@Jones.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/072.gif";
                break;
                case "3" :
                    echo "Jane Doe;Jane@Doe.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/073.gif";
                break;
                case "4" :
                    echo "John Doe;John@Doe.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/074.gif";
                break;
            }
        } else {
            echo "1:Joe Blogs;2:Fred Jones;3:Jane Doe;4:John Doe";
        }
    
    ?>
    and create a page called test.html (or anything you want)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                * {
                    font-family: verdana, tahoma, sans-serif;
                }
                #userDetails {
                    display: none;
                    padding-top: 10px;
                }
            </style>
            <script type="text/javascript">
                function getUsers() {
                    var request = createXMLHttpRequest();
                    request.open("GET", "test.php", true);
                    request.onreadystatechange = function() {
                        if (request.readyState == 4) {
                            if(request.status == 200) {
                                var combo = document.getElementById('users');
                                    combo.length = 1;
                                var usrs = request.responseText.split(';');
                                for(var i = 0; i < usrs.length; i++) {
                                    var usr = usrs[i].split(':');
                                    combo.options[combo.options.length] = new Option(usr[1], usr[0]);
                                }
                            } else {
                                alert('An error has occurred');
                            }
                        }
                    }
                    request.send(null);
                }
                function getUser(id) {
                    var request = createXMLHttpRequest();
                    request.open("GET", "test.php?id=" + id, true);
                    request.onreadystatechange = function() {
                        if (request.readyState == 4) {
                            if(request.status == 200) {
                                var uDetails = document.getElementById('userDetails');
                                var txtName = document.getElementById('txtName');
                                var txtEmail = document.getElementById('txtEmail');
                                var txtAddress = document.getElementById('txtAddress');
                                var imgProfile = document.getElementById('imgProfile');
    
                                // name; email; address; img
    
                                var items = request.responseText.split(';');
                                txtName.value = items[0];
                                txtEmail.value = items[1];
                                txtAddress.value = items[2];
                                imgProfile.src = items[3];
    
                                uDetails.style.display = 'block';
                            } else {
                                alert('An error has occurred');
                            }
                        }
                    }
                    request.send(null);
                }
                function createXMLHttpRequest() {
                    if (typeof XMLHttpRequest != "undefined") {
                        return new XMLHttpRequest();
                    } else if (typeof ActiveXObject != "undefined") {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                        throw new Error("XMLHttpRequest not supported");
                    }
                }
    
                window.onload = getUsers;
    
            </script>
        </head>
        <body>
            
            <label for="users">User: &nbsp;</label>
            <select id="users" onchange="getUser(this.value);">
                <option value="0">Select User</option>
            </select>
    
            <div id="userDetails">
                <label for="txtName">Name: </label><input type="text" id="txtName" /><br />
                <label for="txtEmail">E-Mail: </label><input type="text" id="txtEmail" /><br />
                <label for="txtAddress">Address: </label><textarea id="txtAddress"></textarea><br /><br />
                <img id="imgProfile" src="#" width="75px" height="75px" />
            </div>
    
        </body>
    </html>

    Put them both on the server.

    This example goes and gets a list of users from test.php, and populates the combobox with the details. When you select a user from the combobox, it will go away to test.php and get the details for the selected user.

    Hopefully its clear enough for you to understand?


  11. #11
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, that's given me a great base to work on. I didn't realise you could make two AJAX requests in one script. Thanks again!

  12. #12
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you had the time and patience, you could write a whole web site, based on one page, using loads of AJAX Requests pulling and pushing data all over the place.

    The biggest problem is dealing with those lovely people that have browsers that have javascript disabled etc.


  13. #13
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I tried to start my own version, yet this won't even work at all:

    Code:
    <html>
    <script language="javascript" type="text/javascript">
                function createXMLHttpRequest() {
                    if (typeof XMLHttpRequest != "undefined") {
                        return new XMLHttpRequest();
                    } else if (typeof ActiveXObject != "undefined") {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                        throw new Error("XMLHttpRequest not supported");
                    }
                }
    
    // Create a function that will receive data sent from the server
     var request = createXMLHttpRequest();
    request.onreadystatechange = function(){
     if(ajaxRequest.readyState == 4){
      document.getElementById('ajaxDiv') = request.responseText;
     }
       var searchquery = document.myForm.searchquery.value
       var querystring = "?searchquery=" + searchquery;
     request.open("GET", "test.php" + querystring, true);
     request.send(null);
    }
    
    </script>
    <form name='myForm'>
    <input type='text' name='searchquery' onkeyup="Start();">
    </form>
    <div id="ajaxDiv">
    </div>
    </html>
    As something is typed in the searchquery input box, a simple PHP script is supposed to run. Does anyone know why this doesn't work?

    Thanks,
    Mike


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
  •