Question

I have to render a html page residing in templates/home.html

I have a button in index.html as:

<div id="browse_app">
    <button class="btn btn-large btn-info" type="button">Browse</button>
</div>

All I want to do is when I click on Browse, it takes me to home.html

I tried to write jQuery as:

// onClick on 'Browse' load the internal page
$(function(){
    $('#browse_app').click(function(){
        $.load('templates/home.html');
    });
});

But this doesn’t work since load needs to put data somewhere in current page

How do I get to the home.html on button click?

Answer 1

As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

This is what you want:

<div id="browse_app">
  <a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>

In the worst case scenario, this way the rendering of the button won’t look nice but the link will work. Using JS, your worst case scenario will render the link useless.