jQuery Function is not called on image click - MVC

Question

I am working on a MVC application and I have two image buttons and jQuery function for them but when I click on the image functions are not called

here is my chtml code:

@{
  int year = DateTime.Today.Year;
}

    <script>
        var year = '@year';
        var url = '@Url.Action("Details", "Holidays")'; 
        var updateHolidays = function() {
            $('#year').text(year);
            $('#details').load(url, { id: year });
        } 
        $('#previous').click(function() {
            year--;
            updateHolidays();
        });
        $('#next').click(function () {
            year++;
            updateHolidays();
        });
    </script>

    @if (Session["LoggedUserName"] != null)
    {
        <table>
            <tr style="height:10px">
                <td>
                    <h2>Holiday Calandar</h2>
                </td>
                <td>
                    <input type="image" id="previous" value="submit" src="~/Images/left-arrow.png" style="width:30px" />
                </td>
                <td>
                    <h2>@year</h2>
                </td>
                <td>
                    <input type="image" id="next" value="submit" src="~/Images/right-arrow.png" style="width:30px"  />
                </td>
                <td>
                        <ul id="menu">
                        <li>@Html.ActionLink("Add Holiday", "Create", null, new { id = "lnkCreate" })</li>
                        </ul>
                </td>

            </tr>


        </table>
    }

and here is the controller code

public ActionResult Details(int year)
        {
            var model = db.tbl_HolidayList.Where(h => Convert.ToDateTime(h.Holiday_date).Year == year);
            return PartialView(model);
        }

and this this detailview code

@model IEnumerable<OTESSystem.Models.tbl_HolidayList>

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
    <legend>tbl_HolidayList</legend>
        <table>
        <tr>
            <th>
                @Html.Label("Name")
            </th>
            <th>
                @Html.Label("Description")
            </th>
            <th>
                 @Html.Label("Date")
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model)
    {
            <tr>
            <td>
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Name, new { @class = "control", id = "" })
                </div>
            </td>
            <td>
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Description, new { @class = "control", id = "" })
                </div>
            </td>
            <td>
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_date, new { @class = "control", id = "" })
                </div>
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Holiday_Id }, new { @class = "lnkEdit" }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Holiday_Id }, new { @class = "lnkDelete" })
            </td>
        </tr>

    }

    </table>
</fieldset>

can anyone tell me the mistake I am making ??

Answer 1

You javascript code runs before the page loads, so the events that you subscribe to do not yet exist. Apart from that your year variable is a string and not an integer, so you will get unexpected results when incrementing it.

First of all you need to make your year variable an integer value, you can do that using the parseInt function:

var year = parseInt('@year', 10);

(specifying the radix parameter will cover 2-digit year parsing as mentioned by mplungjan)

After that you either use a jQuery DOMContentLoaded event wrapper like this:

$(function() {

    var year = parseInt('@year',10);
    var url = '@Url.Action("Details", "Holidays")'; 
    var updateHolidays = function() {
        $('#year').text(year);
        $('#details').load(url, { id: year });
    } 
    $('#previous').click(function() {
        year--;
        updateHolidays();
    });
    $('#next').click(function () {
        year++;
        updateHolidays();
    });

});

Or use on method when binding to events:

$('table').on('click', '#previous', function() {
   year--;
   updateHolidays();
});
$('table').on('click', '#next', function() {
   year++;
   updateHolidays();
});