Use JSON to pass array from javascrip/jquery to php

JavaScript
1

I want to pass data array ‘myWorkout’ to “play_workout.php”. I want “play_workout.php” to open and display the contents of ‘myWorkout’ (for this example).
(Once I see that this is working I will parse the data from myWorkout and write it back to a database).

I’m not getting any errors in firebug, but play_workout.php is not being opened nor is it capturing array ‘myWorkout’.

Please advise if you’ve accomplished something like this. Thanks as always!

page workout_now.php

<div id="playworkout"><button onClick="playWorkout()">Play Workout</button></div>

JAVASCRIPT

function playWorkout(){

  var arr = $("#dropTargetframe > li").map(function(){
  return $(this).attr('data-id');}).get();

     var myRoutine = arr;
     var myWorkout = new Array();
        for (var i in myRoutine){
           if (myRoutine[i])
             myWorkout.push(myRoutine[i]);
            }
          //array appears like ["4", "5", "1", "4"]
          JSON.stringify(myWorkout);
          encodeURIComponent(myWorkout);

         var url = "http://localhost/RealCardio/play_workout.php";

         $.get(url, myWorkout);

page play_workout.php

<?php
 ...
 $arrayWorkout = json_decode($_REQUEST['myWorkout']);
 print_r($arrayWorkout);
...
?>
2

What do you mean by that, that you don’t see anything on the screen from the play_workout.php file?
Or something else…

3

I am making progress, but still not quite there.
Here is what I tweaked in javascript:

var myNewWorkout = new Array();
     myNewWorkout = JSON.stringify(myWorkout);
     myNewWorkout = encodeURIComponent(myWorkout);

     var url = "http://localhost/RealCardio/play_workout.php";

     $.get(url, myNewWorkout);

Here are the results that show up in the url (and firebug) when the playWorkout() button is clicked:
[B]GET http://localhost/RealCardio/play_workout.php?5%2C2%2C4[/B] This is good news because it’s passing the values I expected.

However, the browser is still not redirecting to play_workout.php, nor is it displaying the data from $arrayWorkout

$arrayWorkout = json_decode($_REQUEST['myNewWorkout'],true);

            print_r($arrayWorkout);
            echo $arrayWorkout;
4

It doesn’t because your understanding of what is supposed to happen is incorrect.

The web browser doesn’t navigate to the play_workout.php page. Instead, $.get() sends the data to the play_workout.php page, and the response from that page is passed back as data to a success function.

This example from the $.get() documentation page helps to demonstrate how it is used.


$.get("test.php", function (data) {
    alert("Data Loaded: " + data);
});
5

What would be the best method for what I am trying to accomplish?
I appreciate your feedback.

6

If you want to leave page workout_now.php page and have a form submit its data so that the user end up at the play_workout.php page, you can do that with no scripting at all.


<form method="get" action="play_workout.php">
    ...
    <p><input type="submit" value="Play workout"></p>
</form>
7

That makes perfect sense, but I’m using a javascript function playWorkout() to build an array of needed data.
The data needs to be passed to play_workout.php and then play_workout.php should be open to the user.

Maybe I need to think of a new way to do this.

8

Then look back to post #4 where the output of the php file is passed to the function, as the variable called data.