CODEWITHSUNDEEP
javascriptc#jqueryasp.netweb-applications
Sertan Pekel
Sertan Pekel

Reputation: 611

jquery click function does not work

I have a asp.net web application written in VS 2013. The application has nested master pages and main master page has following codes:

<!DOCTYPE html>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

My web form consists of following codes also:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textbox1').click(function () {
                alert('Hello');
            });
        });
    </script>

<div class="form-group">
    <label class="control-label">Name</label>
    <input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>

And when I build the project and run on browser (either ie or chrome), I click on "textbox1" and browser does nothing.

Appreciate for help.

Upvotes: 1

Views: 80

Answers (3)

Christos
Christos

Reputation: 53958

You should replace this:

$('#textbox1')

with this:

$('#<%=textbox1.ClientID%>')

Your textbox is a server side control. So you have to read the ClientID, in order to read the ID for HTML markup that is generated by ASP.NET. For further info please have a look here. Generally as it is stated in the previous link:

When a Web server control is rendered as an HTML element, the id attribute of the HTML element is set to the value of the ClientID property

Furthermore, you have to remove the closing script tag, </script>, just before the opening script tag, <script> of your script.

Upvotes: 3

user688
user688

Reputation: 361

Try this, Hope it help you

Script:

<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

Html:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server>

Jquery:

<script>
     $('#textbox1').click(function () {
                    alert('Hello');
                });
</script>

Upvotes: 0

Matthew Lundstrom
Matthew Lundstrom

Reputation: 117

You have an extra </script> tag immediately after your asp tag.

Try the same code without it:

<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textbox1').click(function () {
                alert('Hello');
            });
        });
    </script>

<div class="form-group">
    <label class="control-label">Name</label>
    <input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>

Works for me here: https://jsfiddle.net/mutjg5sq/

Upvotes: 0

Related Questions