Firefox не будет отображать стили CSS для контента, загруженного с помощью jQuery AJAX

Question

У меня есть веб-сайт, который позволяет пользователям комментировать книги и статьи, а в основной форме есть поиск для поиска соответствующей книги или статьи (источников).Я использую jQuery для динамической загрузки новых источников с внешнего сайта на основе введенных условий поиска, а затем также возвращаю источники в списке, используя AJAX.У меня две проблемы:

1. Прямо сейчас, после того, как пользователь вводит четыре символа, jQuery запускается с каждым новым событием нажатия клавиши.Какой лучший способ подождать, пока пользователь прекратит печатать, а затем запустить только событие jQuery?
2. В Firefox список не имеет стиля, хотя CSS для списка содержится в основном листе CSS, уже связанном со страницей.(Это прекрасно работает в Chrome и Safari.)

Я использую CodeIgniter, но большая часть кода примера должна быть доступна независимо от знакомства с CI.Как уже было сказано выше, весь CSS прямо сейчас находится на одном листе, связанном с этой страницей.

Вот базовая форма html:

<?=form_open('/scrawls/add')?>
<h2>Add a Scrawl</h2>
<div id="scrawl-source-container">
    <p class="form-par">Search for a reference:</p>
    <input type="text" name="scrawl_source_search" id="scrawl-source-search">
    <div id="scrawl-source-suggestions">
        // this is where the list of suggestions is inserted
    </div>
</div>
<input type="hidden" name="scrawl_source_id" value=0 id="scrawl-source-id">
// redacted code here that deals with other fields 
<div id="selected-ref">
    You've selected: <span id="selected-ref-name"></span>
</div>
// redacted code here that deals with other fields
<?=form_submit('scrawl_submit','Post')?>
<?=form_close()?>

Вот javascript (не мой костюм):

$(document).ready(function() {

$("input#scrawl-source-search").keypress(function() {
    var length = $(this).val().length;
    // check to see if there are more than four characters in the input field
    if (length > 4) {
        // need to make some sort of loading div here
        // make Ajax request to find matching sources
        $.post("http://mysite.com/refs/refMatch",{ term:$("input#scrawl-source-search").val()}, function(data) {
            if (data=="No output") {
                $("div#scrawl-source-suggestions").show();
                $("div#scrawl-source-suggestions").html("No matches.");
            } else {
                $("div#scrawl-source-suggestions").html(data).hide();
                $("div#scrawl-source-suggestions").slideDown();
            }
          });
    }
});
});

Страница 'refMatch', доступ к которой осуществляется через AJAX, проверяет внешний сайт на наличие каких-либо новых дополнений, которые необходимо внести в базу данных, а затем выводит совпадения из базы данных.выходной файл:

<?php
if(isset($refs))
{
echo '<ul class="autocomplete-list">';
foreach($refs as $r)
{
    echo '<li class="autocomplete-entry">';
    echo '<span class="source-id" style="display:none">'.$r->ref_id.'</span><span class="source-title">'.$r->ref_title.'</span>';
    if($r->ref_author != '') {
        echo ' by <span class="source-author">'.$r->ref_author.'</span>';
    }
    echo '</li>';
}
echo '</ul>';
} else {
    echo "No output";
}

Итак, чтобы повторить мои вопросы, почему FF не обрабатывает вывод AJAX? И какой лучший способ инициировать вызов jQuery AJAX?

Answer 1

Я не уверен, в чем проблема, но в вашем посте есть несколько любопытных вещей.Учитывая, что это работает в Chrome и Safari, может показаться, что ваша разметка / стили верны.Можете ли вы указать URL своего сайта?

Во-первых, добавляете ли вы классы CSS к своим элементам через Javascript?Если это так, то добавленные вами стили будут влиять только на те элементы, которые являются частью DOM в данный момент времени, поэтому вы можете испытывать состояние гонки, которое на самом деле работает в Chrome и Safari, но не в Firefox.*

Во-вторых, вы упомянули, что вы используете jQuery для загрузки данных из внешнего источника (я полагаю, внешнего веб-сайта).Это нарушает Same Origin Policy , и я ожидаю, что это не удастся во всех браузерах.Это может быть причиной некоторых проблем.

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

Answer 2

Я столкнулся с той же проблемой в Safari.Несмотря на то, что CSS-файл был правильно связан с загруженным ajax HTML-файлом, загруженный контент вообще не был стилизован.Попробуйте связать файл CSS в родительском документе!Избыточный, да - но эффективный.:)