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">One
<li class="active">Two
<li class="active">Three
</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.
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.
Related
I am trying to mass follow people i know without clicking connect the button.I have been trying to find a bit of code to mass connect through javascript console for example:
$('.button-text.follow-text').trigger('click');
Is this possible to do?
Thanks
Sure, you can, but its hard to help you with a concrete example without knowing which page you're looking at and what the underlying HTML is.
The following HTML resembles the output of the "People you may know" list on LinkedIn:
<ul class="people-cards-list">
<li id="card-1234" class="card pymk-card" data-unique-id="0">
<!-- ... contents -->
<button class="bt-request-buffed buffed-blue-bkg-1" title="Connect with ..."></button>
</li>
<li id="card-5678" class="card pymk-card" data-unique-id="1">
<li id="card-9012" class="card pymk-card" data-unique-id="2">
<!-- and so on -->
</ul>
You would be able to fire a click event on all the connect buttons from your console with this single line:
$('.people-cards-list button.bt-request-buffed').each(function (index, button) { button.click() });
It should be doable to rewrite this for use on the page you need it for.
Depending on the amount of people you want to connect with, it could be smart to add a timeout to prevent killing your browsers with hundreds of requests:
$('.people-cards-list button.bt-request-buffed').each(function (index, button) { setTimeout(function () { console.log(button); }, 500*index) });
Is this what you need?
I have the following code in my view:
<ul class="nav nav-pills">
<li role="presentation" ng-repeat='shop in shops'>
<a ng-href="#{{shop.slug}}" ng-bind="shop.name" ng-click='selectTab(shop.id)'></a>
</li>
</ul>
<!-- End of Navigation Pills -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" ng-repeat='shop in shops' id="{{shop.id}}">
<table>...</table>
</div>
</div>
<!--End of the Tab Contents -->
I am basically trying to make navigation pills that show certain tab-pane when clicked. I am using AngularJS directive ng-click with an id of the certain shop as the argument and using Bootstrap jQuery to acheive the result.
I have the following in my app.js
$scope.selectTab = function(shop_id) {
$('.tab-pane').removeClass('active');
$("#" + shop_id).tab('show');
}
});
When I use similar code in the console manually replacing the shop_id, the tab is being displayed. But the code is not working.
Please help out.
If you're executing jQuery code in the condole, the dom is fully loaded and all the resources are resent. Executing jQuery code in your javascript files may result in some runtime problems, so the code won't execute as expected. Wrap your jQuery code in the ready method, just like this:
$(document).ready(function(){
$scope.selectTab = function(shop_id) {
$('.tab-pane').removeClass('active');
$("#" + shop_id).tab('show');
};
});
From the doc:
A page can't be manipulated safely until the document is "ready."
jQuery detects this state of readiness for you. Code included inside
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
Why not use AngularJS to do the tab switch?
<a ng-href="#{{shop.slug}}" ng-bind="shop.name" ng-click="ctrl.switchTab(shop.id)"></a>
and
<div role="tabpanel" class="tab-pane" ng-repeat="shop in shops" ng-show="vm.currenTab==shop.id">
Then in your controller, have something like this:
$scope.vm = {
currentTab: 0
};
$scope.ctrl = {
switchTab: function(shop_id) {
$scope.vm.currentTab = shop_id;
// other code here
}
};
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
I'm using Bootstrap 3 to create a simple site.
I've created on about.html some Tabs with different content.
<ul class="nav nav-tabs" id="TabSomos">
<li class="active">Quienes Somos</li>
<li>Nosotros</li>
<li>Calidad</li>
</ul>
<article class="tab-content">
<div class="tab-pane active" id="somos">...</div>
<div class="tab-pane" id="nosotros">...</div>
<div class="tab-pane" id="calidad">...</div>
</article>
From index.html I want to create links that open different tabs. I created an ID per tab. However, since it's "hidden" it doesn't work properly.
Modelos de Calidad
I've been reading this solution: link to a specific tab by jquery however I do not fully understand where(and why) to put the scripts. Not sure if that's just within the same html document or between different ones, that it's the thing I need.
Any advice? (As you may see I'm not really that proficient with JS/jQuery). Thank you!
I cannot understand your question completely but here is what i can help you with what i understand.
You want to open a particular tab using the ID in about page.
Try using this code at the end of your about.html page,
$(document).ready(function() {
var hash = location.hash;
$(hash).tab('show');
});
Thank you vigneshmoha,
It seems that someone asked the "same" question as well, and we were heading in the right direction regarding the hash.
Bootstrap tabs opening tabs on another page
So far I have coding for making the tab's display property to none until the button is clicked. The code is given below.
The problem is only one tab is showing at a time. What I want is, all tabs should be visible but not clickable. Please help me with the code if possible or just give me some suggestions, I will try coding it myself and will post it here as answer.
Thanks!
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In (with this only the first tab is visible and the other tabs are non-visible)
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS: (at button click) (With this the second tab will be visible and the rest 3 tabs will be non-visible)
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
Try this
$('.TabbedPanelsTabGroup').off("click");
or
$('.TabbedPanelsTabGroup li').off("click");
jQuery off().
Let me know if it not works.
UPDATE 1
$('.TabbedPanelsTabGroup li').on("click", function(){
return false;
});
Or if you are using jquery tab, look: http://jqueryui.com/demos/tabs/#event-select
Thanks for all the help, I have finally found the answer myself. It is actually quite simple. I just commented Spry.Widget.TabbedPanels.prototype.onTabClick event in the .js file.
/*Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
return this.cancelEvent(e);
};*/
Now the tabs are not clickable and works the way I want it to.
use this
$('.TabbedPanelsTabGroup').children().unbind("click");
$('.TabbedPanelsTabGroup').children().eq(0).bind("click");
instead of doing
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();