SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Passing an expression via ajax

    Hi Fellow Developers!

    Let me explain you my problem with a simple example:

    I have 3 files. Index.html, script.js, ajax.php. The contents of these files are as follows:

    index.html
    Code:
    <html>
    <head>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script>
       function addition(exp){
           
         alert( eval(exp) );
    
       }
    </script>
    </head>
    
    <body>
    
    </body>
    
    </html

    script.js
    Code:
                $.ajax({
                    url :  'ajax.php',
                    dataType: 'script',
                    type: 'post',
                    success: function(data){
    
                     addition(data);
    
                    }
                });

    ajax.php
    Code:
    echo "5+10";
    die;
    What I want is based on the output of ajax.php file, the addition function should alert the number 15.

    Can someone pls tell me what am I missing in above code?

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by cancer10 View Post
    Can someone pls tell me what am I missing in above code?
    Nothing.
    I just tried the above code on my PC and it works as expected (i.e. an alert popped up displaying the number 15).

    I appreciate this is a bare-bones example.
    Do you have anything going on on your page that might be interfering with this?

    Edit: the only thing I did was add <php ... ?>

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Just an afterthought: if you are testing this locally, you do have some kind of server software running, don't you? (as opposed to just opening the pages directly in your browser).

    That's caught me out quite often in the past.

  4. #4
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    HI

    I noticed that it works if I change the content of ajax.php

    From:
    Code:
    echo "5+10";
    die;
    To:
    Code:
    5+10
    Anyone knows why? and yes i m using a webserver on my localhost.

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok i got the ans to my above ques, i had removed the php tags in ajax.php file.

    also, what if I have something like this in the ajax.php file:

    Code:
    var d1 = new Date('March 17, 2013 09:22:06');
    var d2 = new Date('March 20, 2013 22:52:43');
    var d3 = new Date('April 09, 2013 12:57:51');
    var d4 = new Date('April 17, 2013 18:03:27');
    var d5 = new Date('April 18, 2013 00:04:55');
    var d6 = new Date('April 22, 2013 21:29:20');
    data = [{'value' : 15, 'date' : d1}, {'value' : 1, 'date' : d2}, {'value' : 5, 'date' : d3}, {'value' : 7, 'date' : d4}, 
    {'value' : 4, 'date' : d5}, {'value' : 2, 'date' : d6}];
    How do I get the value of data in the addition() function?

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by cancer10 View Post
    How do I get the value of data in the addition() function?
    Well, let's start with ajax.php. What you posted above is JavaScript, let's convert it to PHP:

    PHP Code:
    $d1 = new DateTime('March 17, 2013 09:22:06');
    $d2 = new DateTime('March 20, 2013 22:52:43');
    $d3 = new DateTime('April 09, 2013 12:57:51');
    $d4 = new DateTime('April 17, 2013 18:03:27');
    $d5 = new DateTime('April 18, 2013 00:04:55');
    $d6 = new DateTime('April 22, 2013 21:29:20'); 
    Then, one way to do what you want is to create an array containing all of the DateTime objects you have just created, encode it as JSON and send it back to your script:

    PHP Code:
    $arr = array(=> $d2=> $d6=> $d5=> $d3=> $d415 => $d1);
    echo 
    json_encode($arr); 
    Then in script.js, change the data type accordingly:

    Code JavaScript:
    dataType: 'json'

    And in your addition() function you can access the JSON thus:

    Code JavaScript:
    function addition(data){
      console.log(data);
    }

    outputs:

    Code:
    Object {1: Object, 2: Object, 4: Object, 5: Object, 7: Object, 15: Object}
    You can access individual members of the array:

    Code JavaScript:
    function addition(data){
      console.log(data[2]);
    }

    outputs:

    Code:
    Object {date: "2013-04-22 21:29:20", timezone_type: 3, timezone: "Europe/Berlin"}
    And you can access individual properties of a member:

    Code JavaScript:
    function addition(data){
      console.log(data[2].date);
    }

    outputs:

    Code:
    2013-04-22 21:29:20
    I hope that helps.
    Let me know if you have any more questions.

    Just to be complete, here's the code:

    ajax.php

    PHP Code:
    <?php
    $d1 
    = new DateTime('March 17, 2013 09:22:06');
    $d2 = new DateTime('March 20, 2013 22:52:43');
    $d3 = new DateTime('April 09, 2013 12:57:51');
    $d4 = new DateTime('April 17, 2013 18:03:27');
    $d5 = new DateTime('April 18, 2013 00:04:55');
    $d6 = new DateTime('April 22, 2013 21:29:20');

    $arr = array(=> $d2=> $d6=> $d5=> $d3=> $d415 => $d1);
    echo 
    json_encode($arr);
    ?>
    script.js

    Code JavaScript:
    $.ajax({
      url :  'ajax.php',
      dataType: 'json',
      type: 'post',
      success: function(data){
        addition(data);
      }
    });

    index.html

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="script.js"></script>
        <script>
          function addition(data){
            console.log(data);
          }
        </script>
      </head>
      
      <body>
      <h1>Hi</h1>
      </body>
    </html>

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Excellent explanation Pullo!!!

    I will try this when i reach home.


    Thanks

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problemo!

    I also wrote a simple tutorial on using jQuery/AJAX recently.
    Maybe this will help or be of interest, too.


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
  •