I need to save a value into localstorage thats already in localstorage and only increase that by 1
Save:
function checkklaar2() {
a = document.getElementById("eindgetal2").value;
if (a == "0") {
window.location.href = 'winnaar2.html';
var gewonnen2 = localStorage.getItem("setsgewonnen2");
localStorage.setItem("setsgewonnen2.2", gewonnen2.value + "1");
} else {}
}
View:
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
// Retrieve
document.getElementById("result1.1").innerHTML = localStorage.getItem("naamspeler1.1");
document.getElementById("result2.1").innerHTML = localStorage.getItem("naamspeler2.1");
document.getElementById("result1.2").value = localStorage.getItem("setsgewonnen1.2");
document.getElementById("result2.2").value = localStorage.getItem("setsgewonnen2.2");
document.getElementById("sets").value = localStorage.getItem("setstespelen");
document.getElementById("sets2").value = localStorage.getItem("setstespelen");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
Inputs on receive because it is not showing the value in the inputs on page 2:
HTML:
<h1 style="margin-left:15px;">Speler<div id="result1.1"></div> </h1>
<div class="list-block">
<ul>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets gewonnen</div>
<div class="item-input">
<input type="number" id="result1.2">
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets totaal</div>
<div class="item-input">
<input type="number" id="sets">
</div>
</div>
</li>
</ul>
</div>
</ul>
</div>
<h1 style="margin-left:15px;">Speler <div id="result2.1"></div></h1>
<div class="list-block">
<ul>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets gewonnen</div>
<div class="item-input">
<input type="number" id="result2.2">
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets totaal</div>
<div class="item-input">
<input type="number" id="sets2">
</div>
</div>
</li>
Thanks in advance!
I think you are searching for something like this:
localStorage.setItem("setsgewonnen2.2", parseInt(gewonnen2.value) + 1);
As normaly locall storage store everything as a string
Related
I have something that filters groups of cards on a page that works well, until I try to add section headers to each group. Ideally, I'd like all the section headers to disappear when my "no results" block is displayed.
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
$(".card-grid").show();
var selectedFilters = {};
$filterCheckboxes.filter(":checked").each(function () {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $(".card");
$.each(selectedFilters, function (name, filterValues) {
$filteredResults = $filteredResults.filter(function () {
var matched = false,
currentFilterValues = $(this).data("category").split(" ");
$.each(currentFilterValues, function (_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$(".card").hide().filter($filteredResults).show();
var all_hidden = true;
$(".card").each(function (index) {
if ($(this).is(":visible")) {
all_hidden = false;
document.getElementsByClassName("no-results")[0].style.display = "none";
document.getElementsByClassName("section-header")[0].style.display =
"block";
}
});
if (all_hidden) {
$(".card-grid").hide();
document.getElementsByClassName("no-results")[0].style.display = "block";
document.getElementsByClassName("section-header")[0].style.display = "none";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="topic" id="topic1" value="topic1"><label for="topic1">Topic 1
</li>
<li><input type="checkbox" name="topic" id="topic2" value="topic2"><label for="topic2">Topic 2</li>
<li><input type="checkbox" name="topic" id="topic3" value="topic3"><label for="topic3">Topic 3
</li>
</ul>
</div>
<div class="filter-section-content">
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="content-type" id="subfilter1" value="reads"><label for="subfilter1">subfilter1</label></li>
<li><input type="checkbox" name="content-type" id="subfilter2" value="linkedin"><label for="subfilter2">subfilter2</label></li>
<li><input type="checkbox" name="content-type" id="subfilter3" value="subfilter3"><label for="subfilter3">subfilter3</label>
</li>
</ul>
</div>
</div>
<p> </p>
<!--Cards-->
<!--Topic 1-->
<p class="section-header">Topic 1</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic1 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
<!--New Card-->
<div class="card" data-category="topic1 subfilter3">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
</div>
<!--Topic 2-->
<p class="section-header">Topic 2</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic2 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 2</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body"></div>
</div>
</div>
</div>
<div class="no-results">
No Results
</div>
I know that the [0] after the line that gets the class name for the section headers is only pulling in the first, but when I remove that then I get a "style is undefined" error. Shouldn't it be getting every element with the specified class name?
I use $(this).parent().prev(".section-header") to find out the header to set it show/hide when $(".card").each(function (index).
And by default, we should hide "no-results". Just show it if all_hidden = true.
So basically, I updated your codes into the below codes:
var all_hidden = true;
$(".card").each(function(index) {
if ($(this).is(":visible")) {
all_hidden = false;
// Show header if the card is visible
$(this).parent().prev(".section-header").show();
} else {
// Hide header if the card is invisible
$(this).parent().prev(".section-header").hide();
}
});
if (all_hidden) {
document.getElementsByClassName("no-results")[0].style.display = "block";
} else {
document.getElementsByClassName("no-results")[0].style.display = "none";
}
You can see full of demo here:
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
$(".card-grid").show();
var selectedFilters = {};
$filterCheckboxes.filter(":checked").each(function () {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $(".card");
$.each(selectedFilters, function (name, filterValues) {
$filteredResults = $filteredResults.filter(function () {
var matched = false,
currentFilterValues = $(this).data("category").split(" ");
$.each(currentFilterValues, function (_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$(".card").hide().filter($filteredResults).show();
var all_hidden = true;
$(".card").each(function (index) {
if ($(this).is(":visible")) {
all_hidden = false;
// Show header if the card is visible
$(this).parent().prev(".section-header").show();
} else {
// Hide header if the card is invisible
$(this).parent().prev(".section-header").hide();
}
});
if (all_hidden) {
document.getElementsByClassName("no-results")[0].style.display = "block";
} else {
document.getElementsByClassName("no-results")[0].style.display = "none";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="topic" id="topic1" value="topic1"><label for="topic1">Topic 1
</li>
<li><input type="checkbox" name="topic" id="topic2" value="topic2"><label for="topic2">Topic 2</li>
<li><input type="checkbox" name="topic" id="topic3" value="topic3"><label for="topic3">Topic 3
</li>
</ul>
</div>
<div class="filter-section-content">
<div class="filter-container">
<ul class="filters">
<li><input type="checkbox" name="content-type" id="subfilter1" value="reads"><label for="subfilter1">subfilter1</label></li>
<li><input type="checkbox" name="content-type" id="subfilter2" value="linkedin"><label for="subfilter2">subfilter2</label></li>
<li><input type="checkbox" name="content-type" id="subfilter3" value="subfilter3"><label for="subfilter3">subfilter3</label>
</li>
</ul>
</div>
</div>
<p> </p>
<!--Cards-->
<!--Topic 1-->
<p class="section-header">Topic 1</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic1 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
<!--New Card-->
<div class="card" data-category="topic1 subfilter3">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 1</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body">
</div>
</div>
</div>
</div>
<!--Topic 2-->
<p class="section-header">Topic 2</p>
<div class="card-grid">
<!--New Card-->
<div class="card" data-category="topic2 subfilter1">
<div class="card-front-wrap">
<div class="card-front">
<p class="label">Topic 2</p>
<h1>Title</h1>
</div>
</div>
<div class="card-overlay">
<h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
<div class="card-body"></div>
</div>
</div>
</div>
<!-- default hide no results -->
<div class="no-results" style="display: none">
No Results
</div>
Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:
I have created a jquery menu as I have links in my li, which is generated by a framework and can not have control over it.
I have created the snippet for my code. It works fine on document load. No issues.
I have another bootstrap button for sign in and sign up.
As i click on button it breaks my menu which created with jQuery and show all links without nesting. It seems like it calls another event and it breaks it.
It will be great help if some one help to tackle this sort of issue.
Thanks.
V
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
var listItems = $("ul.nav li div");
listItems.each(function() {
var contentIds = $(this).attr("id");
if(contentIds != 'homeLink' &&
contentIds != 'jobBoardLink' &&
contentIds != 'contentLink10000001' &&
contentIds != 'contentLink20000002' &&
contentIds != 'contentLink30000003' &&
contentIds != 'contentLink40000004'){
$(this).parent().appendTo('#contentLink10000001');
if(contentIds.indexOf('contentLink2') !== -1){
$(this).parent().appendTo('#contentLink20000002');
}
if(contentIds.indexOf('contentLink3') !== -1){
$(this).parent().appendTo('#contentLink30000003');
}
if(contentIds.indexOf('contentLink4') !== -1){
$(this).parent().appendTo('#contentLink40000004');
}
}
});
$('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href');
var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length;
$("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
$("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>');
});
.navbar-nav> li{
float: left;
position:relative;
}
.navbar-nav> li:hover{
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<div class="container">
<center>
<button class="btn btn-primary btn-lg" href="#signup" data-toggle="modal" data-target=".bs-modal-sm">Sign In/Register</button>
</center>
</div>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
<li class="">Why?</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p><br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com"></a>JoeSixPack#Sixpacksrus.com</a> for any other inquiries.</p>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav">
<li>
<div class="link" id="contentLink10000001"><ins> </ins>Parent Link 1</div>
</li>
<li>
<div class="link" id="contentLink20000002"><ins> </ins>Parent Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000006"><ins> </ins>Child Link 1</div>
</li>
<li>
<div class="link" id="contentLink1000002"><ins> </ins>Child Link 2</div>
</li>
<li>
<div class="link" id="contentLink1000003"><ins> </ins>Child Link 3</div>
</li>
<li>
<div class="link" id="contentLink1000004"><ins> </ins>Child Link 4</div>
</li>
</li>
<li>
<div class="link" id="contentLink2000014"><ins> </ins>Child Link 5</div>
</li>
<li>
<div class="link" id="contentLink2000015"><ins> </ins>Child Link 6</div>
</li>
<li>
<div class="link" id="contentLink2000016"><ins> </ins>Child Link 7</div>
</li>
<li>
<div class="link" id="contentLink30000003"><ins> </ins>Parent Link 3 </div>
</li>
<li>
<div class="link" id="contentLink3000001"><ins> </ins>Child Link 8</div>
</li>
<li>
<div class="link" id="contentLink40000004"><ins> </ins>Parent Link 4 </div>
</li>
<li>
<div class="link" id="contentLink4000001"><ins> </ins>Child Link 9</div>
</li>
</ul>
document.ready is called when the DOM is loaded, not when the modal is opened.
You want to bind to the modal open event.
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
I have got my code working by adding this function to my jQuery
$(document).ready(function(){
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
buildNavMenus();
$( document ).ajaxComplete(function() {
buildNavMenus();
});
});
in buildNavMenus(); I have added my code to create nested menu.
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
As an example, I'm starting with html like this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
</div>
The idea being, when I select an item i.e. .choice I want to add it to the input and the .theChoice. This way it displays what the user chose but they can edit it by typing the box.
I know how to do this with jquery. However, it will be a lot of overhead and I want to learn angular. I also know Angular can really clean this up.
I've used ng-model to mirror what a user types in the input box doing this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
I've used ng-repeat to loop out three of the .item divs:
<div id="leftSide" ng-controller="leftSide">
<div class="item" ng-g-repeat="i in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
and js:
myApp.controller('leftSide',function($scope,$index){
//three left boxes
$scope.number = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
...
});
The problem I have is (obviously) selecting the .choice' is targeting all myng-models and not each that associate to its.editor. I'm certain I can use$indexto handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the.choice` I select.
I don't like the jQuery implementation, so I tried to solve your problem by pure AngularJS. You can run the snippet to check the answer:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.number = 3;
$scope.choice = [];
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.choiceClick = function(i) {
debugger;
$scope.choice[i] = 'This is choice';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="AppController">
<div class="item" ng-repeat="it in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice" ng-click="choiceClick($index)">This is choice</li>
</ul>
<input class="myChoice" ng-model="choice[$index]" />
</div>
<p class="theChoice">{{choice[$index]}}</p>
</div>
</body>