How to loop a button - javascript

I am not sure if loop is the right term, but I have a products page that is working perfectly. I want to be able to have an " Add product option button" that when the admin clicks on it, it toggles down and another "Add products option button" replaces the one i just opened. So the number of products options is unlimited, the user will be able to add as many products as they like.
<!--Restaurant toggle-->
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');">
<h3 id="open">Your Restaurants</h3>
</a>
<div id="Rest" class="Rest_new" style="display: none;"><div>
<ul class="tabs1">
<!--
<li id="order" class="rred">
restaurant
</li>
-->
<li id="order_open" class="rgreen">
New restaurant
</li>
</ul>
</div>
</div>
<!-- add element-->
<script>
$(document).on('click', 'li#order_open', function() {
$(this).before('<li>New restaurant</li>');
// add to localsorage?
window.onload = function() {}
var order_open = $('div#Rest').html();
localStorage.setItem('div#Rest', order_open);
});
</script>
I am using the following code at the moment. It creates unlimited options however, i can not open the options, i cannot make it toggle and it disappears on page refresh. Is there a better way to do this.

You question is javascript. You could use
$('container').append('html content');
See an example:
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
See more
http://www.w3schools.com/jquery/jquery_dom_add.asp

To create additional restaurants, you can use jQuery's append function to add the link. Then use localstorage to store and retrieve the number of links created.
HTML
<h3 id="open">Your Restaurants</h3>
<div class="Rest_new" id="rest">
<div>
<ul class="tabs1" id="optionContainer">
</ul>
</div>
JavaScrtipt
var options = parseInt(localStorage.getItem('numberOfOptions'));
if(isNaN(options)) { options = 0; }
function addOption(n) {
$('#optionContainer').append('<li class="rgreen" id="order_open'+n+'">New restaurant '+n+'</li>');
}
$(document).ready(function(){
for(var i = 0; i < options; i++) {
addOption(i);
}
$('#open').on('click',function() {
addOption(options);
options++;
localStorage.setItem('numberOfOptions',parseInt(options));
})
});
You can see it working here: https://jsfiddle.net/igor_9000/pm4Lv44t/1/
Hope that helps!

Related

Jquery doesn't react to Jquery created text

What I'm trying to do is add elements to a list at the press of a button, but then be able to delete any item, again, at the press of a button. Here is a minimal working example of what I mean:
$('.delete-item').click(function() {
$(this).parent().text("DELETED")
})
$('button').click(function() {
$('ul').append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>
Here, you can add items to the unordered list and "delete" already existing items, now, what happens is that you can delete the premade items just fine, but if you try to delete an appended item, for whatever reason, you simply can't. How is this fixed? Thanks!
$('.delete-item').click(...) attaches the event listener to existing items only. Use event delegation like so:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
With event delegation you attach the event listener to an ancestor that already exists in the DOM (here the <ul> element) and watch for the event on the descendants whether they already exist or added dynamically.
Demo:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
$("button").click(function() {
$("ul").append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>

How could I replace multiple div without set few functions onclick?

I'm using vanilla JS for some reasons and trying to replace div content while click on li.
I'm tried to replace by function(target, source) but target is always = id.
So I'm clone my function and onclick li insert 2 functions + params.
<body>
<li onClick="replaceContentInContainer('target', 'replace_target_div2'); replaceContentInContainerTwo('targetTwo', 'replace_target_div2_02')">View Div 2</li>
<li onClick="replaceContentInContainer('target', 'replace_target_div3'); replaceContentInContainerTwo('targetTwo', 'replace_target_div3_02')">View Div 3</li>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target_div2">div2</span>
</div>
<div style="display:none">
<span id="replace_target_div3">div3</span>
</div>
<div>
<span id="targetTwo">div1</span>
</div>
<div style="display:none">
<span id="replace_target_div2_02">div2 02</span>
</div>
<div style="display:none">
<span id="replace_target_div3_02">div3 03</span>
</div>
</body>
<script>
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInContainerTwo(targetTwo, sourceTwo) {
document.getElementById(targetTwo).innerHTML = document.getElementById(sourceTwo).innerHTML;
}
</script>
I would like to have elegant way to do so.
I think what you mean is that you want to keep your HTML clean.
You could use a click eventhandler on all li within a certain ul.
HTML
<ul id="theList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
JS add Click event handler
// Get all list items in ul with id 'theList'
var listItems = document.querySelectorAll('#theList li');
// Add a click event handler on each list item
for (i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("click", function(){
console.log(this) // This is your target html
});
}
For the last step I'm not sure what you want. I don't know how your source is chosen. I will edit if you explain it more.
You can user this code:
<body>
<li onClick="replaceContentInContainer('target', 'div2');">View Div 2</li>
<li onClick="replaceContentInContainer('target', 'div3')">View Div 3</li>
<div>
<span class="target">div1</span>
</div>
<div>
<span class="target">div1</span>
</div>
</body>
<script>
function replaceContentInContainer(div, text) {
var ids = document.getElementsByClassName(div);
for (var i = 0; i < ids.length; i++) {
ids[i].innerText = text;
}
}
</script>

Return all links on button click

I have a page that contains a large amount of links.
I have integrated a search box for the user to type in the link name, and when they hit the button 'Search', it returns all links that contain what the user typed in:
Here is a section of HTML for this page:
<h4>First Header</h4>
<div class="slider" id="Slide16">
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 3</li>
</ul>
</div>
<h4>Second Header</h4>
<div class="slider" id="Slide19">
<ul>
<li>Document 4</li>
<li>Document 5</li>
</ul>
</div>
Here is the JavaScript for that button:
$("#ButtonSearch").click(function () {
var textboxValue = $("#SearchLink").val().toLowerCase();
$('.slider').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
$(this).show();
exist = true;
}
else
$(this).hide();
});
if (exist === false) {
$(this).prev('h4').hide();
$(this).hide();
}
else {
$(this).prev('h4').show();
}
});
});
Now I also have a clear button.. and when the user hits that button I want all sliders, headers, ul's, li's, and links to return without a page refresh.
Here is what I have so far for that button:
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.slider').each(function() {
$(this).prev('h4').show();
});
});
So just as an example.. if I were the user and typed in Document 1 into the search box.. and hit search, it would return the header First Header and underneath would be the Document 1.
Now if I hit Clear search.. it would return me all of my h4 elements, but nothing underneath them, except for the First Header element with the Document 1 underneath.. So it is keeping the original search and just returning the rest of the h4 elements..
So my question is how do I return everything on click of the clear search button?
This will filter in realtime on keypress or paste. As your user types things into the search if the link contains the text it will hide links that do not contain the text and it will show links that do. As the value changes it will show or hide based on the value of the search.
Edit: Search is now bound to buttton
let filter = function(){
$filter = $('#search-filter').val();
$.each($('a'),function(k,v){
let heading = '#'+$(v).closest('div').attr('data-bind');
let sibs = $(v).parent().siblings();
if(v.innerText.toLowerCase().indexOf( $filter ) > -1){
//Show
$(v).closest('li').show();
}
else {
//Hide
$(v).closest('li').hide();
}
});
}
$('#searchBtn').on('click',filter);
$('#clrBtn').on('click',function(){
$("#search-filter").val("");
filter();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-filter"> <input id="searchBtn" type="button" value="Search"> <input id="clrBtn" type="button" value="clear">
<h4 id="Trig16">First Header</h4>
<div class="slider" id="Slide16" data-bind="Trig16">
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 3</li>
</ul>
</div>
<h4 id="Trig19">Second Header</h4>
<div class="slider" id="Slide19" data-bind="Trig19">
<ul>
<li>Document 4</li>
<li>Document 5</li>
</ul>
</div>
I have figured this out, using what I already have:
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.slider').each(function() {
$(this).prev('h4').show();
$(this).children().each(function () {
$('ul li').show();
$('a').show();
});
});
});

JQuery each function toggle class

So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.

How to hide sub-menu when other menu clicked JQuery

I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/

Categories

Resources