Question

I am displaying data in a table and in the table i have a link. If user clicks that link, my target is to open a jquery dialog which will contain a form to submit.

The problem is, from the 2nd row to downwards if I click on the link, it says ‘jquery is undefined’, it does not find the jquery.
BUT, on the first row, if I click the link, It works fine.

code:

<script>
var linkObj;
$(function () {

    $('#ratingpopup').dialog({
        autoOpen: false,
        width: 450,
        resizable: false,
        modal: true,
        buttons: {
            "Send": function () {
                $("#edit-message").html(''); //make sure there is nothing on the message before we continue                         

                $("#updateRatingForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        title:"Rating/Comment"
    });
    $("#rating").click(function () {
        linkObj = $(this);
        var dialogDiv = $('#ratingpopup');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);

            var $form = $("#updateRatingForm");

            $form.unbind();

            dialogDiv.dialog('open');
        });
        return false;
    });

});
</script>

<div class="dataTable">
<table>

    <tr>
        <td>Ordernr.</td>
        <td>Dato</td>
        <td>Restaurant</td>
        <td>Address</td>
        <td>Delivery?</td>
        <td>Accepted?</td>
        <td colspan="3">Action</td>
    </tr>

    <%foreach (var i in Model)
  { %>
    <tr>
        <td><%:i.OrderNo %></td>
        <td>
        <%
        DateTime today = DateTime.Now;
        DateTime orderDate = Convert.ToDateTime(i.OrderDate);
        if (today.Date == orderDate.Date)
        {%>
        <b> i dag</b>
        <%}
        else
        { %>
        <%:i.OrderDate%>
        <%} %></td>
        <td><%:i.RestaurantInfo.Name %></td>
        <td><%:i.RestaurantInfo.Address %>, <%:i.RestaurantInfo.Postcode %></td>
        <td><%:i.IsForDelivery %></td>
        <td><%:i.IsAccepted %></td>

        <td><a href='<%:Url.Action("Add", "Rating", new { name = i.RestaurantInfo.Name     }) %>' id="rating">Rating</a></td> // this is the link
    </tr>
  <%} %>

</table>

</div>
<div id="ratingpopup"></div>

This is kind of weird to me…Anyone knows about this behavior??

Answer 1

You are duplicating the ID on every row, use a class instead – it is only using the first row ID by default as by definition ID is unique on the page. ( or supposed to be since the 1999 specification for html)