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();
});
});
});
Related
Thanks in advance.
I am trying to append a list using the input value. I can append a list using predefined string, and I can append using input value to non list item. But I'm having trouble combining these, it seems to add extra list items.
This is the code I'm using:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<form>
<div><textarea class="example-default-value" id="example-textarea" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
<script language="javascript">
$('.example-default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function() {
if(this.value == '') {
this.value = default_value;
}
});
});
function example_append() {
$('ol').append("<li>"+($('#example-textarea').val())+"<li>");
}
</script>
OH OK I see - I'm using two li tags instead of one li and one /li closing tag! Oh dear... more coffee required!!
function example_append() {
$('ol').append("<li>"+($('#example-textarea').val())+"</li>");
}
If you dont use jquery anywhere else you can use javascript for this function as following:
function example_append() {
let textInput = document.getElementById("example-textarea");
if(textInput.value !==""){
let node = document.createElement("LI");
node.innerHTML = textInput.value;
textInput.value="";
document.getElementById("myList").appendChild(node);
}else {
alert("Enter something in textarea")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id="myList">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<form>
<div>
<textarea class="example-default-value" placeholder="Type here"
id="example-textarea" style="width: 400px; height: 50px;"></textarea>
</div>
<div>
<input type="button" value="Append"
onclick="example_append()" />
</div>
</form>
You have to use the close tag for li in your example_append() function.
$('ol').append("<li>"+($('#example-textarea').val())+"<li>");
to
$('ol').append("<li>"+($('#example-textarea').val())+"</li>");
I'm using jQuery Selectable and would like to know whether is it possible to prevent Selected event to be triggered from Selecting event?
Actually, I want to show some popup/confirmation in Selecting event, and if user confirms that then I would like the Selected event to be triggered.
Any solution or workaround(or alternative) would be highly appreciated.
You can do it like this:
HTML
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<input id="btnGet" type="button" value="get selected items" />
JS
$("#selectable").selectable({
selected: function(e, ui) {
if (confirm('Are you sure to select ' + $(ui.selected).html() + '?')) {
$(ui.selected).addClass("ui-state-highlight");
} else {
$(ui.selected).removeClass("ui-state-highlight");
}
}
});
$('#btnGet').click(function() {
var selectedItems = [];
$('.ui-state-highlight').each(function() {
selectedItems.push($(this).html());
});
alert(selectedItems.join(','));
});
Online demo (jsFiddle)
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!
I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?
You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>
How do I hide the tab2? I can add ID to the second li and than hide it with jQuery, but isn't there some way to do it through .tabs directly?
<div id="tabs" style="width:100%">
<ul>
<li>
<a href="#tab1">
Tab 1 Title
</a>
</li>
<li>
<a href="#tab2">
Tab 2 Title
</a>
</li>
</ul>
<div id="tab1" style="width:100%;">
content tab1
....
Try this :
$('[href="#tab2"]').closest('li').hide();
Try this:
$($("#tabs").find("li")[1]).hide()
Demo
HTML:
<div id='MyTabSelector'>
<ul>
<li>Tab 0</li>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
Disable Tab 1<br />
JS:
(function ($) {
$.fn.disableTab = function (tabIndex, hide) {
// Get the array of disabled tabs, if any
var disabledTabs = this.tabs("option", "disabled");
if ($.isArray(disabledTabs)) {
var pos = $.inArray(tabIndex, disabledTabs);
if (pos < 0) {
disabledTabs.push(tabIndex);
}
}
else {
disabledTabs = [tabIndex];
}
this.tabs("option", "disabled", disabledTabs);
if (hide === true) {
$(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
}
// Enable chaining
return this;
};
$.fn.enableTab = function (tabIndex) {
$(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
this.tabs("enable", tabIndex);
return this;
};
})(jQuery);
$('#MyTabSelector').tabs();
you need to hide both li as well as div to hide tab
so your jquery would be
$($("#tabs").find("li")[1]).hide();
$($("#tabs").find('#tab2')).hide();
You could try this:
//when you click a tab
$('#tabs a').click(function(){
//show hidden tabs again
$('#tabs li:hidden').show();
//hide the clicked tab
$(this).parent().hide();
});