ajax-calls into an ajax-call

Question

I've got this problem that I can't solve. Partly because I can't explain it with the right terms. I'm new to this so sorry for this clumsy question.

Below you can see an overview of my goal. I want to search some stuff from a database (with ajax) and display the results in a div below the search. This I can get this to work. But now, I want to be able to click on a result and get it in a div on top of the page. I learned it is normal that ajax can not handle this sort of actions and it is not possible to run jquery or other ajax-calls into an ajax-call. I also read things about jquery live() to work around this problem.

Still it is not clear to me how to make things work.

Is it possible to put me on the right track? Are there tutorials I missed?

thank you!

step one

<div id="top">here comes an image</div>

<textfield> for the ajax search string + a button </textfield>

<div id="search">target of the ajax-search</div>

step two: after a search we get this

<div id="top">here comes an image</div>

<textfield> for the ajax search string + a button </textfield>

<div id="search">result 01 with link to a php-file: a
                 result 02 with link to a php-file: b ... </div>

step tree: after click on result 01 or 02 ...

<div id="top">content of php-file: a</div>

<textfield> for the ajax search string + a button </textfield>


<div id="search">result 01 with link to a php-file: a
                 result 02 with link to a php-file: b ... </div>

ok, here comes part of the (relevant) code

search_page.php

<div id=top"></div>


<div class="client_search_field">
<form id="ui_element" class="sb_wrapper" action="" method="post" name="search_ID" ONSubmit="xmlhttpPost('search_stream_client_v02.php', 'ui_element', 'txtHint', '<img src=\'images/wait.gif\'>'); return false;">
  <p> <span class="sb_down"></span> 
    <input name="search_string" type="text" class="sb_input" id="search_string" value="<?php echo $_POST['search_string']; ?>"/>
          <button type="submit" class="submitmag" id="search_submit" > </button>
          </p>
</div>      


<span id="txtHint"></span>

search_stream_client_v02.php

<?php
$sql .= "SELECT *";
$sql .= ", MATCH(description, keywords) AGAINST ('".$_POST['search_string']."')  AS score FROM archief WHERE MATCH(description, keywords) AGAINST('".$_POST['search_string']."' IN BOOLEAN MODE)"; 
$sql .= " AND showa = '1' "; 
$sql .= $q_sort." ".$q_order." LIMIT 0,".$q_num_result; 

$result04 = mysql_query($sql) or die(mysql_error());

while ($row04 = mysql_fetch_assoc($result04)){
        $hint .= "<div class=\"tb-kader\">";
        $hint .= "<span id=\"".$row['thumbnail']."\">";

        $hint .= "<a href=\"".$row04['link']."\" class=\"fra tooltip lazy\" id=\"".$row04['ID']."\" TITLE=\"header=[".$row04['headline']."] body=[".$row04['description']."]\">";       

        $hint .= "<img src=\"$row04[thumbnail]\" border=\"0\" alt=\"".$row04['headline']."\"/></a>";

        $hint .= "<div class=\"tb-kader-price\">".$pic_list_solo_final[$items03]['prijs']." &euro;</div></span>";   
        $hint .= "</div>";

}

echo $hint;
?>

so, at the end the

<a href=\"".$row04['link']></a> 

should open in the

<div id="top"></div>

thank you guys for your effort!!

EDIT

This one is not working:

$('#search').delegate(".fra", "click", function() {
    $("#top").attr("src","href");   
    });

Answer 1

$('#search').delegate(".fra", "click", function() {
    $("#top").attr("src","href");   
});

What this does is just setting the scr attribute of #top to "href". That's not what you want ;) What you need is, I think:

$('#search').delegate(".fra", "click", function() {
    var link = $(this),
    url = link.attr("href");
    $.ajax({
       url: url,
       dataType: "html",
       success: function(data) {
         $("#top").html(data);
       }
    })
});

Answer 2

Or you can use .delegate, like this:

html

<div id="search">
   <a href="phpfilea.php" class="result">result 01 with link to a php-file: a</a>
   <a href="phpfileb.php" class="result">result 02 with link to a php-file: b ... </a>
</div>

js

// binds a click event on each result, even if they've been loaded via ajax
$('#search').delegate(".result", "click", function() {
   var link = $(this),
   url = link.attr("href");

   // do your ajax magic...
   $.ajax({url: url...})
});

It's basically the same idea than Victor's answer, but .delegate is more performant I think.

Answer 3

so you want to do something like:

$('.search-result-class').live('click', function() {
   //this binds to the click of each result. So you can do an ajax call here and on the success callback you could then load the result into the div
});