Question

I’m a little bit confused right now, if I put this jquery on my webpage, everything works OK.

<script>
    $.get("/Recipe/SearchResult/", function (response) {
        $("#SearchResults").html(response);
    }); 
</script>

however, I am trying to have this run onclick on a button. so I put it in a function like this:

<script>    
    function Search() {
        $.get("/Recipe/SearchResult/", function (response) {
            $("#SearchResults").html(response);
        });
    };     
</script>

Using firebug, if I put a break on function Search{} {, when I click the button, it does break on that line. however, if I step over, it does not seem to run the jquery. it just goes to the end of the function for the next line and nothing happens.

edit: here is the line that has the button:

<button onclick="Search"  type="submit" class="btn btn-success"><i class="icon-search"></i> Search</button>

Does anyone have any ideas?

Thanks.

Answer 1

It because your button type is submit, so after button clicked, form will post back and reload the page. try change it to type=”button”

<button onclick="Search"  type="button" class="btn btn-success"><i class="icon-search"></i> Search</button>