How to show a message when no results are found - javascript

How would I adapt this code to show a <div>No Results Found</div> on the page when no results are found?
I've got this simple image gallery with an input to filter results based on the contents of the data-filter attribute:
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
<div class="gallery-thumbnail" data-filter="Apple">image</div>
<div class="gallery-thumbnail" data-filter="Orange">image</div>
<div class="gallery-thumbnail" data-filter="Banana">image</div>
</div>
And the jQuery:
$("#filter").keyup(function() {
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
});

You could use the same method and do it like this:
$(document).ready( function(){
$("#filter").keyup( function(){
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
$('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
});
});
Demo
$(document).ready( function(){
$("#filter").keyup( function(){
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
$('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
<div class="gallery-thumbnail" data-filter="Apple">image</div>
<div class="gallery-thumbnail" data-filter="Orange">image</div>
<div class="gallery-thumbnail" data-filter="Banana">image</div>
<div class="noresult" style="display:none">No Results Found</div>
</div>

You put 'No Results' div on the page, with a class which initially defaults it to be hidden (display:none). If your filter returns no results, you add a class to the div to show it (display: block). When the filter is cleared, and you have results again, you remove the 'show' class, reverting it back to it's default 'hidden' state.

Related

Edit button jquery function

How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input
Thanks in advance
<header data-role="header">
<h1>To Do List</h1>
Home
</header>
<div role="main" class="todo- container">
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<button id="addButton">Add</button>
</div>
<ul class="todo-list">
<li>
<div class="button-center">
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
});
$('#editButton').click(function() {});
</script>
I have done something like this : example
user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.
JS
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div
class="button-center"><button class="deleteButton">Delete</button><button
class="editButton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
$(document).on('dblclick', '.task', function() {
var task = $(this).text();
$(this).text('');
$(this).append(`<input type="text" value="${task}" />`);
});
$(document).on('click', '.editButton', function() {
var task = $(this).parents().siblings('span').children('input').val();
$(this).parents().siblings('span').remove('input');
$(this).parents().siblings('span').text(task);
});
I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this
$(document).ready(function() {
var $note = $('.note');
var $taskId = $('.task-id');
$('#addButton').click(function() {
var task = $note.val().trim();
var id = $taskId.val();
if( task.trim() === '' ){
// do nothing
}else if( id !== '' ){ // edit
$(".todo-list").find('[data-id="'+id+'"] .task').text(task);
}else{ // add todo
id = new Date().getTime(); // you can make it more unique
$(".todo-list").append(`
<li data-id="${id}">
<span class="task">${task}</span>
<div class="button-center">
<button class="deleteButton">Delete</button>
<button class="editButton">Edit</button>
</div>
</li>
`);
}
$note.val('').focus();
$taskId.val('');
$(this).text('Add');
});
// delete and edit action
$(document).on('click', '.deleteButton', function() {
$(this).closest('li').remove();
}).on('click', '.editButton', function(){
let $li = $(this).closest('li');
$note.val( $li.find('.task').text() );
$taskId.val( $li.data('id') );
$('#addButton').text('Update');
});
// cancel update if .note text is cleared
$('.note').on('input', function(){
if( $(this).val() === '' ){
$taskId.val('').focus();
$('#addButton').text('Add');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<input type="hidden" class="task-id">
<button id="addButton">Add</button>
</div>
<ul class="todo-list"></ul>

Show message on checkbox click

I try to show a message when someone clicks on a checkbox.
Do you have any idea to display a message?
I tried, but it doesn't work.
The Checkbox :
echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" /> Compare</div>';
the script including the element to show a message
<script>
$(function() {
$('input[type=checkbox]').change(function(){
var chkArray = [];
$('#container').html('');
//put the selected checkboxes values in chkArray[]
$('input[type=checkbox]:checked').each(function() {
chkArray.push($(this).val());
});
// message
var toggle = false;
$('#productsCompare').click(function() {
$('input[type=checkbox]').attr('checked',!toggle);
toggle = !toggle;
$(\'productsCompare\').show();
});
//If chkArray is not empty show the <div> and create the list
if(chkArray.length !== 0){
$.ajax({
method: 'POST',
url : "http://localhost/.........test.php",
data : {product_id: chkArray},
});
}
});
})
</script>
The message
<div class="col-md-12" id="productsCompare" style="display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">Compare</button>
</span>
</div>
</div>
Check my example and try to modify it with your case.
$("#box").addClass('novis');
$("#ch").on('click',function(){
$("#box").toggleClass('novis','vis');
});
.vis{ display: block; }
.novis{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Show</label>
<input type="checkbox" id="ch" unchecked>
<div id="box">
<p>Hello world</p>
</div>

duplicate and clone div

sorry i do not speak english well, i want to create a tool that allows to duplicate a div thanks to an "input number" and a button and then I also want to clone this tool by reinitializing it to be able to use the tool again , Here is a piece of code:
$(function() {
$('#btn_dupliquate').on('click', function() {
var numDuplication = $('#num-duplication').val();
if (numDuplication > -1) {
var div = $('.common_preview');
$('.result').html('');
for (var i = 0; i < numDuplication; i++) {
$('.result').append(div.clone());
}
}
});
});
$(function() {
$(".heading").keyup(function() {
var heading=$(this).val();
$(".common_preview").html("<div class='bloc'><p class='model'>"+heading+"</p></div>");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toNumDuplicate">
<input type="text" class="heading" />
<br/>
<br/>
<input id="num-duplication" type="number" >
<br/>
<br/>
<button id="btn_dupliquate"> dupliquate </button>
</div>
<div id="toDuplicate">
<div class="common_preview" >
<div class="bloc">
<p class="model">test</p>
</div>
</div>
</div>
<div class="result"></div>
<button id="btn_clone">clone</button>
You could abstract your function to take dynamic selector strings for the duplicate button, duplicate number input, preview div and result div.

How to get ID of closest checkbox item by clicking on span

<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete"></span>
</label>
</div>
When i click the span item , i want the id value of the checkbox . How can i get it?
Traverse to a known parent that also contains the checkbox, find the checkbox then get the ID attribute.
$('span.todo-remove').on('click', function() {
var id = $(this).closest('.todo-task').find('input:checkbox').attr('id');
// do something with id
});
jQuery:
$('.todo-remove').closest('.todo-task').find('input').attr('id')
Navigate up then search
$('span').click(function() {
var parent = $(this).closest('.todo-task');//navigate up
var input = parent.find('input[type="checkbox"]');//search
var id = input.attr('id');
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '>hellooooo <span class="todo-remove mdi-action-delete">in span</span>
</label>
</div>
jQuery's .parent()-method navigates to the label-level and then the .siblings()-method selects the siblings that match the selector. Finally you can use attr() to get the actual value.
$(".todo-remove").on('click', function() {
var id = $(this).parent().siblings("input[type='checkbox']").attr("id");
});
JSFiddle: http://jsfiddle.net/d0cekb6p/
$(function() {
$('.todo-remove').on('click', function() {
var checkID = $(this).closest('div.todo-task').find(':checkbox').prop('id');
console.log( checkID );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete">X</span>
</label>
</div>

find a div by classname and replace it with a div based on onclick - jquery

There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance
What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle
EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.
Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})

Categories