Im using Bootstrap to create a tab content. It works fine outside netsuite. but once i put this page into netsuite it gives me an error saying "Cannot assign to read only property 'preventDefault' of error"
My page is like this
HTML:
<ul id="hireTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#tabOne" data-toggle="tab">One</a>
<li class="active"><a href="#tabTwo" data-toggle="tab">Two</a>
<li class="active"><a href="#tabThree" data-toggle="tab">Three</a>
</ul>
<div class="tab-content">
<div id="tabOne" class="tab-pane active">
One, one one
</div>
<div id="tabTwo" class="tab-pane active">
Two, two two
</div>
<div id="tabThree" class="tab-pane active">
Three, three three
</div>
</div>
JS:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
jQuery(this).tab('show');
});
});
</script>
On a closer look i found that the tab changing is working. but after the tab changes, the preventDefault doesnt stop the page junmping.
Any idea why is that or any solution? I am new to netsuite so bear with me if this question is stupid.
UPDATE: 1 hr of googling lead me to this page. http://backbonejs.org/#Router So it appears that backbone is hijacking my browser and changed the behavior of it.
The syntax href="#xxx" is intercepted by backbone and interpreted into "HOME_URL/xxx".
The problem now is how to stop backbone from doing this when i dont want to mess with the backbone code while im not sure how it will effect other parts of the project.