current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have search results sent to a jquery window - 10 to be exact. If a user selects the 4th result, I would like that specific result assigned to a javascript variable. Toward the bottom of the below code is where I think I need to index the javascript variables somehow? Then at the top of this code I am thinking I can assign the number the user selected. I have already figured out how to get the number the user selects. Also at the bottom of the below code you will see where I commented out my attempt at indexing javascript variables to match the same php variables.

 <script>
      $(function() {
      $( "#dialog" ).dialog({height: 550, width: 450});
        $( ".submit" ).click(function(){
        //if(this.id.indexOf('select')>-1) {var id = (this.id.split(" "))[1]; console.log(id);}
        //bookSelect = id;
        $.ajax({
         type: "POST",
         url: 'book-meta.php',
         async:true,
         dataType: 'json',
         //assign values to the variables to be passed to the server via data
         data: { B : B, cover : cover, title : title, author : author, published : published, ISBN : ISBN, 
         description : description, pages : pages, publisher : publisher},
         success: function(data)
             {
             //identify the variables for unique handing on the server side, this is
             //how the book data gets to the input fields for bbpress forums
             $("input[name='bookCover']").val(data.cover);
             $("input[name='bbp_topic_title']").val(data.title);
             $("input[name='bookAuthor']").val(data.author);
             $("input[name='bookPublished']").val(data.published);
             $("input[name='bookDescription']").val(data.description);
             $("input[name='bookPages']").val(data.pages);
             $("input[name='bookPublisher']").val(data.publisher);
             $("input[name='bookISBN']").val(data.ISBN);
             //$("input[name='selection']").val(data.bookSelect);
             //alert(B);
             },
             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']);
               $b_title[$i] = $item['volumeInfo']['title']?></u></div></strong>
                         <strong>Author: </strong><?php printf( $item['volumeInfo']['authors'][0]);
               $b_author[$i] = $item['volumeInfo']['authors'][0]?><br />
                         <strong>Published: </strong><?php printf( $item['volumeInfo']['publishedDate']);
               $b_published[$i] = $item['volumeInfo']['publishedDate'] ?><br />                      
               <strong>Page(s): </strong><?php printf( $item['volumeInfo']['pageCount']);
               $b_pages[$i] = $item['volumeInfo']['pageCount'] ?><br />
                         <strong>Publisher: </strong><?php printf( $item['volumeInfo']['publisher']);
               $b_publisher[$i] = $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']);
               $b_ISBN[$i] = $item['volumeInfo']['industryIdentifiers'][0]['identifier'] ?></td>
            <td><p><?php echo "<input type='submit' method='post' name='submit' value='Select' class='submit' id='select $i' />"; ?></p>
            <img src="<?php printf( rawurldecode($item['volumeInfo']['imageLinks']['smallThumbnail']));
            $b_cover[$i] = $item['volumeInfo']['imageLinks']['smallThumbnail'] ?>" />
                    </td>
            <tr><td style="width:420px"><p><strong>Description: </strong><?php printf( $item['volumeInfo']['description']);
            $b_description[$i] = $item['volumeInfo']['description'] ?><br /></p></td>
            </tr>
            </tr>
            <script>
            $( ".submit" ).click(function(){
            if(this.id.indexOf('select')>-1) {var id = (this.id.split(" "))[1]; console.log(id);}
            B = id;   });
            //for(var i = 0, len = 11; i < len; i++)
            //var title = [];
            var cover = <?php echo json_encode($b_cover[3]); ?>;
            //var title[i] = <?php echo json_encode($b_title[$i]); ?>;
            var title = <?php echo json_encode($b_title[3]); ?>;
            var author = <?php echo json_encode($b_author[3]); ?>;
            var published = <?php echo json_encode($b_published[3]); ?>;
            var description = <?php echo json_encode($b_description[3]); ?>;
            var pages = <?php echo json_encode($b_pages[3]); ?>;
            var publisher = <?php echo json_encode($b_publisher[3]); ?>;
            var ISBN = <?php echo json_encode($b_ISBN[3]); ?>;
            </script>
share|improve this question
4  
I would honestly drop that code, and start from scratch. You're mixing markup, logic, presentation, server, client... Why not separate concerns? Use AJAX, use external CSS and JavaScript files that you import in your HTML, etc. –  elclanrs May 26 at 1:57
    
@elclanrs, thanks. I have gotten this far with immense help from this site (I'm sure you aren't surprised). Your idea sounds great, but I'm not sure where to even start. I certainly don't expect you to rewrite my whole code, but perhaps some direction to get me started? –  scjer13 May 26 at 2:05
1  
I would suggest you read about how to do AJAX the WordPress way, and how to enqueue scripts and styles in WordPress. The idea is to keep your client and server code separate, as well as your CSS and JS in separate files. I'd check the Codex for info on wp_enqueue_script and wp_enqueue_style as well as this tutorial on how to use AJAX in WP. –  elclanrs May 26 at 2:10
    
Thanks. I'll start reading. –  scjer13 May 26 at 2:32

1 Answer 1

up vote 1 down vote

In case someone searches this out, I found an answer to my own question. Two warnings: 1) this answer looks messy to me. There is probably an easier way. 2) @elclanrs is correct in his comment; I plan to clean this code up into separate files. If you look at the above question, I have modified the bottom script, and modified the variables in the top script. Here is the bottom script (I used a javascript foreach array, and placed all possible results in the array - there is probably a way to do that without listing them all?). For brevity, I only included the first two variable arrays.

           <script>
            $( ".submit" ).click(function(){
            //get the id number, which is indexed for each result, of the button the user selects
            //the variable B is decremented 1 from id because javascript arrays begin with [0]
            if(this.id.indexOf('select')>-1) {var id = (this.id.split(" "))[1]; console.log(id);}
            B = id - 1;   });
            //create an array for all 10 results. There is probably a cleaner way to do this
            var b_cover = [<?php echo json_encode($b_cover[1]); ?>,<?php echo json_encode($b_cover[2]); ?>,<?php echo json_encode($b_cover[3]); ?>,<?php echo json_encode($b_cover[4]); ?>,
            <?php echo json_encode($b_cover[5]); ?>,<?php echo json_encode($b_cover[6]); ?>,<?php echo json_encode($b_cover[7]); ?>,<?php echo json_encode($b_cover[8]); ?>,
            <?php echo json_encode($b_cover[9]); ?>,<?php echo json_encode($b_cover[10]); ?>];
            //this is the javascript foreach
            b_cover.forEach(function(entry){console.log(entry);});

            var b_title = [<?php echo json_encode($b_title[1]); ?>,<?php echo json_encode($b_title[2]); ?>,<?php echo json_encode($b_title[3]); ?>,
            <?php echo json_encode($b_title[4]); ?>,<?php echo json_encode($b_title[5]); ?>,<?php echo json_encode($b_title[6]); ?>,
            <?php echo json_encode($b_title[7]); ?>,<?php echo json_encode($b_title[8]); ?>,<?php echo json_encode($b_title[9]); ?>,<?php echo json_encode($b_title[10]); ?>];
            b_title.forEach(function(entry){console.log(entry);});

And here is how the variables are assigned in the top script:

         $.ajax({
         type: "POST",
         url: 'book-meta.php',
         async:true,
         dataType: 'json',
         //assign values to the variables to be passed to the server via data, according to their B position
         //within the foreach array.
         data: { B : B, cover : b_cover[B], title : b_title[B], author : b_author[B], published : b_published[B],
         ISBN : b_ISBN[B], description : b_description[B], pages : b_pages[B], publisher : b_publisher[B]},
         success: function(data)
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.