Почему мой диалог jQuery и набор данных не работают на одной странице?

Question

Я создаю приложение asp.net mvc 2.Я поместил две таблицы данных на одну страницу вместе с изображением, которое при нажатии открывает диалог.Таблицы данных работают нормально, но диалоговое окно не появляется.

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

Вот мое изображение:

<a href="#">
   <img id="agent-bill-id" src="<%=Url.Content("~/Content/Images/search_icon.gif")%>" />  
</a>

Вот мой код набора данных:

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": true,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            null,
            null,
            null,
            null]
        });

        ratesandcharges1.fnDraw();

    });
</script>

<div id="ratesandcharges1Wrapper" style="width: 650px;"> 

    <table id="ratesandcharges1" class="grid" >
        <thead>
            <!--Header row-->
            <tr>
                <th>Code</th>
                <th>Day/Tag 1-2</th>
                <th>Day/Tag 3-5</th>
                <th>Day/Tag 6-999</th>
            </tr>
        </thead>
        <!--Data row-->
        <tbody>
            <tr>
                <td>KM/Miles (Ext. KM Charge: 0)</td>
                <td>99999</td>
                <td>99999</td>
                <td>99999</td>
            </tr>
            <tr>
                <td>VW Polo</td>
                <td>65.00</td>
                <td>55.00</td>
                <td>45.00</td>
            </tr>
        </tbody>
    </table>
</div>    

<div class="row">
</div>

<div class="separator">
</div>

<script type="text/javascript">

    var ratesandcharges2;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges2").dataTable({
            "bRetrieve": true,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null]
        });

        ratesandcharges2.fnDraw();

    });
</script>

<!--not for popups-->
<div id="ratesandcharges2Wrapper" style="width: 650px;"> 

    <table id="ratesandcharges2" class="grid" >
        <thead>
            <!--Header row-->
            <tr>
                <th>Charge Code</th>
                <th>Rates</th>
                <th>Quantity</th>
                <th>Total Charge</th>
                <th>VAT %</th>
                <th>Calc. Type</th>
                <th>Paid By</th>
                <th>From</th>
                <th>To</th>
             </tr>
        </thead>
        <!--Data row-->
        <tbody>
            <tr>
                <td>Day/Tag</td>
                <td>55.00</td>
                <td>3.00</td>
                <td>165.00</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Bill-to/Agent</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>PAI</td>
                <td>7.50</td>
                <td>3.00</td>
                <td>22.50</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>BCDW</td>
                <td>15.00</td>
                <td>3.00</td>
                <td>45.00</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
            <tr>
                <td>BTP</td>
                <td>7.15</td>
                <td>3.00</td>
                <td>21.45</td>
                <td>20.00</td>
                <td>Rental Time</td>
                <td>Driver/Cust.</td>
                <td>5/11/2010</td>
                <td>08/11/2010</td>
            </tr>
        </tbody>
    </table>
</div>    

<div class="row">
</div>

<div class="separator">
</div>

А вот мой всплывающий код (это хорошо работает на страницах без данных):

$().ready(function() {
    $("#agent-bill-id").click(function() { // id which is to be clicked
        $.get(
                "ModalPopup/AgentBillSearch", // ModalPopup Controller/ RandomPopupView Action
                function(htmlResult) {
                    $("#agent-bill-search").remove(); //The Div in the view page.
                    $("#container").append(htmlResult); // The place to show the dialog (pop up)
                    $("#agent-bill-search").dialog({ width: 650, modal: true, maxWidth: 650, maxHeight: 600, title: 'BMS Car Rental Application' }); // The Div in the view page.
                }
            );
        return false; //To keep the default behavior of the anchor tag from occuring.
    });

    // Removed table javascript
});

Примечание:

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

Спасибо