弹出窗口关闭后,在原始页面中显示jQuery ajax变量

时间:2014-05-11 14:32:50

标签: javascript php jquery ajax

我正在尝试在关闭jQuery窗口后显示数据。我知道数据存在 - 我可以在关闭我的jQuery窗口后在警报窗口中显示它。但是......,我想在jQuery窗口关闭后在父窗口中显示相同的数据(缺少一个更好的术语)。我一直试图解决这个问题3个星期。请帮忙! 最近我一直在想我需要刷新或重新加载父页面?如果“父页面”是不正确的术语,我很抱歉。我的意思是;调用jQuery弹出窗口的原始页面。

 <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.css">
      <script src="//whosgotbooks.com/jquery/jquery-1.10.2.js"></script>
      <script src="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.js"></script>
      </head>
      <body>
      <div id="dialog" title="Google Books Search Results" style="display:none;">
      <script>
      var book_title;
      $(function() { 
      $( "#dialog" ).dialog({
        height: 550, width: 450});
        $( ".btn" ).click(function(){ 
       //var book_title = $item['volumeInfo']['title'];
       $.ajax({
         type: "POST",
         url: 'book-meta.php',
         //dataType: 'json',
         //data: { book_title : 'Success!' },
         data: { book_title : $("#returnvalues").val()  },
             success: function(data)
             {
             $.post("/wp-content/plugins/book-search-google/book-search-google.php", data);
             //$(".btn").load("/wp-content/plugins/book-search-google/book-meta.php", data);
             alert(data);
             //console.log(data);
             //$("#dialog").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 foreach ($data['items'] as $item) { ?>
        <?php for($i =1; $i <11; $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>           
            </tr>
            </tr>

            <?php } } }
            else {
                ?>
                   <p><strong>Sorry, there were no results</strong></p>
                <?php  } 
            /* for testing purposes show actual request to API - REMOVE when finished
            $apiRequest = $url;
            echo '<p>API request: '.$apiRequest.'</p>'; */ ?>
        </table>
      </div>
      </body>
      </html>
          <?php
          else: //show form and allow the user to check for Google Book search results
          ?>

      <p><form id="searchForm" name="searchForm" method="post"> 
        <fieldset id="searchBox">
            <label>Search for a Book:</label>
            <input class="text" id="q" name="q" type="text" value="Powered by Google" onfocus="this.value=''; this.onfocus=null;" />
            <select id="type" name="type" size="1">
                <option selected value="all">Book Title</option>
                <option value="isbn">Books by ISBN</option>
                <option value="lccn">Books by LCCN #</option>
                <option value="oclc">Books by OCLC #</option>                
            </select>
            <input class="submit" id="searchForm" name="submit" type="submit" value="Search"  />
        </fieldset>
      </form></p>
      <?php
      //end submit isset if statement on line 73
      endif;

}

这是我的book-meta.php代码(其中大部分是注释掉的 - 尝试不同的东西):

     if ( isset( $_POST['book_title'] )) {
//       session_start();
//      header('Location: '.$_SERVER['REQUEST_URI']);
//      header('Location: '.$_SERVER['PHP_SELF']);
//        $book_title = $_POST['book_title'];
//        $_SESSION['book_title'] = $book_title;
//        echo $_SESSION['book_title'];
        $book_title = $_REQUEST['book_title'];
//      $book_title = (isset($_POST['book_title']))?$_POST['book_title'] : 'not yet';
        echo $book_title;
        echo "Test within IF statement <br>";

      }
      //$_SESSION['$book_title'] = (isset($_POST['book_title']) ? $_POST['book_title'] : "");

      echo "Test outside IF statement <br>";

以下是我如何调用book-meta.php:

  include 'book-meta.php';
  //$_SESSION['$book_title'] = (isset($_POST['book_title']) ? $_POST['book_title'] : "");
  echo $book_title;//   

如果需要,我可以添加其他源代码。请帮忙!

1 个答案:

答案 0 :(得分:1)

如果你想在你的html页面中显示你的数据,我建议你在这个页面中放置一个带有你想要的id的div元素(比如说“displayTest”)。然后,当您在ajax回调函数中获取数据时,请使用以下代码:

$( "#displayTest" ).append(data);

而不是:

alert(data);

希望它有所帮助。