Question

I have a website that lets users comment on books and articles, and the main form has a search input for finding a relevant book or article (sources). I use jQuery to dynamically load new sources from an outside site based on the search terms entered, and then also return sources in a list using AJAX. I have two problems:

1. Right now, after the user enters four characters, the jQuery runs with every new keypress event. What’s a better way to wait for the user to stop typing, and then only run the jQuery event then?
2. In Firefox, the list is not styled though the CSS for the list is contained in the main CSS sheet already associated with the page. (This works just fine in Chrome and Safari.)

I use CodeIgniter, but most of the example code should be accessible regardless of familiarity with CI. As said above, all CSS right now is in one sheet that is associated with this page.

Here is the basic form 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()?>

Here is the javascript (not my strongsuit):

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

The ‘refMatch” page which is accessed via AJAX checks an external site to see if there are any new additions that need to be made to the database, then outputs matches from the db. Here is the output file:

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

So, to repeat my questions, why is FF not styling the AJAX output? And what’s a better way to trigger the jQuery AJAX call?

Answer 1

I’m not positive what the problem is, but there’s a few curious things about your post. Given that this works in Chrome and Safari, it would seem that your markup/styles are correct though. Can you provide the URL to your site?

First, are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.

Second, you mention that you’re using jQuery to load data from an outside source (an external web site I presume). This violates the Same Origin Policy and I would expect this to fail in all browsers. This might be the cause of some problems.

I strongly suggest using Firebug to troubleshoot this. You can use it to inspect HTML and really see what’s going on.