ajax-вызовы в ajax-вызов - PullRequest
Новая
       4

ajax-вызовы в ajax-вызов

0 голосов
/ 13 февраля 2011

У меня есть проблема, которую я не могу решить. Отчасти потому, что я не могу объяснить это правильными терминами. Я новичок в этом, так что извините за этот неуклюжий вопрос.

Ниже вы можете увидеть обзор моей цели. Я хочу найти некоторые вещи из базы данных (с помощью ajax) и отобразить результаты в div под поиском. Это я могу заставить это работать. Но теперь я хочу иметь возможность щелкнуть по результату и получить его в виде div в верхней части страницы. Я узнал, что это нормально, что ajax не может обрабатывать такого рода действия, и невозможно выполнить jquery или другие ajax-вызовы в ajax-вызов. Я также читал о jquery live (), чтобы обойти эту проблему.

Мне все еще не ясно, как заставить все работать.

Можно ли поставить меня на правильный путь? Есть ли уроки, которые я пропустил?

спасибо!

первый шаг 

<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>

шаг второй: после поиска мы получаем 

<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>

дерево шагов: после нажатия на результат 01 или 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>

хорошо, вот часть (соответствующего) кода

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;
?>

итак, в конце 

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

должно открыться в 

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

спасибо, ребята, за ваши усилия !!

EDIT

Этот не работает: 

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

Ответы [ 3 ]

1 голос
/ 15 февраля 2011 
$('#search').delegate(".fra", "click", function() {
    $("#top").attr("src","href");   
});

Это просто устанавливает атрибут scr #top в значение "href". Это не то, что вы хотите;) То, что вам нужно, я думаю: 

$('#search').delegate(".fra", "click", function() {
    var link = $(this),
    url = link.attr("href");
    $.ajax({
       url: url,
       dataType: "html",
       success: function(data) {
         $("#top").html(data);
       }
    })
});
0 голосов
/ 13 февраля 2011

Или вы можете использовать .delegate, как это:

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...})
});

По сути, это та же идея, что и у Виктора, но я думаю, что .delegate более производительный.

0 голосов
/ 13 февраля 2011

так что вы хотите сделать что-то вроде: 

$('.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
});
...