jQuery remove text from h1 - javascript

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});


you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

Related

Incrementing input value - What am I doing wrong here?

I'm attempting to increment the value of the input with the + / - buttons but can't figure out where my issue is that it is currently not doing anything. Any help is appreciated. I know that jquery now offers spinner functionality in their UI file but in this case it's not a possibility and it's out of my hands.
HTML:
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
JQUERY:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});

parent() method traverses to the immediate parent of the elements.
Instead of parent() you should use parents() or closest():
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
buttonMinus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>

Error with ui-sref

I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>

How to add side panel when using cached pages in Framework7?

I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>

According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});

jQuery "on" event delegation not working with AJAX call

I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>

Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

Categories