[jQuery] Problem using html(val) with firefox (works in IE7)

[Eric Fehse]

Hi,

I am writing a little web app that is supposed to show a table as a
reaction to an ajax call to the server.

So after the ajax post request, the server renders an html-table. This
table is then inserted in a container div on the page using the
"html(val)" method.

In IE7 this works fine.

Firefox shows a strangely different behavior: when the ajax call is
done for the first time, i.e. when the container div is still empty,
the table is correcty inserted and displayed. But on all subsequent
calls, the page is not changed.

There are no javascript errors; I checked that the new html table is
actually passed to the callback function that is supposed to change
the dom (and as I said: this works in IE).

When I reload the whole page and then trigger the ajax call, the
correct data are displayed; after that, nothing changes anymore.

Here's my code:

$(document).ready( function() {
    $("button#btn_search").click( function() {
        var search_term = $("input#txt_search").val();
        data = {'search_term': search_term};
        $.post('/voc_lookup/', data, display_results);
        return false;
    });
})

function display_results(data) {
    $("div#results").html(data);
}

The html table that is to be inserted looks like this (django
template):
<span id="results_headline">{{cards|length}} Treffer gefunden</span>
<table id="results" border="0">
    <tr>
        <th></th>
        <th>Schwedisch</th>
        <th>Deutsch</th>
    </tr>
{% for card in cards %}
    <tr>
        <td class="card_id">{{card.id}}</td>
        <td class="entry">{{card.entry_sv}}</td>
        <td class="entry">{{card.entry_de}}</td>
    </tr>
{% endfor %}
</table>

On the page is a "<div id="results"></div>"

Does anyone have any idea what the problem might be? Any help will be
appreciated!

Cheers,
Eric