Question

I have a very simple gsp page that has a button. I’m trying to use JQuery (Not plugin) to attach to the click event unobtrusively. However, grails is not giving me any love. There’s

I have this at the very bottom of my main.gsp (after the tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

I have the following code at the bottom of the page that has the button:

<script type="text/javascript">

    //call out to the controller with the id of this listing and
    //get back a json list of the last several bid amounts
    //
    $(document).ready(function(){
        alert("got here");
        bindControls();
        //getLatestBids(${listingInstance.id});
    });

</script>

and finally, I have this code in my own js file:

bindControls= function (){
    alert("clicked me");
    $('#newBidButton').live("click", function(){
        alert("clicked me!");
    });
}

I can open chrome and firebug and see that all the js files are loaded. However, when I click the button nothing happens. Also, I was expecting the in the $(document).ready function to fire but it never did. Anyone with any ideas?

Thanks!

---

Update:

Changing my script tag to:

    <g:javascript>
        $(document).ready(function(){
            bindControls();
            getLatestBids(${listingInstance.id});
        });
    </g:javascript>

and moving my jquery imports into the head tag of the master did the trick.

Answer 1

Try replacing $ by jQuery if you have any conflicting JavaScript libraries on your page. If that’s the problem-solver, you can wrap your jQuery code like this:

function($) {
  $(document).ready(function(){
       console.log("got here");
  });
}(jQuery)