We Keep Coding

Tab Change Functionality of Bootstrap not working in ReactJS

Layout.js file
<div class="row">
<div class="col-12" style={{padding: 0}}>
<div class="tabs-container-fluid">
<MidTabs />
<div class="tab-content">
<Mail />
<PromotionalActiv/>
<Dashboard />
<SalesOver />
<XYZAnalysis />
</div>
</div>
</div>
</div>
MidTabs.js file where hrefs are added for the different tablets.
return (
<div>
<ul class="nav nav-tabs" role="tablist">
<li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with ABC</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-3"> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>XYZ Analysis</a></li>
</ul>
</div>
);
Dashboard.js file
return (
<div>
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............
I have similar files for Mail.js, PromotionalActiv.js, etc.
The problem is that when I click on a tab like Dashbaord/Mail, etc, I can't see the corresponding content. Instead, all the content in Dashboard, Mail, PromotionalActiv, etc are stacked one below the other. I want that content to be rendered conditionally based on whether the tab has been clicked or not.
Am I making a mistake in the way I'm arranging the components?

If you are trying to control with some custom css, you can do this.
Inside the Dashboard.js file, in the tab-pane class, put display: none;
And in the active class next to tab-pane, put display: block;

Ok, so the issue was that I was adding an extra div in every child component like Mail, PromotionalActive, etc due to which the CSS class was getting affected. After removing the extra div in those components, the problem got solved.
For example, the Dashboard.js file will now look like this without the extra div:
return (
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............

How to change template with vue.js?

I am a beginner of vue.js, now I try to set up a website with dynamic tab.
I have some problem when changing different tab with different template.
But I face a problem, when I click the ul element in my website to change another template, it shows error as following:
It seems like template included error.
<template id="switchhover">
<div>
<div class="menu">
<div class="title">
<img src="../assets/title.jpg" class="min_picture">
<span>Hello</span>
</div>
<ul>
<li #click="changeView('Home')" class="liststyle">Home(首頁)</li>
<li #click="changeView('WorkExperience')" class="liststyle">Work Experience(工作經歷)</li>
<li class="liststyle">Project Experience(專案經歷)</li>
<li class="liststyle">Portfolio(作品集)</li>
<li class="liststyle">Photo(相片)</li>
<li class="liststyle">
<router-link :to="{path: '/'}">Back to Navigation Page<br>(回導覽頁)
</router-link>
</li>
</ul>
<div class="link">
<a href="https://www.facebook.com/profile.php?id=100001824960776">
<div class="fb"></div>
</a>
<a href="https://github.com/PefyLi">
<div class="github"></div>
</a>
<a href="https://www.linkedin.com/in/grant-li-3a6680150/">
<div class="linkedin"></div>
</a>
</div>
</div>
<div class="content">
<div class="banner">
<div>
<div class="picture">
<img src="../assets/title.jpg" class="bar_picture">
</div>
<div>
<span style="font-size:35px;margin-right:29px">Hello</span>
<span>Hello</span><br><br><br><br>
</div>
</div>
</div>
<component :is="currentTab" keep-alive></component>
</div>
</div>
</template>
<script>
import Home from './Home';
import WorkExperience from './WorkExperience';
export default {
data(){
return{
currentTab:Home
}
},
methods:{
changeView: function(viewName) {
this.currentTab = viewName
}
},
components: {
Home:{ template: Home},
WorkExperience:{ template: WorkExperience}
},
};
</script>

If found error !! Element type is invalid: expected a string

I have error on my react js projects, i've searched in google but all did not give me the solution
I got error like this :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Look my code :
ArticleAll.js
import React from 'react';
import Navigation from '../partials/Navigation';
import ArticleCard from './ArticleCard';
import Footer from '../partials/Footer';
class ArticleAll extends React.Component {
render() {
return (
<div class="page-wrapper">
<div id="control-body" class="fixed-sidebar medium-sidebar fixed-nav">
<Navigation/>
<main class="page-body">
<div class="row">
<div class="col s12 page-title-div">
<h1 class="header">Cards</h1>
<ol class="breadcrumbs left">
<li>Dashboard</li>
<li>Advanced UI</li>
<li class="active">Cards</li>
</ol>
<a class='dropdown-button dropdown-hover waves-effect waves-light page-help right' href='javascript:void(0)' data-activates='dropdown-help'>
<i class="material-icons">help</i>
</a>
<ul id='dropdown-help' class='dropdown-content'>
<li>API</li>
<li>Blog</li>
<li>Docs</li>
</ul>
</div>
</div>
<section class="section">
<div class="row ">
<ArticleCard/>
</div>
</section>
</main>
<Footer/>
</div>
</div>
)
}
}
export default ArticleAll;
ArticleCard.js
import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;
Routes.js
import React from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import Home from '../components/Home';
import Login from '../components/auth/Login';
import Register from '../components/auth/Register';
import ArticleAll from '../components/article/ArticleAll';
class Routes extends React.Component {
render() {
return (
<BrowserRouter>
<div>
{this.props.children}
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/article" component={ArticleAll}/>
</div>
</BrowserRouter>
)
}
}
export default Routes;
Navigation.js
import React from 'react';
import ReactDOM from 'react-dom';
class Navigation extends React.Component {
render() {
return (
<div>
<nav class="page-header z-depth-3">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo hide-on-med-and-down">materialcss</a>
<ul class="left">
<li class="hide-on-large-only">
<a href="javascript:void(0)" id="toggle-left-sidebar" class="hrz-menu waves-effect waves-default">
<i class="material-icons">menu</i>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="javascript:void(0)" class="hrz-menu waves-effect waves-default hide-show-nav-search">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin waves-effect waves-default" data-activates="notification-list-dropdown">
<i class="material-icons">notifications</i>
<span id="notification-cout">25</span>
</a>
</li>
<li id="user-account-box">
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin dropdown-widthChange waves-effect waves-default" data-activates="user-account-dropdown">
<i class="material-icons">account_circle</i>
</a>
</li>
</ul>
<ul id="notification-list-dropdown" class="width-400 dropdown-content">
<li>
<a href="#!">
<i class="material-icons">email</i>
</a>
<p class="noti-message">
<a href="#!">New mail from jhon
<span>15 minutes ago</span>
</a>
</p>
</li>
<li>
See All
</li>
</ul>
<ul id="user-account-dropdown" class="dropdown-content">
<li>
<a href="#!">
<i class="material-icons">perm_identity</i>My Profile
</a>
</li>
<li>
<a href="javascript:void(0)" class="toggle-right-sidebar">
<i class="material-icons">settings</i>Page Customizer
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<i class="material-icons">lock</i>Lock
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">power_settings_new</i>Logout
</a>
</li>
</ul>
<div class="search-overlay hide"></div>
<div id="search-body" class="z-depth-1">
<form class="search-box">
<div class="input-field z-depth-1">
<input id="search" type="search" autocomplete="off" required="required" />
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons hide-show-nav-search">close</i>
</div>
</form>
</div>
</div>
</nav>
<aside>
<div class="left-sidebar-overlay"></div>
<div class="left-sidebar z-depth-3">
<div class="md-logo-container hide-on-large-only theme-bg">
<a class="md-brand-logo white-text" href="#">WhoamiHub</a>
</div>
<div class="left-sidebar-body">
<div class="current-subscription">
<table>
<tbody>
<tr>
<td class="center">
<span class="current-plan">Business</span>
<span class="price">$49/month</span>
</td>
<td class="center">
UPGRADE
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<ul class="leftside-navigation">
<li class="navigation">Menu</li>
<li>
<a href="dashboard.html" class="menu waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Dashboard">
<i class="material-icons left-icon">dashboard</i>Dashboard
</a>
</li>
<li>
<a href="javascript:void(0)" class="collapsible-label1 waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Material UI">
<i class="material-icons left-icon">build</i>
<i class="material-icons right-icon">arrow_drop_down</i>Material UI
</a>
<ul class="collapsible-body">
<li>
Buttons
</li>
<li>
Breadcrumbs
</li>
<li>
Collections
</li>
<li>
Collapsibles
</li>
<li>
Dropdown
</li>
<li>
Tabs
</li>
<li>
Pagination
</li>
<li>
Preloader
</li>
<li>
Toasts
</li>
<li>
Tooltip
</li>
<li>
Waves
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="javascript:void(0)" id="collapsed-left-sidebar" class="toggle-icon-left-sidebar waves-effect waves-default">
<i class="right material-icons">keyboard_arrow_left</i>
</a>
</div>
</div>
</aside>
</div>
)
}
}
export default Navigation;
Footer.js
import React from 'react';
class Footer extends React.Component {
render() {
return (
<div>
<footer class="page-footer">
<div class="footer-copyright">
<div class="left">© materialcss</div>
<div class="right"><i class="material-icons">arrow_upward</i></div>
</div>
</footer>
</div>
)
}
}
export default Footer;

return (
<div>
<footer class="page-footer">
class is a reserved JS keyword. You must use className instead --
<footer className="page-footer" />

import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div className="col s12 m6">
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
This is a link
This is a link
</div>
</div>
</div>
)
}
}
export default ArticleCard;

How to get the "id" of moving sortable UIKit 3 element using JavaScript?

I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!

If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html

Jquery event.preventDefault() not working

I want my menu to show and hide list items on click by default they are hide. The problem is my menu is generated in admin section so it auto assigns url of website to it if i set URL field of particular link to null in menu options. so when i click it reloads home page.
What i want is that when i click any parent li it should stop generating default event so used prevent default. but in my case it is not working and it reloads the page after showing list items of there parent.
Here is a fiddle
Fiddle
Html
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Burlington Mall, MA</span>
</li>
<li class=" "><span class="menu-title">Burlington Mall, MA - Cart</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Brunswick Square Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Garden State Plaza, NJ</span>
</li>
<li class=" "><span class="menu-title">Menlo Park Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Ocean County Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Rockaway Townsquare, NJ</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Galleria at White Plains, NY</span>
</li>
<li class=" "><span class="menu-title">Manhattan, NY-Toys 'R' Us </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">CrabTree Valley, NC</span>
</li>
<li class=" "><span class="menu-title">Fayetteville, NC</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}

Here is a working example: http://jsfiddle.net/hk1w89zw/
Not sure what you were trying to acheive with the id prop. In general it's better to set the onClick event on a link (<a>-tag) instead of the li. and use following jQuery code:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});

maybe you want something like this
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});

Catch the event when its trigger out
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}

I have to admit that I got your code wrong.
Here is a https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin).
First you don't have a list with the id "#li_menu169". Add it to the ul element
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
Later on you're showing and hiding the same elements which is a bit confusing. Therefore I would recommend hiding all inner elements first and than showing the inner elements of "this" stuff.
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
Within the JSbin it is working as you expect.