passing php array to javascript variable, then to server

Question

I realize this has been asked numerous times here, but I just can't figure it out. I'm certain it is simple, but I've been banging my head a little. I have search results that are php arrays, displayed in a jquery window. I need to eventually get them back to the server, but first need to pass them to jquery variables. This is where I am stuck.

You will see I have made an attempt to via $book_title, trying to pass that to a jquery variable "title"

<script>
      $(function() { 
      $( "#dialog" ).dialog({
        height: 550, width: 450});
        $( ".btn" ).click(function(){
        //assign values to each variable
        //var title = $("#returnvalues").val();
        var title = <?php echo json_encode($book_title);?>;
        var author = $("#returnvalues").val();
        var published = $("#returnvalues").val();
        var description = $("#returnvalues").val();
        var pages = $("#returnvalues").val();
        var publisher = $("#returnvalues").val();
        var ISBN = $("#returnvalues").val();
       //book_title = $item['volumeInfo']['title'];
       $.ajax({
         type: "POST",
         url: 'book-meta.php',
         dataType: 'json',
         //assign values to the variables to be passed to the server via data
         data: { title : title, author : author, published : published, 
         description : description, pages : pages, publisher : publisher, ISBN : ISBN},
         success: function(data)
             {
             //alert(data);
             //identify the variables for unique handing on the server side
             $("input[name='bbp_topic_title']").val(data.title);
             $("input[name='bbp_extra_field1']").val(data.author);
             $("input[name='bbp_extra_field2']").val(data.published);
             $("input[name='bbp_extra_field3']").val(data.description);
             $("input[name='bbp_extra_field4']").val(data.pages);
             $("input[name='bbp_extra_field5']").val(data.publisher);
             $("input[name='bbp_extra_field6']").val(data.ISBN);
             //$("#displayResults").html(data);
             },
             error: function(errorThrown){
             alert('error');
             }
             });
      $( "#dialog" ).dialog( "close" );  
      });
      });
      </script>  
            <strong><p style="font-size: 16px; text-align: center";>Top 10 Results for &quot;<?php echo @$_POST['q']; ?>&quot;</p></strong> 
        <strong><p style="font-size: 14px; text-align: center";>choose a book to select as your topic</p></strong>&nbsp;
        <table style="width:400px">
        <col width="325">
        <col width="75">
            <?php $i=0; foreach ($data['items'] as $item) { $i++; ?>     
                  <tr>
            <td>
                       <strong><u><div style="font-size: 14px";><?php printf($item['volumeInfo']['title'])?></u></div></strong>
                         <strong>Author: </strong><?php printf( $item['volumeInfo']['authors'][0])?><br />
                         <strong>Published: </strong><?php printf( $item['volumeInfo']['publishedDate']); ?><br />                       
               <strong>Page(s): </strong><?php printf( $item['volumeInfo']['pageCount']); ?><br />
                         <strong>Publisher: </strong><?php printf( $item['volumeInfo']['publisher']); ?><br />
                         <strong>Category: </strong><?php printf( strtolower($item['volumeInfo']['printType']).', '.strtolower($item['volumeInfo']['categories'][0])); ?>&nbsp;&nbsp;
               <strong>ISBN: </strong><?php printf( $item['volumeInfo']['industryIdentifiers'][0]['identifier']); ?></td>
            <td><p><input type="submit" method="post" name="selectbook" value="Select" class="btn" id="returnvalues" /></p>
            <img src="<?php printf( rawurldecode($item['volumeInfo']['imageLinks']['smallThumbnail'])); ?>" />
                    </td>
            <tr><td style="width:420px"><p><strong>Description: </strong><?php printf( $item['volumeInfo']['description']); ?><br /></p></td>
            <?php $book_title=$item['volumeInfo']['title'];
            //$book_meta=array($item['volumeInfo']['title']=>"$book_title",$item['volumeInfo']['authors'][0]=>"$book_author");
            //print(json_encode($book_meta));

Any help is appreciated. If this gets marked as a duplicate question, please also give this newbie some specific direction. Thanks.

Answer 1

I figured this out! Thanks to XQDev and Uttara for the help! I had to create a separate script, within the loop where my php results are displayed. In this separate script I declare my javascript variables only.

<script>
var title = <?php echo json_encode($book_title); ?>;
</script> 

Issue is resolved! Hopefully this thread will help someone in the future with a similar issue.

Answer 2

var title = "<?php echo $book_title; ?>" could cause your wanted result.

The result can be checked by using alert(title) after the assignment.

Your variable are no "jQuery Variables", by the way. They are ordinary Javascript variables. But you pass and access them by using jQuery methods.

But: Your way, in case $book_title contains a string, should be fine, too.. What exactly isn't working?

Answer 3

If you are trying to assign php array to javascript variable then do this

var title = <?php echo json_encode($book_title); ?>;

considering that your $book_title is an array

Eg: <?php 
   $book_title = array('one', 'two');
?>

javascript: title = ['one', 'two']