CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapangularjshref
user2375809
user2375809

Reputation: 419

href causes unintended page reload with Angularjs and Twitter Bootstrap

I am working on a project that uses Angularjs and Twitter Bootstrap.

Bootstrap uses # to toggle components such as popover, modal etc. for example:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

The problem is when I click on button with such href attribute, it causes full page reload, which means, everything in current page is lost. Is there a way to prevent this?

some extra info:

when i hover on the button, the url is weird. for example, my current page's url is

localhost:8080/#/account

the button's href is

href="#myModal"

I expect to see url

localhost:8080/#/account#myModal

However, what I see is 

localhost:8080/#myModal

I am not sure if this is related to my problem.

Thanks in advance!

EDIT 1

I have seen the other post that Stewie talked about. It explains html5mode and hashbang in angularjs, but it doesn't really solve my problem.

I tried putting html5mode, and it still reloads the page when i click on the button

Upvotes: 31

Views: 28443

Answers (7)

Jo&#227;o Otero
Jo&#227;o Otero

Reputation: 998

There's a simpler solution here: How to prevent redirecting <a href="#something"> in Angular Js1.2

Just add target="_self" to your links

Upvotes: 4

Todd B
Todd B

Reputation: 1

Use something like this in ur js

$('a').on('click',function(e){

    e.preventDefault();
});

Just make sure you make a class for your 'a' otherwise you will do it to all a's.

Upvotes: 0

jlizanab
jlizanab

Reputation: 644

I solved: Simply just change HREF attribute by the DATA-TARGET attribute.

<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
        <li role="presentation" class="active">
            <a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
        </li>
        <li role="presentation">
            <a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Tortor Porta Sit</div>
        <div role="tabpanel" class="tab-pane" id="profile">Duis mollis, est non commodo</div>
    </div>
</div>

Upvotes: 6

ustun
ustun

Reputation: 7021

This is because of HTML link rewriting of Angular, explained here.

To prevent rewriting of location, add target=_self to those bootstrap links.

So instead of <a href="#myModal"> you need <a href="#myModal" target="_self">

Upvotes: 27

jamiltz
jamiltz

Reputation: 1144

I had similar issues, full page reload vs just view switching.

Because Angular apps are SAPs, we only update whatever comes after hostname/#/.

I instantiate a SuperController, kind of the application level controller and like Carlos V said, you can use ng-click instead of href to update $location.path().

Here's a fiddle link

Might not be the most optimal solution. Hope it helps.

Upvotes: 1

Carlos
Carlos

Reputation: 2232

The hashbang in Angular is used for routing. Look at the tutorial for a deeper insight into how it works here.

You should also take a look at Angular UI Bootstrap.

Regular Boostrap wasn't built with Angular in mind, so there are few things that aren't in line with Angular. So the team decided to port Boostrap into Angular directives, giving you the ability to fully use Angular's ng- features (which you wouldn't be able to do easily with just regular Boostrap).

Due to the way routing works, I don't think you would be able to do what you want, and you shouldn't need to. Since you're using the <a> as a button, make it a regular button and add an ng-click:

<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>

This is the Angular way (and how Angular UI Bootstrap works).

Lastly, in Angular, the <a> is a directive docs here, so if you want to prevent the default click, leave href="":

<a href="" ng-click="model.$save()">Save</a>

Upvotes: 11

Bhaskara Kempaiah
Bhaskara Kempaiah

Reputation: 217

Go ahead & make the below change, of putting javascript:void(0) instead of #myModal for href. Use Javascript to trigger your modal opening, by putting a click event.

    <a href="javascript:void(0)" onClick="openModal()" role="button"...

    function openModal(){
      $("#myModal").moda();
    }

Upvotes: -9

Related Questions