I am a middle school geography teacher learning web programming.

For my school, I am creating a single-page multi-tab portal with four jquery tabs.  I'd like the fourth tab to contain a form and also search & display MySQL query results.

My problem is, on the fourth tab, once I enter the search term and hit the "Search" button, the results are not loading in the fourth tab.  They are loading on a separate page: http://localhost/notes_search.php

How could I get the results to appear in the fourth tab, below the search form? 

Another way to look at this problem: I am successfully able to get the (1) tabs functioning separately (2) search results load in a single (no tab) page separately.  I am missing something as I try to combine these two features.

Please help.  Thank you very much.

-Susana

#######################

This is what I have on the php file for the fourth tab (page_4.php):

1. 
   
2. <div id="notescontainer">
3. 
   
4.           <div>
5. 
   
6.                    <form method="post" action="notes_search.php">
7. 
   
8.                              <input type="text" name="search" id="notes_search_box" class="notes_search_box"/>
9. 
   
10.                              <input type="submit" value="Search" class="notes_search_button" /><br />
11. 
    
12.                    </form>
13. 
    
14.           </div>    
15. 
    
16.           <div>
17. 
    
18.                    <div id="notes_searchresults">Search results :</div>
19. 
    
20.                    <div id="notes_results" class="update"></div>
21. 
    
22.           </div>
23. 
    
24. </div>
25. 
    
26.  

#######################

This is what I have for search and display: notes_search.php

1. 
   
2. <?php
3. 
   
4.  
5. 
   
6.  
7. 
   
8. define('INCLUDE_CHECK',true);
9. 
   
10.  
11. 
    
12. require 'connect.php';
13. 
    
14.  
15. 
    
16.  
17. 
    
18. //if we got something through $_POST
19. 
    
20. if (isset($_POST['search'])) {
21. 
    
22.  
23. 
    
24.           // never trust what user wrote! We must ALWAYS sanitize user input
25. 
    
26.     $word = mysql_real_escape_string($_POST['search']);
27. 
    
28.  
29. 
    
30.           // build your search query to the database
31. 
    
32.           $result = mysql_query("select * from notes where notes like '%".$word."%'");
33. 
    
34.  
35. 
    
36.     // get results
37. 
    
38.           while($row = mysql_fetch_array($result))
39. 
    
40.           {
41. 
    
42.                    echo "<p>".$row['notes'];
43. 
    
44.           }
45. 
    
46. }
47. 
    
48. ?>
49. 
    
50.  

#######################

And finally, here's the JavaScript on the main page of the portal: index.php

1.    <SCRIPT>
2. 
   
3.    
4. 
   
5. $(function() {
6. 
   
7.  
8. 
   
9.     $(".notes_search_button").click(function() {
10. 
    
11.         // getting the value that user typed
12. 
    
13.         var searchString    = $("#notes_search_box").val();
14. 
    
15.         // forming the queryString
16. 
    
17.         var data            = 'search='+ searchString;
18. 
    
19.         
20. 
    
21.         // if searchString is not empty
22. 
    
23.         if(searchString) {
24. 
    
25.             // ajax call
26. 
    
27.             $.ajax({
28. 
    
29.                 type: "POST",
30. 
    
31.                 url: "notes_search.php",
32. 
    
33.                 data: data,
34. 
    
35.                 beforeSend: function(html) { // this happens before actual call
36. 
    
37.                     $("#notes_results").html('');
38. 
    
39.                     $("#notes_searchresults").show();
40. 
    
41.                     $(".word").html(searchString);
42. 
    
43.                },
44. 
    
45.                success: function(html){ // this happens after we get results
46. 
    
47.                     $("#notes_results").show();
48. 
    
49.                     $("#notes_results").append(html);
50. 
    
51.               }
52. 
    
53.             });  
54. 
    
55.         }
56. 
    
57.         return false;
58. 
    
59.     });
60. 
    
61. });
62. 
    
63.  
64.           </script>