Due to docs React-Bootstrap supports onSelect method for tabs which fires once tab switch to another tab.
I looking for something similar to native Twitter Bootstrap event hide.bs.tab to determine moment when tab starts closing.
I found some utilities with onExit method, but that doesn't work for tabs, as for me.
How to do that?
Actually, onSelect fires (if you provided it as a prop) as soon as another tab is selected, not after it is switched to. It is then that handler's job to switch the active tab (or not), perhaps after loading additional information through the wire, and so on.
An excerpt from the React-Bootstrap code:
if (this.props.onSelect) {
this._isChanging = true;
this.props.onSelect(selectedKey);
this._isChanging = false;
return;
}
(taken from https://github.com/react-bootstrap/react-bootstrap/blob/44182b72da816b719029355478ef2e7efef522f6/src/Tabs.js#L324)
Then followed by the built-in tab switching but only if you hadn't provided onSelect.
For example, your custom onSelect handler could display a spinner, fetch data that goes in the new tab, and once that's done hide the spinner and switch the active tab to that one, using the activeKey prop.
You can attach an onClick event to the anchor element of your nav-tabs:
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" data-toggle="tab" href="#tabOne" role="tab" onClick={this.handleTabChange}>Tab One</a>
</li>
<li className="nav-item">
<a className="nav-link active" data-toggle="tab" href="#tabTwo" role="tab" onClick={this.handleTabChange}>Tab Two</a>
</li>
</ul>
Related
I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
I'm using the mmenu plugin on a page that's based on jquery-mobile. Mmenu gives me left and right sliders which work fine except for when I try to open a 'mobile-style' popup window. These messages / events aren't getting out.
I have other popup windows on this page so I know that the popup code works but when I try to use the same code inside the <li><a href="#popup" ... ></a></li> framework for mmenu it does nothing.
Chrome script debugger doesn't show any errors. The styles and markup are the same between the working and non-working buttons (when viewed in the debugger).
popup window
<div data-role="popup" id="optionsDialog" data-overlay-theme="a" data-theme="b"
data-dismissible="false" style="max-width:400px;" >
<div data-role="header" data-theme="a">
<h1>Options</h1>
</div>
<div role="main" class="ui-content">
Some options go here?<br>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-btn-b" data-rel="back">
Cancel
</a>
</div>
</div>
button to open popup
<a href="#optionsDialog" id="options_button" data-role="button"
data-mini="true" data-rel="popup" data-position-to="window"
data-transition="pop">
Show popup
</a>
How do I go about finding my missing events?
FWIW: No idea what mmenu is doing to stifle this event but it was solved by scripting as follows:
$( "#options_button" ).click( function()
{
$( "#optionsDialog" ).popup( "open", {} );
});
...
<li><a href="#" id="options_button" >Options</a></li>
plain old jQuery.
Is there some built in functionality to open a tab pages(kendoUI TabStrip) based on the url? or do I have to write some custom function to read the url and do some work based on that?
I think you would have to parse the URL, then call the activateTab() function on the tab strip to open the tab you want.
Check if this is what you are looking for:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
JavaScript:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
contentUrls:[
"page1.html",
"page2.html",
"page3.html"
]
});
});
It creates a 3 tabs kendoTabStrip and the content of each of the tabs is page1.html, page2.html and page3.html.
Solution if you want to set the active tab in the rendering state (not with Js at the page load)
if you use a templete system (like groovy for play framework 1.x) you can write something like this:
<ul>
<li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
<li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
content for tab application
</div>
<div>
content for tab payment
</div>
Note: params.get('ref') means the requests's get param with the name: 'ref'
And if you open this page with the url:
someting.dev/dashboard?ref=payment
you will get the payment tab as the active
I know there are many great helpers on this site, I am still learning jquery, but I love the functionality behind it. Recently I created a megadrop down menu, but I started getting a lot of recommendations to use the hoverintent plugin instead of using show/hide. I am lost trying to change my coding around to get it to work...PLEASE HELP...THANKS AS ALWAYS GUYS AND GALS!!!
OH and I think that changing to hoverintent will stop the overflows from building up too, but I do not think my code is working to stop that from happening?
My site...only the About DKE dropdown works...
http://www.nestudiosonline.com/test.php
my jquery script...
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('slow');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide('slow');
});
});
Here is my html....
<div id="pagelinks">
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
(about dke div content)
</div>
</div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
</div>
Two things before I get to the real answer:
You're missing the opening body tag after your doctype.
Only lowercase tags are valid in XHTML.
The events are only triggered for #aboutdke because that's the one element you have hardcoded into the event callback functions. Try something more abstract:
$('#menu > li').mouseover(function() {
$(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
$(this).children().is('div').hide('slow');
});
This should (if memory serves) work for every menu item.
I have a menu like this, but the mark-up doesn't have to stay this way.
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
And each time one of these menu items is clicked I want to load different content in a div - let's call it #content.
$(document).ready(function() {
$('#menu li').click(function(){
$('#content').load('content.txt');
});
});
Now, how do I pass which content page I want to load into #content? Thanks in advance!
Prevent the click from going to the page with the event's preventDefault() method, use the link's href that actually goes to that page loaded into the #content div.
$(document).ready(function() {
$('#menu a').click(function(e){
$('#content').load($(this).attr('href'));
e.preventDefault();
});
});
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
You can do this in numerous ways. Essentially, you need to associate a URL with each <li> item.
To name a few ways, you could have them stored in a JavaScript array, in the jQuery cache i.e. $(selector).data, in a hidden input inside each <li> element, as an attribute on the <li> element.
I'd use something like jQuery UI's tab feature to handle this. It will probably degrade better.
If you need to do this manually, your easiest route may be to add an ID or rel attribute to the anchors, and then use that to determine the content page you want to load.
You can use "$(this).attr('blah');" within your function to access these properties.
in the realms of progressive enhancement - you should make the links point to another page with their respective content.
then you can load not just the entire contents of the page into your content div but a specified element. So if its the contents of the #content div in the other page is required something like:
$('#menu a').click(function(){
$('#content').load($(this).attr('href') + ' #content');
});
should do the trick.
only problem with joelpittets solution is that it would load the ENTIRE contents of the other page which may not be what is desired. He did however remember to cancel the default behaviour of clicking a link...