Problem
I'm currently implementing non-refresh page loading in my website, and I am using ajax to load the page accordingly to the content section of my website when a user selects a page on the sidebar.
However, when I try to load a page, it loses all of its Bootstrap functionality (such as drop-downs, toggleables, etc') and the DataTables don't load either.
Example: I have a function that adds the class 'active' to the initial tab which works if I load the page through the URL.
However, it does not seem to get called through the dynamic page loading method that gets triggered when a person clicks on the page on the menu. Also, the DataTables won't load.
This is the no-refresh page-loading part after attempts to remedy the issue:
$(document).on('click', 'a[name=user], a[name=moderator], a[name=admin], a[name=groups]', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.get('preloader.html', function(html) {
$("#inner_content").append(html);
});
if(location.pathname != href) {
loadContent( '#css', href, '#css' );
loadContent( '#script_elements', href, '#script_elements' );
window.history.pushState('page2', 'Title', href);
}
loadContent( '#inner_content', href, '#inner_content' );
});
//Content Loading Function
function loadContent(target, url, selector) {
$.ajax({
url: url,
success: function(data,status,jqXHR) {
$(target).empty();
$(target).html($(data).find(selector).addBack(selector).children());
}
});
}
The structure of the page that should be loaded is something along those lines (blade):
#extends('user.layouts.main')
#section('extra_css')
<style>
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.dataTables_length !important {
margin-left:20px;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.colorpicker-alpha {display:none !important;} .colorpicker{ min-width:128px !important;}
</style>
#endsection
#section('title', 'Group')
#section('content')
<div class="row" id="content">
<div class="col">
<div class="tabs tabs-dark rounded-0 shadow">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#group1" name="groupSelector" data-toggle="tab" value="{{ $user->group->id }}">{{ $user->group->name }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="group1">
<div id="#{{ $user->id }}" class="tab-pane active ">
<div class="row">
<div class="col-xl-12">
<section class="card">
<header class="card-header">
<div class="card-actions">
<div class="dropdown-menu" role="menu">
<a class="dropdown-item text-1 popup-with-zoom-anim ws-normal" href="#chooseRole">Choose Role</a>
<a class="dropdown-item text-1" href="#" id="admin">Admin</a>
<a class="dropdown-item text-1" href="#" id="moderator">Moderator</a>
<a class="dropdown-item text-1" href="#" id="user">User</a>
</div>
<i id="loading" class="fa fa-spinner fa-spin fa-fw"></i>
<a href="#" class="card-action-toggle" data-card-toggle></a>
</div>
</header>
<div class="card-body pt-0" style="margin-top:-13px;">
<table class="table table-bordered table-striped" id="{{ $user->id }}" style="border: 1px solid #E3E4E7;" name="usersTable">
<thead>
<tr>
<th>#</th>
<th>{!! __('groups.user') !!}</th>
<th>{!! __('groups.rank') !!}</th>
<th>{!! __('groups.lastOn') !!}</th>
<th>{!! __('groups.activity') !!}</th>
<th>{!! __('groups.xyz') !!}</th>
<th></th>
</tr>
</thead>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('bottom_elements')
<script>
$(document).ready(function() {
var id = $(this).attr('id');
var usersTable = $('table[name=usersTable]#' + id).DataTable({
autoWidth: false,
"processing": true,
"serverSide": true,
"paging": true,
"fnInitComplete": function() {
$('#loading').hide();
},
"order": [ 2, 'desc' ],
dom: "<'row mt-0 mb-0 pt-4 pb-0'<'col-sm-12 col-md-5 pt-0 mb-0 pb-0 'B<'pt-3 mt-4 mb-0'l>><'col-sm-12 mt-4 mb-0 pt-0 col-md-7'p>>",
"buttons": [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV'
}
],
"ajax":{
"url": "/groups/populate",
"type": "POST",
"dataType": "json",
"headers": { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
"data": function ( d ) {
d.group = group;
return $.extend( {}, d, {
group: group,
type: 'members'
});
},
error: function (xhr, error, thrown) {
console.log(xhr);
}
},
"columns": [
{ "data": "user" },
{ "data": "rank" },
{ "data": "lastOn" },
{ "data": "activity" },
{ "data": "xyz" }
]
});
});
$('.dataTables_processing').addClass('dataTables_empty');
$('.dt-button').addClass('btn btn-default btn-sm');
$('.tab-content div:first').addClass('active');
});
</script>
#endsection
The main file looks like so:
<!doctype html>
<html class="fixed">
#include('user.includes.head')
<section id="css">
#yield('extra_css')
</section>
<body>
<section class="body">
#include('user.layouts.navbar')
<div class="inner-wrapper">
#include('user.layouts.sidebar')
<section role="main" class="content-body">
<header class="page-header">
<h2 id="title">#yield('title')</h2>
</header>
#if (session('message_error'))
<div class="row message">
<div class="col-xl-12">
<div class="alert alert-danger">
<strong>Error:</strong> {{ session('message_error') }}
</div>
</div>
</div>
#endif
<div id="innerContent">
#yield('content')
</div>
</section>
</div>
</section>
#include('user.includes.footer')
<div id="bottom_elements">
#yield('bottom_elements')
</div>
</body>
</html>
What have I tried so far?
I tried to change the sequence of the loadContent function calls, however, the functionality of the bootstrap classes still did not work (such as drop-downs, etc').
What am I looking for?
I need that when you click on the menu to load the page (groups), it will load the page and retain all the content of it as well as the bootstrap functionality, as it does not get loaded once the content of the target page loads.
Thanks.
I would suggest including jQuery and bootstrap .js files in your page file, the file that is being loaded dynamically.There is possibly a better way of doing this but this works fine.
Related
I'm having some problem with vue.js
I'm learning how to create components and I'm making some components that I want to use for a wordpress theme. I'm using the REST API to get the contents and pass the response data from axios to the UI managed by vue and vue coponents. I'm getting always this error:
Property or method "navlink" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
This happen after I've created a new component for the nav menu, I think the code is correct but any help will be appreciated. I have the home.php file that will be used for the homepage as a template using Template Name: on top of the file and inside the header.php file I've removed the old menu and I've placed a vue template. I will do the same for the footer, but how I can fix errors that are caused by widgets or wordpress generated inline scripts? How I can fix my error ?
// this is the code of header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container-fluid p-0" id="theme-vue">
<theme-nav v-for="nav in navData" :navlink="nav.post_title"></theme-nav>
<script type="text/x-template" id="theme-nav">
<nav class="navbar navbar-expand-md fixed-top main-nav">
<button class="navbar-toggler hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class="navbar-brand ml-auto" href="#">
<img src="" width="auto" height="75">
</a>
<div class="collapse navbar-collapse navbar-content" id="navbar-content">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link top" href="#">{{ navlink }}</a>
</li>
</ul>
</div>
</nav>
</script>
// this is the code of home.php
<?php /* Template Name: Homepage */ ?>
<?php get_header(); ?>
<uptheme-cover v-for="post in postData" :title="post.title.rendered" :src="post._embedded['wp:featuredmedia'][0].source_url"></uptheme-cover>
<script type="text/x-template" id="uptheme-cover">
<div class="row container-cover p-0" style="height:100vh;">
<div class="parallax" :data-parallax-image="src"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 p-4">
<h1>{{ title }}</h1>
</div>
</div>
<div class="overlay"></div>
</div>
</script>
<?php //get_footer(); ?>
// this is the footer, it will cause error in vue because of the google map iframe footer widget and wordpress footer scripts
<?php wp_footer(); ?>
<div class="row p-0 footer">
<?php if( is_active_sidebar('footer-map') ): ?>
<?php dynamic_sidebar('footer-map'); ?>
<?php endif; ?>
<div class="col-sm-12 col-md-12 col-lg-12 p-0 text-center credits-col">
<small><?php _e('Powered by '); ?><a class="" href=""><?php _e('UpAdv')?></a></small>
</div>
</div>
</div>
// this code is placed inside the main.js file of my theme
Vue.component('theme-nav',{
template: '#theme-nav',
props: {
//navId: Number
navlink: String,
}
});
Vue.component('theme-cover',{
template: '#theme-cover',
props: {
title: String,
src: String
}
});
const app = new Vue({
el: '#theme-vue',
data: {
postData: [],
navData: []
},
mounted: function(){
this.getMenu();
this.getIndex();
},
created: function(){
this.initParallax();
},
methods: {
initParallax: function(){
const parallax = new universalParallax();
},
getMenu: function(){
// this line didn't work, I need to get the custom logo but I don't know how with REST API?
axios.get('wp-json/theme/v1/logo').then( (response) => {
console.log(response);
});
axios.get('wp-json/theme/v1/menu').then( (response) => {
console.log(response);
response.data.forEach( (item, i) => {
this.navData.push(item);
});
});
},
getIndex: function(){
axios.get('wp-json/wp/v2/pages/?slug=home&_embed').then( (res) => {
console.log(res.data);
res.data.forEach( (item, i) => {
this.postData.push(item);
console.log(item._embedded['wp:featuredmedia'][0].source_url);
});
});
}
}
});
Try adding the navlink under data like
data: {
postData: [],
navData: [],
navlink:''
}
I am searching using algolia search. Everything works but instead of the search result to displaying in columns it's only showing in a list format
This is the display in normal html code
but when algolia search result is used to populate the container using the code below this is what it shows
I have this html file
<div class="row isotope-grid" id="hits" >
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
this is the JS format
var search = instantsearch({
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: `
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="images/product-03.jpg" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
Only Check Trouser
</a>
<span class="stext-105 cl3">
$25.50
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
`
,
}
})
);
search.start();
I have been able to rule out the css and discovered that ALgolia is overriding the display. How do I modify the code to show a custom display of columns instead of the default Algolia list display?
after implementing Dipen Shah's answer, it partially worked and produced to wierd overlap upon rendering but the overlapp disappears if the window is width or height is decreased and return back to full size.
here is what the overlap looks like
Your code is missing very crucial function call which is why your search result is not being rendered properly.
Remove isotope-grid class from div#hits
<!-- Load more -->
<div class="row" id="hits">
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
Initialize hits div with isotope grid after search result is render.
search.on('render', function(){
$grid = $("#hits");
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
After this changes, search result will be rendered correctly.
Explanation:
In the original theme file, on page load event script calls following call to initialize grids.
$(window).on('load', function () {
var $grid = $topeContainer.each(function () {
$(this).isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
});
When algolia widget renders search result, your template sets correct css classes but you still need to initialize isotope grid for your search result container. My code does exactly that by intercepting render event of the widget.
Problem
I don't think you're using the correct method for a template.
The docs for Aloglia gives this example:
Javascript:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
Solution
This means you need something like this: (replacing the placeholders accordingly)
Javascript:
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: document.getElementById('hit-template').innerHTML,
}
})
);
search.start();
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{image}}" alt="{{name}}">
Quick View
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
${{product_name}}
<span class="stext-105 cl3">${{price}}</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</script>
I am using cubic portfolio plugin and in want to dynamically load more element as user click on the load more button.
it does specify option like loadMore: 'selector' , loadMoreAction:'Click'.
but i can't seem to find the load more click call Back function.
so i put my own click function to load more element in form of html from server using ajax, and i have used :
jQuery("#grid-container").cubeportfolio('appendItems','your HTML element);
to append the elements , but it is giving me error cubicportfolio is not initialized.
but it is already inilialized
initialize cubic portfolio:
var $cubesingle = $('#js-grid-single');
$cubesingle.cubeportfolio({
filters: '#js-single-filter',
loadMore: '#js-single-more',
loadMoreAction: 'click',
layoutMode: 'grid',
mediaQueries: [{
width: 1500,
cols: 4
}, {
width: 1100,
cols: 3
}, {
width: 800,
cols: 3
}, {
width: 670,
cols: 2
}, {
width: 320,
cols: 1
}],
defaultFilter: '*',
animationType: 'quicksand',
gapHorizontal: 15,
gapVertical: 15,
gridAdjustment: 'responsive',
caption: 'fadeIn',
displayType: 'sequentially',
displayTypeSpeed: 100,
// singlePage popup
singlePageDelegate: '.cbp-singlePage',
singlePageDeeplinking: true,
singlePageStickyNavigation: true,
singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
singlePageCallback: function(url, element) {
// to update singlePage content use the following method: this.updateSinglePage(yourContent)
var t = this;
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
timeout: 30000
})
.done(function(result) {
t.updateSinglePage(result);
})
.fail(function() {
t.updateSinglePage('AJAX Error! Please refresh the page!');
});
}
});
my own 'click' function to load element:
$('#js-single-more').on('click',function (event) {
console.log('clicked');
$.ajax({
type: 'POST',
url:'/ajaxImages/',
dataType: 'html',
data: {
'nImages': $('div.cbp-item').length,
'csrfmiddlewaretoken': csrf
},
success: function (data) {
console.log(data);
//$('.cbp-wrapper').append(data);
jQuery("#js-single-more").cubeportfolio('appendItems',data);
//console.log($('#card'));
}
});
});
html:
<div id="js-grid-single" class="cbp cbp-l-grid-inline light-gallery cbp-caption-active cbp-caption-fadeIn cbp-ready" style="height: 262px;"><div class="cbp-wrapper-outer"><div class="cbp-wrapper">
<div class="cbp-item identity package" style="width: 380px; left: 0px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
<div class="cbp-caption-defaultWrap"> <img src="/media/p1.jpg" alt=""> </div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<p>img_1</p>
</div>
</div>
</div>
</a> </div></div>
<div class="cbp-item package video" style="width: 380px; left: 395px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
<div class="cbp-caption-defaultWrap"> <img src="/media/p2.jpg" alt=""> </div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<p>img_2</p>
</div>
</div>
</div>
</a> </div></div>
<div class="cbp-item identity package video" style="width: 380px; left: 790px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
<div class="cbp-caption-defaultWrap"> <img src="/media/p3.jpg" alt=""> </div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<p>img_3</p>
</div>
</div>
</div>
</a> </div></div>
</div></div></div>
<div class="space30"></div>
<div id="js-single-more" class="text-center">
<a class="cbp-l-loadMore-link btn" rel="nofollow">
<span class="cbp-l-loadMore-defaultText">LOAD MORE</span>
<span class="cbp-l-loadMore-loadingText">LOADING...</span>
<span class="cbp-l-loadMore-noMoreLoading">NO MORE WORKS</span>
</a>
</div>
A really simple way is to access the classed '.cbp-loadMore-link' element itself:
$('.cbp-l-loadMore-link').click();
This behaves triggers all of the built in 'load-more' behavior you would get with a click.
I am using a jquery function for toggle effect for an icon so when I click on that icon the div will move to left and hide.. so only the icon will show on the page and when I click on that icon again the div will appear sliding from left I am able to achieve the function but the following function
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x"></i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for any replies in advance.
Just found out that you did not add the class active while pageload but yet displaying the div.
Change the below line
<div class="demo_changer" style="padding-top:13px">
as
<div class="demo_changer active" style="padding-top:13px">
While loading, your webpage shows the div but does not have the class active in the div tag
and while clicking for the first time, as per your script, it finds out that there is no active class in the tag and then adds the class active and your div is already visible... I hope you understood..
The issue may be that, the margin in <div class="row"> is overlapping the icon div, it might be a reason why clicking on that area does not trigger "click" event -- See image below
Try Adding css style as mentioned in image below -
You need to use position: absolute; or position: relative; for the .demo_changer class so that you can animate its position.
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
.demo_changer {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x">icon</i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
You need too extra styles for animation block .
.demo_changer {
position:relative
}
Here is working example.
https://jsbin.com/xikamitole/1/edit?html,css,js,output
Hope this helps.
Try This:
$(document).on('click', '.demo-icon', function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
I am using the official semantic ui package for my Meteor web app and getting this error whenever I try and navigate through the vertical menu. This is causing my flowrouter routes to act wonky and not display. Thus, killing my mobile experience :(. But everything works perfect on desktop.
Error: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.
The template:
<template name="_nav">
<div>
<div class="ui grid large menu computer only">
<div class="item">
<img src="/cook.png" href="/">
</div>
<a href="/" class="item {{isActiveRoute name='home'}}">
Home
</a>
<a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
About Us
</a>
<a href="/team" class="item {{isActiveRoute name='team'}}">
Team
</a>
<a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
Contacts
</a>
<div class="ui large right menu">
{{#if isInRole 'admin'}}
<a href="/admin" class="item {{isActiveRoute name='admin'}}">
Admin
</a>
{{/if}}
<a class="ui item">
{{> loginButtons}}
</a>
</div>
</div>
<div class="ui grid secondary menu mobile tablet only">
<div class="ui container">
<a class="item toggle-menu">
<i class="big sidebar icon"></i>
</a>
<div class="ui sidebar vertical menu">
<a href="/" class="item {{isActiveRoute name='home'}}">
Home
</a>
<a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
About Us
</a>
<a href="/team" class="item {{isActiveRoute name='team'}}">
Team
</a>
<a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
Contacts
</a>
{{#if isInRole 'admin'}}
<a href="/admin" class="item {{isActiveRoute name='admin'}}">
Admin
</a>
{{/if}}
</div>
<div class="ui secondary right menu">
<a class="ui item">
{{> loginButtons}}
</a>
</div>
</div>
</div>
</div>
</template>
Events:
Template._nav.events({
'click .toggle-menu': function () {
$('.ui.sidebar')
.sidebar('toggle');
}
});
Routes (FlowRouter):
FlowRouter.route( '/' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'home',
footer: '_footer'
});
},
name: 'home'
});
FlowRouter.route( '/AboutUs' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'aboutus',
footer: '_footer'
});
},
name: 'aboutus'
});
FlowRouter.route( '/Team' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'team',
footer: '_footer'
});
},
name: 'team'
});
FlowRouter.route( '/Contacts' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'contacts_list',
footer: '_footer'
});
},
name: 'contacts'
});
FlowRouter.route( '/Admin' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'admin',
footer: '_footer'
});
},
name: 'admin'
});
CSS (if it matters):
.ui.menu .active.item {
background-color: #E0F1FF !important;
color: Black !important;
}
.ui.dropdown.item {
padding: 0;
}
.ui.dropdown.item:hover {
background-color: rgba(0, 0, 0, 0.00) !important;
}
.ui.menu {
margin: 0;
}
Again, this error only shows whenever I try and navigate with the vertical menu. I am also using the sach:db-admin package which is yogibens:admin package but for FlowRouter. Which uses twbs:bootstrap for styling. This might be causing some issues but I am unsure.
Try putting a container ( or etc) around {{#each}} or {{#if}} fields. Theres a bug with issues reported on meteor's github page. Something along the lines of replacing blocks.
https://github.com/meteor/meteor/issues/2373