JQuery button on click function not working

Question

I'm new to front-end programming and using multiple new (to me) technologies on a project (boostrap, grails, jquery). So, the following issue may be a no-brainer to experienced font-end developers, so please humor me.

The Issue: I cannot figure out why for the life of me, the button.click function in jquery scrip is not triggering. Neither the alert is triggered, nor the actual ajax call to the URL. The body tag of the .gsp file, including the script, is below. Help!

<body>
    <div id="top"/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-10">
                <div class="input-group">
                    <input id="searchQuery" type="text" class="form-control" placeholder="${message(code: 'search.enterquery', default: 'Enter query')}" >
                    <span class="input-group-btn">
                        <button id="searchButton" class="btn btn-default" type="button"><g:message code="search.search" /></button>
                    </span>
                </div>
            </div>
            <div class="col-xs-1"></div>
        </div>
        <div class="row">
            <div id="searchResults">
                Results will appear here
            </div>
        </div>
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $("#searchButton").click(function() {
                alert("button was clicked");
                $.ajax({
                    type: "POST",
                    url: "${g.createLink(controller:'library',action:'search')}",
                    dataType: 'html',
                    data: { query: $("#searchQuery").val()},
                    success:function(result){
                        $("#searchResults").html(result);
                    }
                    error:function() {
                        $('#searchResults').text('An error occurred');
                    }
                    complete:function() {
                    }
                });
            });
        });
    </script>   
</body>

This should almost certainly have resulted in a console error message. Hit F12 in Chrome to open up the developer tools to see messages like that. — billjamesdev
– billjamesdev, Commented Mar 28, 2016 at 3:52

Ibrahim Khan · Accepted Answer · 2016-03-27 17:37:02Z

3

You missed comma(,) after success and error callback.

success:function(result){
    $("#searchResults").html(result);
},   //here
error:function() {
    $('#searchResults').text('An error occurred');
}, //here
complete:function() {
}

answered Mar 27, 2016 at 17:37

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

JQuery button on click function not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related