Question

I have this page which loads quotes. It has a search form wherein if the user types in the search keyword, it will load the results via ajax. Now, if I click on the link which should load the default page with the Quotes, instead of the search results page, nothing happens.

If I am on the home/default page itself, and click on the link, it will display a random quote, but once it displays the search page, if I click on the link to display a random quote, nothing happens. Firebug shows that the function isn’t being executed.

jQuery code:

            function loadQuotes() {
                $("#bquote").load("quotes_in.php");
}

     $("a#main").click(function() {
                $(this).addClass("current"); 
                $(".toggleDiv").slideUp(600);
                    loadQuotes();
                 });
                loadQuotes();  //call it once on load

            $(".bsearch").keydown(function() {
                     //create post data
                      var postData = { 
                        "search" : $(this).val()
                      };

                      //make the call
                      $.ajax({
                        type: "POST",
                        url: "quotes_in.php",
                        data: postData, //send it along with your call
                        success: function(response){
                                setTimeout(function() {
                                $('#left').html(response);
                                    $("div#smore").hide();
                                }, 250);    

                        }
                      });

                })

HTML:

             <!-- Begin Left Column -->
                <div id="left">
                     <!-- Begin Panel -->
                    <div class="check">
        <p><input type="checkbox" value="Quote" name="quote" id="quote" checked /> <label for="quote">Quote</label></p>
    <p><input type="checkbox" value="Reference" name="reference" id="reference" checked /> <label for="reference">Reference</label></p>
            </div>
         <!-- End Panel -->
          <!-- Begin Quote -->
        <blockquote id="bquote">
        </blockquote>
                                                 <!-- End Quote -->

                                        </div>
                                 <!-- End Left Column -->

  <!-- Begin Naviagtion -->
         <div id="navigation">

             <ul>
                <li><a id="main">Another?</a></li>
                <li><a id="bsearch">Search</a></li>
                <li><a id="babout">About</a></li>
                <li><a id="bcontact">Contact</a></li>
             </ul>   

         </div>
         <!-- End Naviagtion -->

PHP search:

public function formatSearch($row, $search) 
            {
                $cQuote =  $this->highlightWords(htmlspecialchars($row['cQuotes']), $search);

                    return "<div class=\"swrap\">"
                . "<p id=\"s_quotes\"><img src=\"image/list1.png\" alt=\"b\" style=\"position:relative; top:2px;\">&nbsp;" . $cQuote . "&nbsp;</p>"
                . "<div id=\"smore\"><p id=\"s_arabic\">" . $this->h($row['cArabic']) . "</p>"
                . "<p id=\"s_author\"><b>~</b>&nbsp;" . $this->h($row['vAuthor']) . "</p>"
                . "<p id=\"s_reference\"><span class=\"source\">Source:</span> " . $this->h($row['vReference']) . "</p></div></div>"
                . "<img src=\"image/sep.png\" style=\"position:relative; left: 600px;\">";
            }

Answer 1

The new results aren’t going to be acknowledged by the JavaScript as the script only acknowledges what HTML is there upon the page load. For your function to be able to ‘see’ HTML generated via AJAX Functions, you need to use he Jquery live function http://api.jquery.com/live/

Convert your current click function to something like this

$('a#main').live('click', function() {
     $(this).addClass("current"); 
            $(".toggleDiv").slideUp(600);
                loadQuotes();
});