JQuery button click event doesn't respond as expected using asp.net mvc

Question

Please see my _Layout.cshtml code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")


    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Styles.Render("~/Content/themes/base/css")
        @RenderSection("scripts", required: false)
    </body>
</html>

I check firebug net tab and saw all js file got downloaded at client pc but still jquery related no function is working.

This is first one which show alert just clicking on button which is not working

$(function () {
        $("#submit1").click(function () {
            alert("button");
        });

         $(".datePicker").datepicker({
            showOn: "button",
            buttonImage: "/images/calendar-icon.png",
            buttonImageOnly: true,
            buttonText: "Select date"
         });
     });

when clicking on button then alert is not showing.

date picker is not coming.

where i made the mistake. please help me to sort out. am i missing any file to include? thanks

EDIT

my view.cshtml code as follow

@model MvcApplication1.Controllers.Employee


<div class="editor-label">
    @Html.LabelFor(model => model.Id)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Id)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
</div>


<div class="editor-label">
    @Html.LabelFor(model => model.Salary)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Salary)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.IsMale)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.IsMale)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.JoinDate)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.JoinDate, new { @class = "datePicker" })
</div>

<script>
     $(function () {
         $(".datePicker").datepicker({
            showOn: "button",
            buttonImage: "/images/calendar-icon.png",
            buttonImageOnly: true,
            buttonText: "Select date"
         });
     });

</script>

Is that #submit1 button in the _LoginPartial page? I don't see it on your _Layout (same for .datePicker). If it is, then the JavaScript will run before your partial is loaded resulting in no actions triggering. You either need to bubble the event up to something that will be loaded, or wait until the Partial has loaded. — JasCav
– JasCav, Commented Aug 25, 2015 at 15:17
Right, but is that where your submit and datePicker "stuff" is that you're referencing? I don't see the DOM elements in the code you provided at all. — JasCav
– JasCav, Commented Aug 25, 2015 at 18:06
But where is the submit button and datepicker elements at? I don't see them anywhere. JavaScript won't work if there are no elements for it to select (and jQuery will not give any errors - it just won't select anything from the DOM). You need to add those items so it all wires up properly. — JasCav
– JasCav, Commented Aug 25, 2015 at 18:11

Daniel Gpe Reyes · Accepted Answer · 2015-08-25 19:20:36Z

1

Editor works with metadata, look at http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

or change @Html.EditorFor(model => model.JoinDate, new { @class = "datePicker" }) to @Html.TextBoxFor(model => model.JoinDate, new { @class = "datePicker" })

answered Aug 25, 2015 at 19:20

Daniel Gpe Reyes

4173 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mou Over a year ago

if i change EditorFor to TextBoxFor then it will work......why? what is wrong with EditorFor() ?

Daniel Gpe Reyes Over a year ago

because second parameter , new { @class = "datePicker" } on the EditorFor is not for html attributes,

JasCav · Accepted Answer · 2015-08-25 18:29:35Z

0

Assuming that your View.cshtml is the page being rendered in @RenderBody, you need to reference your script in a section within your View.cshtml like this:

@section Scripts {
  @Scripts.Render("~/Scripts/app/myscript.js")
}

Here's an example of the JS working (you have that correct): https://jsfiddle.net/emonrc9c/

answered Aug 25, 2015 at 18:29

JasCav

34.7k21 gold badges117 silver badges175 bronze badges

3 Comments

Mou Over a year ago

which script i need to write in myscript.js file? i wrote my click and date picker related script in view's html file. i guess that should work.

Mou Over a year ago

i am new in mvc. so tell me what this @section Scripts does ? if possible give me article link which teach me about the usage of @section Scripts

JasCav Over a year ago

@Mou No, that won't necessarily work. If you're new to MVC, I would recommend heading over to asp.net/get-started and go through some of the tutorials there as your question is now expanding in scope.

Collectives™ on Stack Overflow

JQuery button click event doesn't respond as expected using asp.net mvc

EDIT

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related