MVC Javascript table reload issue

Question

I have a table that is being populated dynamically, and a reload script that refreshes it ever 60 seconds.

<script type="text/javascript" language="javascript">
    window.setInterval(function () {
        $('#divGrid').load('Home/Index #divGrid>table');
    }, 60000);
</script>

I also have a Javascript that calls a partial view on table row click:

<script type="text/javascript" language="javascript">
    function showOpenTrData() {
        $('#OpenTickets tbody tr').click(function () {
            $.ajax({
                url: 'Home/TicketDetails/' + this.cells.ticketID.innerText,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
    function showClosedTrData() {
        $('#ClosedTickets tbody tr').click(function () {
            $.ajax({
                url: 'Home/TicketDetailsClosed/' + this.cells.ticketID.innerText,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
</script>

I had it at first without an onclick function but then upon reload it would stop working so I changed it to onclick function, however first time after reload I have to double click the row and after that for the period of 60 seconds till next reload its all fine, after it reloads I have to double click the first time again. Its driving me up the wall.

Please help!

HTML

<table class="table" id="OpenTickets" style="overflow-y:scroll;width:70%;float:left; margin-top:-25px; display:block;">
    <tbody>
        @foreach (var item in Model.ticketModel.OrderByDescending(x => x.ticket.ID).Where(x => x.ticket.StatusID == 1))
        {
            <tr onclick="showOpenTrData()">
                <td class="columnID" id="ticketID">
                    @Html.DisplayFor(modelItem => item.ticket.ID)
                </td>
                <td class="columnSummary">
                    @Html.DisplayFor(modelItem => item.ticket.Summary)
                </td>
                <td class="columnAssignee" id="ajaxTest">
                    @if (item.ticket.Assigned_to_UserID == null || item.ticket.Assigned_to_UserID == 0)
                    {
                        @Html.Label("Unasigned")
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.assignedUser.First_name)
                        <text> </text>
                        @Html.DisplayFor(modelItem => item.assignedUser.Last_name)

                    }
                </td>

                <td style="font-size:11px; width:10%" class="columnUpdated">
                    @if ((item.ticket.updated_at == null))
                    {
                        @Html.DisplayFor(modelItem => item.ticket.Created_at)
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.ticket.updated_at)
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

Hi! When/where do you call your `showOpenTrData` and `showClosedTrData ` functions? Any way you can show us your html also? Thanks! — nibnut, Jan 18 '17 at 20:11
Sounds a lot like http://stackoverflow.com/q/203198/215552, but it's not clear where `showOpenTrData` is called. Note also that `type="text/javascript" language="javascript"` has not been needed on a `script` element since the early 2010s. — Heretic Monkey, Jan 18 '17 at 20:12
Hi the function is being called on tr click, added html for clarity — Ivo Kazimirs, Jan 18 '17 at 20:24
Also i have seen several suggestions using the .on function instead of using the onclikc as they are able to work with dynamic content as after .load the content does not exist in the javascripts eyes so if anyone know how to implement the .on id be eternally gratefull :) — Ivo Kazimirs, Jan 18 '17 at 21:04
You have an `onclick` function which itself creates the `.click` binding which is why you have to click twice. The first click just creates the binding and the second click does 2 things: 1. It creates ANOTHER binding (yes you are double bound which is very bad) and 2. It actually runs the ajax code. Guess what the third click does? It runs the bind TWICE, and then attaches a third bind! — nurdyguy, Jan 18 '17 at 23:16

nurdyguy · Answer 1 · 2017-01-19T15:37:00.090

The basic problem here is that you are mixing onclick=... with jQuery bindings .click(...). It is possible to use both on the same page but it becomes confusing and is harder to maintain: Pick one.

The easiest thing (based on your current code) is to kill the jQuery bindings. Try this:

<script type="text/javascript" language="javascript">
    function showOpenTrData(ptr) {
        $.ajax({
            url: 'Home/TicketDetails/' + ptr.cells.ticketID.innerText,
            data: {},
            type: 'GET',
            datatype: 'json',
            success: function (response) {
                $("#TicketDetails").html(response)
            },
            error: {}
        });
    }
    function showClosedTrData(ptr) {
        $.ajax({
            url: 'Home/TicketDetailsClosed/' + ptr.cells.ticketID.innerText,
            data: {},
            type: 'GET',
            datatype: 'json',
            success: function (response) {
                $("#TicketDetails").html(response)
            },
            error: {}
        });
    }
</script>

Each time the showOpenTrData or showClosedTrData was running, it was adding another jquery bind. If you open your console and check the networks tab you'll see that the ajax functions are then being run multiple times with one click (after the second click).

If you want to just use jQuery, then use this:

 <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $('#OpenTickets tbody tr').click(function () {
            var ticketId = $(this).find('td').text();
            $.ajax({
                url: 'Home/TicketDetails/' + ticketId,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
        $('#ClosedTickets tbody tr').click(function () {
            var ticketId = $(this).find('td').text();
            $.ajax({
                url: 'Home/TicketDetailsClosed/' + ticketId,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
</script>

Also, delete the onclick=... section in the html or you'll get javascript errors because it is looking for a function that doesn't exist.

EDIT: I added in the ticketId you needed.

Hi GantTheWanderer - there is a problem with both solutions, i had tried them both before and initially i was using the 2nd option without the onlick methods. When .load on the timer happens the funcitons stop working and i dont know why. in the instance of removing the jquery bindings im not able to get the ticketID from the table as it wont locate it through this — Ivo Kazimirs, Jan 19 '17 at 13:06

score 0 · Accepted Answer · answered Jan 19 '17 at 13:36

i got it - if anyone else struggles here is the breakdown.

.load method renders any javascript useless as its not part of the same instance any more, hovever on click is a solution but how do you get the object reference?

you pass this in the on click function.

onclick="showTableData(this)"

then you can use the passed event to acquire data from it

cheers

MVC Javascript table reload issue

2 Answers2