Как получить ajax в диалоговом окне интерфейса jQuery?

У меня есть рабочий код, который использует ajax для перезаписи некоторого html при нажатии на различные ссылки. Вместо этого я хотел бы создать диалоговое окно «на лету» на событии зависания, а не переписывать некоторые html «на лету» при событии клика. Вот код рабочего клика:Как получить ajax в диалоговом окне интерфейса jQuery?

<html> 
    <head> 
    <script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script> 
    </head> 
    <script language="javascript" type="text/javascript" src="/wp-content/themes/spacious/jquery-ui/jquery-ui.js"></script> 
    <body> 


<div id="book001"> 
    <a href="javascript:{}" class="citation"><span class="book">I, Robot</span><br> 
    <div id="author001"></div> 
</div> 
<div id="book002"> 
    <a href="javascript:{}" class="citation"><span class="book">Stranger In A Strange Land</span><br> 
    <div id="author002"></div> 
</div> 

<script id="source" language="javascript" type="text/javascript"> 

    var $j = jQuery.noConflict(); 

    $j(".citation").click(function () 
    { 
    event.preventDefault(); 
    var get_book = $j(this).find('span.book').html(); 
    var divName = $j(this).parent().attr('id'); 
    $j.ajax({          
     url: 'book_api.php',  
     data: { 
     book:get_book, 
     }, 
     dataType: 'json',  
     success: function(data) 
     { 
     var content = data[4]; 
     $j('#'+divName.replace('book','output')).html(content); 
     } 
    }); 
    }); 

    </script> 
</body> 
</html>

Я намереваюсь использовать интерфейс jQuery для создания диалога. Я немного расплывчатый о том, как заставить код ajax влиять на содержимое диалогового окна. На этой странице будут сотни таких ссылок, поэтому я не хочу предварительно заполнять сотни диалоговых окон.

источник

2015-04-20 Kenneth Vogt

Сколько данных возвращает book_api.php? или Данные, которые будут отображаться, много или всего несколько строк? Возможно, yo может использовать подсказку jquery ui или аналогичную. Или окончательно вы должны использовать диалог? – AiApaec

Это всего лишь несколько строк, поэтому всплывающая подсказка может быть прекрасной, но у меня все еще будет такая же проблема, когда вы не хотите, чтобы вес каждой всплывающей подсказки был предварительно заполнен. Их будет сотни. –

Пользователь может быстро запускать множество событий наведения, поэтому привязка вызова ajax к каждому из них может быть не лучшей стратегией. В процессе производства ваш список будет заполнен из базы данных, поэтому, если вы получите требуемую информацию (при условии, что это небольшой бит json) вместе со списком титров, вы можете создать свой html таким образом, чтобы json находился в атрибуте данных в якорной теге. Затем вы можете использовать jQuery для заполнения всплывающей подсказки без каких-либо задержек или дополнительных вызовов.

<a data-info="<some data about this book>">I, Robot</a> 

$j(".citation").hover(function() { 
    event.preventDefault(); 
    console.log($j(this).data('info')); 
});

источник

2015-04-20 02:04:14 jmargolisvt

Есть способ остановить событие зависания, не так ли? Я имею в виду только огонь события, если они парят в течение 2 секунд или что-то в этом роде. –

Я не беспокоюсь о задержках или дополнительных звонках, я беспокоюсь о длительном времени загрузки страницы, когда большая часть данных всплывающей подсказки не нужна. –

Вы можете попробовать плагин, например [hoverIntent] (http://cherne.net/brian/resources/jquery.hoverIntent.html), и это может быть все, что вам нужно! – jmargolisvt

Получается, что ответ довольно прост. Просто замените повторяющиеся дивы для каждого автора, как:

<div id="author002"></div>

с одним DIV, который является контейнером для диалогового окна:

<div id="dialog"></div>

, а затем просто ссылаться на $j("#dialog").html, а не $j('#'+divName.replace('book','output')).html.

источник

2015-04-20 20:58:35

Как получить ajax в диалоговом окне интерфейса jQuery?

ответ

Смежные вопросы