1

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.

A Web-Developer
  • 868
  • 8
  • 29

1 Answers1

0

My temporary solution is event.stopPropagation().

Final Working code is:

<script type="text/javascript">
    jQuery(function() {
       jQuery('#hireTab a').click(function(e) {
           e.preventDefault();
           e.stopPropagation();
           jQuery(this).tab('show');//Maybe this line is not needed
       });
    });
</script>

What this function does is it kills the request and stop it from going up the DOM tree.

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

It is a brutal way of doing this. Im sure there are more elegant or native of getting this to work.

A Web-Developer
  • 868
  • 8
  • 29