Incrementing input value - What am I doing wrong here?

Incrementing input value - What am I doing wrong here? - javascript

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>

Related

laravel 8 don't worked after admin

I tried to add so that the admin can this connected in / login and that when he connects alone he has access 127.0.0.1:8000/dashboard/home and only him has access
welcome.blade.php
```
<div class="row">
<div class="col-lg-8">
<div class="row">
#if (count($categories) > 0)
#foreach ($categories as $category)
<div class="col-lg-12">
<!-- second section -->
<a href="{{route('category.overview', $category->id)}}">
<h4 class="text-white bg-info mb-0 p-4 rounded-top">
{{$category->title}}
</h4>
</a>
<table
class="table table-striped table-responsive table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">Forum</th>
<th scope="col">Topics</th>
<!-- <th scope="col">Posts</th>
<th scope="col">Latest Post</th> -->
</tr>
</thead>
<tbody>
#if (count($category->forums) > 0)
#foreach ($category->forums as $forum)
<tr>
<td>
<h3 class="h5">
{{$forum->title}}
</h3>
<p class="mb-0">
{!!$forum->desc!!}
</p>
</td>
<td><div>{{$forum->discussions->count()}}</td>
</tr>
#endforeach
#else
<p> 0 Forums found in this category</p>
#endif
</tbody>
</table>
</div>
#endforeach
#else
<h1>No Forum categories found</h1>
#endif
</div>
</div>
<div class="col-lg-4">
<aside>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Online</h4>
<ul class="list-unstyled mb-0">
#if (count($users_online) > 0)
#foreach ($users_online as $user)
<span class="badge badge-pill badge-primary">{{$user->name}}</span>
#endforeach
#endif
</ul>
</div>
<div class="card-footer">
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Statistics</h4>
<dl class="row">
<dt class="col-8 mb-0">Total Categories:</dt>
<dd class="col-4 mb-0">{{$totalCategories}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Forums:</dt>
<dd class="col-4 mb-0">{{$forumsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Topics:</dt>
<dd class="col-4 mb-0">{{$topicsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total members:</dt>
<dd class="col-4 mb-0">{{$totalMembers}}</dd>
</dl>
</div>
<div class="card-footer">
<div>Newest Member</div>
<div>{{$newest->name}}</div>
</div>
</div>
</aside>
</div>
</div>
</div>
```
dashboard.blade.php
``` <body>
<section id="container" class="">
#include('admin.header')
<aside>
<div id="sidebar" class="nav-collapse">
<ul class="sidebar-menu">
<li class="active">
<a class="" href="/dashboard/home">
<i class="icon_house_alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="fa fa-edit"></i>
<span>Actions</span>
<span class="menu-arrow arrow_carrot-right"></span>
</a>
<ul class="sub">
<li><a class="" href="{{route('category.new')}}">Create Category</a></li>
<li><a class="" href="{{route('forum.new')}}">Create Forum</a></li>
</ul>
</li>
<li>
<a class="" href="/dashboard/users">
<i class="fa fa-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a class="" href="{{route('categories')}}">
<i class="fa fa-users"></i>
<span>Categories</span>
</a>
</li>
<li>
<a class="" href="{{route('forums')}}">
<i class="fa fa-users"></i>
<span>Forums</span>
</a>
</li>
</ul>
</div>
</aside>
<div id="app">
#yield('content')
</div>
</section>
{{-- ckeditor --}}
<script>
CKEDITOR.replace( 'editor1' );
</script>
<script>
$(function() {
$(".knob").knob({
'draw': function() {
$(this.i).val(this.cv + '%')
}
})
});
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true
});
});
$(function() {
$('select.styled').customSelect();
});
$(function() {
$('#map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: gdpData,
scale: ['#000', '#000'],
normalizeFunction: 'polynomial'
}]
},
backgroundColor: '#eef3f7',
onLabelShow: function(e, el, code) {
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
}
});
});
```
ressource/views/admin/pages/home.blade.php
```
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
<div class="flash-message">
#if(\Session::has('message'))
<p class="alert
{{ Session::get('alert-class', 'alert-success') }}">{{Session::get('message') }}</p>
#endif
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-cloud-download"></i>
#if ($categories->count() > 0)
<div class="count">{{$categories->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Categories</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-users"></i>
#if ($users->count() > 0)
<div class="count">{{$users->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Users</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box dark-bg">
<i class="fa fa-question"></i>
#if ($forums->count() > 0)
<div class="count">{{$forums->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Forums</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-comment"></i>
#if ($topics->count() > 0)
<div class="count">{{$topics->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Topics</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-flag-o red"></i><strong>Registered Users</strong></h2>
<div class="panel-actions">
<i class="fa fa-rotate-right"></i>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="panel-body">
<table class="table bootstrap-datatable countries">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Rank</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#if (count($users)> 0)
#foreach ($users as $user)
<tr>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->rank}}</td>
<td><i class="fa fa-eye text-success"></i></td>
<td><form action="{{ route('user.delete', ['id' => $user->id]) }}" method="POST" >
#csrf
<input type="submit" class="btn btn-sm btn-danger" value="Delete">
</form></td>
</tr>
#endforeach
#endif
</tbody>
</table>
{{ $users->links() }}
</div>
</div>
</div>
</div>
</div>
</section>
</section>
#endsection ```
home.blade.php
``` #extends('layouts.app')
#section('content')
<section class="content">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" src="{{asset('/images/profile.png')}}" alt="User profile picture">
</div>
<h3 class="profile-username text-center">{{auth()->user()->name}}</h3>
<p class="text-muted text-center">{{auth()->user()->telegram}}<span class="badge badge-success">{{auth()->user()->skills}}</span></p>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Joined</b></br>
<b>Last seen</b></br>
<b>Reaction score</b></br>
<b>Total sell</b></br>
<b>Total purchase</b></br>
<b>Messages</b> <a class="float-right">{{count(auth()->user()->topics)}}</a>
</li>
{{-- <li class="list-group-item">
<b>Following</b> <a class="float-right">543</a>
</li>
<li class="list-group-item">
<b>Friends</b> <a class="float-right">13,287</a>
</li> --}}
</ul>
</div>
</div>
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">About Me</h3>
</div>
<div class="card-body">
{{auth()->user()->education}}
</br>Contact tg : {{auth()->user()->telegram}}
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Latest activity</a></li>
<li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="activity">
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="user image">
<span class="username">
{{auth()->user()->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Shared publicly - {{$latest->created_at}}</span>
</div>
#if ($latest_user_post)
<p>
{{$latest_user_post->desc}}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <p>
<i class="fas fa-share mr-1"></i> Share
<i class="far fa-thumbs-up mr-1"></i> Like
<span class="float-right">
<a href="#" class="link-black text-sm">
<i class="far fa-comments mr-1"></i> Comments (5)
</a>
</span>
</p>
<input class="form-control form-control-sm" type="text" placeholder="Type a comment"> --}}
</div>
<div class="post clearfix">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="User Image">
<span class="username">
{{$latest->user->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Started a discussion - {{$latest->created_at}}</span>
</div>
#if ($latest)
<p>
{!!$latest->desc!!}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <form class="form-horizontal">
<div class="input-group input-group-sm mb-0">
<input class="form-control form-control-sm" placeholder="Response">
<div class="input-group-append">
<button type="submit" class="btn btn-danger">Send</button>
</div>
</div>
</form> --}}
</div>
</div>
<div class="tab-pane" id="timeline">
</div>
<div class="tab-pane" id="settings">
<form action="{{route('user.update', auth()->id())}}" method="POST" class="form-horizontal">
#csrf
<div class="form-group row">
<label for="inputEducation" class="col-sm-2 col-form-label">About you</label>
<div class="col-sm-10">
<textarea type="text" value="{{auth()->user()->education}}" class="form-control" name="education" id="inputEducation" placeholder="{{auth()->user()->education}}"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputSkills" class="col-sm-2 col-form-label">Skills</label>
<div class="col-sm-10">
<input type="text" value="{{auth()->user()->skills}}" class="form-control" name="skills" id="inputSkills" placeholder="Skills">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
```
web.php
use Illuminate\Support\Facades\Route;
Route::get('/', 'App\Http\Controllers\FrontendController#index');
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/new-topic', function () {
return view('client.new-topic');
});
Route::get('/category/overview/{id}', 'App\Http\Controllers\FrontendController#categoryOverview')->name('category.overview');
Route::get('/forum/overview/{id}', 'App\Http\Controllers\FrontendController#forumOverview')->name('forum.overview');
Route::get('dashboard/home', 'App\Http\Controllers\DashboardController#home');
Route::get('dashboard/category/new', 'App\Http\Controllers\CategoryController#create')->name('category.new');
Route::post('dashboard/category/new', 'App\Http\Controllers\CategoryController#store')->name('category.store');
Route::get('dashboard/categories', 'App\Http\Controllers\CategoryController#index')->name('categories');
Route::get('dashboard/categories/{id}', 'App\Http\Controllers\CategoryController#show')->name('category');
Route::get('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#edit')->name('category.edit');
Route::post('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#update')->name('category.update');
Route::get('dashboard/categories/delete/{id}', 'App\Http\Controllers\CategoryController#destroy')->name('category.destroy');
Route::get('dashboard/forum/new', 'App\Http\Controllers\ForumController#create')->name('forum.new');
Route::post('dashboard/forum/new', 'App\Http\Controllers\ForumController#store')->name('forum.store');
Route::get('dashboard/forums', 'App\Http\Controllers\ForumController#index')->name('forums');
Route::get('dashboard/forums/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum');
Route::get('dashboard/forums/edit/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum.edit');
Route::post('dashboard/forums/update/{id}', 'App\Http\Controllers\ForumController#update')->name('forum.update');
Route::get('dashboard/forums/delete/{id}', 'App\Http\Controllers\ForumController#destroy')->name('forum.destroy');
Route::get('client/topic/new/{id}', 'App\Http\Controllers\DiscussionController#create')->name('topic.new');
Route::post('client/topic/new', 'App\Http\Controllers\DiscussionController#store')->name('topic.store');
Route::get('client/topic/{id}', 'App\Http\Controllers\DiscussionController#show')->name('topic');
Route::post('client/topic/reply/{id}', 'App\Http\Controllers\DiscussionController#reply')->name('topic.reply');
Route::get('/topic/reply/delete/{id}', 'App\Http\Controllers\DiscussionController#destroy')->name('reply.delete');
Route::get('/updates', 'App\Http\Controllers\DiscussionController#updates');
Route::post('user/update/{id}', 'App\Http\Controllers\UserController#update')->name("user.update");
Route::get('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#show');
Route::post('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#destroy')->name('user.delete');
Route::prefix('admin')->group(function() {
Route::get('/login','Auth\AdminLoginController#showLoginForm')->name('admin.login');
Route::post('/login', 'Auth\AdminLoginController#login')->name('admin.login.submit');
Route::get('logout/', 'Auth\AdminLoginController#logout')->name('admin.logout');
Route::get('/', 'Auth\AdminController#index')->name('admin.dashboard');
}) ;
UserController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function update(Request $request, $id)
{
$input = $request->all();
$user = User::find($id);
$user->fill($input)->save();
toastr()->success('Your details have been updated successfully!');
return back();
}
}
```
HomeController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Discussion;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
$latest_user_post = Discussion::where('user_id', auth()->id())->latest()->first();
$latest = Discussion::latest()->first();
return view('home', compact('latest_user_post', 'latest'));
}
}
```
But since I made his page 127.0.0.1:8000/dashboard/home is white and I have errors when I create an account I have a first error:
Trying to get property 'user' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
if I comment it I have another error that appears it is this:
Trying to get property 'created_at' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
Etc... I have had errors like this since I tried to make only the admin can this connect to the dashboard. I am a beginner I do not know how to adjust it, I am not sure I also have a route error. I tried to follow different tutorial on google to learn laravel until it was okay, if someone can help me and explain the problem it would be kind.

receive multiple div id from .parentsUntil()

Need to find id from multiple div what found by .parentsUntil() method (for a future draw and send ajax)
This is possible to use .parentsUntil for this.
Have script like this
$(document).on('change', ':checkbox', (function(e) {
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container-fluid');
console.log(productUntilContainer);
/*
if ($(this).is(":checked")) {
prod.remove()
} else {
prod.remove()
}*/
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid" id="product-list-container">
<div id="progress" class="in-progress">In progress
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/7.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №7 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #4 en : 3043
<br> пар #3 en : 9740
<br> пар #3 en : 8907
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1172.00</del></span>
</p>
<p class="product-price">$2211.00</p>
<p class="manufacturer">Manufacturer #1</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="112">
<label class="custom-control-label" for="112"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="114">
<label class="custom-control-label" for="114"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
<div id="complete" class="complete">Complete
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="111" checked="">
<label class="custom-control-label" for="111"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/no_img.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Pr223 №2 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #1 e : Beetle
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$421.00</del></span>
</p>
<p class="product-price">$115.00</p>
<p class="manufacturer">Manufacturer #3</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="113" checked="">
<label class="custom-control-label" for="113"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
</div>

It's not exactly easy to tell what it is you want to happen, or what problem you're having, but if you want to get a list of ids from your .productsUntil list, take this as an example:
$('button').on('click', function() {
console.log('hello world');
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container');
console.log(productUntilContainer.length);
const ids = [];
productUntilContainer.each(function() {
ids.push($(this).attr('id'));
});
console.log(ids);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="one">
<div id="two">
<div id="three">
<div id="product">
<button>click</button>
</div>
</div>
</div>
</div>
</div>

jQuery remove text from h1

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

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!

We Keep Coding

JavaScript is the programming language of the Web.

Incrementing input value - What am I doing wrong here? - javascript

Related

laravel 8 don't worked after admin

receive multiple div id from .parentsUntil()

jQuery remove text from h1

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

jQuery "on" event delegation not working with AJAX call

Categories

Resources