We Keep Coding

Set active class when page refreshes JQuery?

I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.
and my HTML code :
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
the way I intend to use location.reload
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});

Saving $(e.target).class('current') won't work. There is no .class() method...
It seems you wish to use the href to open the tab... But there is no href!
So I think you should use the data-tab.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})

Prevent from clicking, change class name, hide the highlight - jQuery

I have a three issue in this app.
First issue is that the show button doesn't change its name to "show offer" when the app is closed after we open it.
Second, the app doesn't prevent a user from clicking second and third button. He can click only one offer, but now the user can click on every.
Third, the user can highlight a new offer by clicking once, then he can hide the highlight, but cannot highlight it again and never. Appreciate any help.
//// hide offer before the Dom is loaded
//$('ul').hide()
$(document).ready(function() {
function showHideOffer() {
$('ul').slideToggle();
}
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOfferfunction() {
$('.showOffers').html('Show Offers');
});
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
</style>
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>

First Issue Solve : Checkout Here :
Change the code to
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
Instead Of :
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOffer);
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
function showHideOffer() {
$('ul').slideToggle();
}
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>

To Resolve your first issue modify your function like below
var ValuesShowOrHidden = 0;
$('.card').on('click', '.showOffers', showHideOffer, function () {
if (ValuesShowOrHidden == 0) {
$('.showOffers').html('Hide Offers');
ValuesShowOrHidden = 1;
}
else if (ValuesShowOrHidden==1) {
$('.showOffers').html('Show Offers');
ValuesShowOrHidden = 0;
}
});
For the Second Issue try the below modification in your function
$('li').on('click', 'button', function () {
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked ' + offerName + ' offer for ' + offerPrice + '!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
$('li').unbind("click");
});

Fix behavior of collapse/expand blocks

I use bootstrap 4 alpha 6 version. I have several blocks in my page. I want expand/collapse these blocks by clicking main button (id='expand-collapse'). Also every button has there own individual buttons which would open/close concrete block. Right know I use next js code and have strange behavior.
For example: I open first block by clicking first button, then I click main button (id='expand-collapse') to open other blocks. But in fact first block closed and other blocks opened. How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">OPEN/CLOSE FIRST</a>
<div class="collapse block" id="block-1">
FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN/CLOSE SECOND</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN/CLOSE THIRD</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
$(target).each(function() {
if ($(this).hasClass('show')) {
$(this).collapse('hide');
} else {
$(this).collapse('show');
}
});
});
});

That kind of behaviour is due to data-toggle attribute. Take that off from the main button and change the script to this-
HTML
<button id='expand-collapse' type="button" data-parent="#blocks" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
JQUERY:
$(function() {
var showAll = false;
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
//console.log('showAll=' + showAll);
$(target).each(function() {
if(showAll === false) {
$(this).collapse('show');
}
else {
$(this).collapse('hide');
}
});
if(showAll === false) {
showAll = true;
}
else {
showAll = false;
}
//console.log('showAll=' + showAll);
});
});

Change CSS of li tag which is inside div and ul tag : jQuery or JavaScript

This is my menu. I am using Metro UI template.
<div id="divMenu" class="fluent-menu" data-role="fluentmenu" data-on-special-click="specialClick">
<ul class="tabs-holder">
<li id="litabhome" class="active">Home</li>
<li id="litabmailings" class="">Mailing</li>
<li id="litabfolder" class="">Folder</li>
<li id="litabview" class="">View</li>
<li id="limasters" class="active">Masters</li>
</ul>
<div class="tabs-content">
<div class="tab-panel" id="tab_home" style="display: block;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button">
<span class="icon mif-envelop"></span>
Create<br />
message
</button>
<div class="tab-content-segment">
<button class="fluent-big-button dropdown-toggle">
<span class="icon mif-file-picture"></span>
<span class="label">Create<br />
element</span>
</button>
<ul class="d-menu" data-role="dropdown" style="display: none;">
<li>Message</li>
<li>Event</li>
<li>Meeting</li>
<li>Contact</li>
</ul>
</div>
<div class="tab-content-segment">
<button class="fluent-big-button">
<span class="mif-cancel"></span>
<span class="label">Delete</span>
</button>
</div>
</div>
<div class="tab-group-caption">Clipboard</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="tab-content-segment">
<button class="fluent-button"><span class="mif-loop"></span>Replay</button>
<button class="fluent-button"><span class="mif-infinite"></span>Replay all</button>
<button class="fluent-button"><span class="mif-loop2"></span>Forward</button>
</div>
<div class="tab-content-segment">
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Notebook-Save.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Folder-Rename.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Calendar-Next.png" /></button>
</div>
</div>
<div class="tab-group-caption">Reply</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="input-control text">
<input type="text" />
<button class="button"><span class="mif-search"></span></button>
</div>
<button class="fluent-button"><span class="icon-book on-left"></span>Address Book</button>
<div class="tab-content-segment">
<button class="fluent-button dropdown-toggle">
<span class="mif-filter on-left"></span>
<span class="label">Mail Filters</span>
</button>
<ul class="d-menu" data-role="dropdown">
<li>Unread messages</li>
<li>Has attachments</li>
<li class="divider"></li>
<li>Important</li>
<li>Broken</li>
</ul>
</div>
</div>
<div class="tab-group-caption">Search</div>
</div>
</div>
<div class="tab-panel" id="tab_masters" style="display: none;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button" id="btnStoreMaster">
<span class="icon mif-envelop"></span>
Store Master
</button>
</div>
</div>
</div>
</div>
</div>
When page loads, by default "Home" menu is showing with its content tab "tab_home".
Here, I have a tab content called "tab_masters" which has a button called 'btnStoreMaster". When user clicks this button, then it will be redirected to StoreMaster.aspx page.
Its redirecting, but its corresponding menu "Masters" is not highlighting. Again it shows the Home menu tab contents. How to make the focus in the clicked menu using JQuery or JavaScript?
This is my jQuery function,
$("#btnStoreMaster").click(function () {
$("#divMenu ul li").each(function () {
//alert($(this).attr("id"));
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else
$(this).removeClass("active");
})
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters")
$(this).css("display", "block");
else
$(this).css("display", "none");
})
});
Here, the menu css has changed, But I could not change its corresponding tab content display to block.

use this jQuery code:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#divMenu a').each(function () {
// and test its normalized href against the url pathname regexp
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});});
its take the location of current page and for each a tag if href equals location set active class
but you can already use this:
$(function () {
$("#btnStoreMaster").click(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#divMenu a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
}
})
})
i just adjudge you need
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
to do something.
this new cod will executing when clicking on tab, take the location or current page(StoreMaster.aspx) ,set active class and do what you want!
hope it work for you.

I achieved this by using the below code:
$("#divMenu > ul li").each(function () {
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else {
$(this).removeClass("active");}
})
$("#divMenu > div > .tab-panel").each(function () {
if ($(this).attr("id") == "tab_masters") {
$(this).css("display", "block");
}
else {
$(this).css("display", "none");
}
})

How to pass content to the next tab by jQuery?

I'm a beginner at jQuery. I would like to create selectable portlet, and when it was clicked then showed the same portlet in the second tab immediately.
This is my JavaScript Code.
$(function () {
$(".frame").sortable({
connectWith: ".frame",
handle: ".portlet-header",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
$(function () {
$(".frame").selectable({
stop: function () {
var result = $("#select-result").empty();
var add = $("#newExam").empty();
var count = 0;
$(".ui-selected", this).each(function () {
if (this.id > 0) {
result.append(this.id + " ");
count = count + 1;
}
});
add.append(count);
}
});
});
And this is my HTML code.
<div id="tabs">
<ul>
<li>Master</li>
<li>Add List <span id="newExam" class="badge" >0</span> </li>
</ul>
<div id="master" class="master">
<p>exam in the collection</p>
<br /><br />
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<div class="frame" style="align-content: center">
<div class="portlet portlet-count" id="1">
<div class="portlet-header">First</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="2">
<div class="portlet-header">Second</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="3">
<div class="portlet-header">Third</div>
<div class="portlet-content">test</div>
</div>
</div>
</div>
<div id="creation">
</div>
P.S. Master is the first tab, Creation is the second tab.