jquery isotope version 2 message if no result - javascript

I am using jquery isotope, to filter results, as:
<div class="isotope">
<div class="filter-item">1</div>
<div class="filter-item">2</div>
<div class="filter-item">3</div>
</div>
JS Code:
<script>
$( function() {
var $container = $('.isotope');
if ( !$container.data('isotope').filteredItems.length ) {
$container.html("Sorry.No result");
}
</script>
I am trying to display - Message, if no results in filter process.
But its not working, any clues ?

You can use this with isotope 'arrangeComplete' event:
$container.on( 'arrangeComplete', function( event, filteredItems ) {
var resultCount = filteredItems.length;
if(resultCount == 0) {
$container.html("Sorry.No result");
}
});

You need to actually check if the length has a value.
if ( $container.data('isotope').filteredItems.length > 0)
You are missing the '>0' so will always get a truthy value. Also remove the !.

I spent a while trying to get this to work in Vanilla JS and thought I'd share my working solution for anyone else trying to do a "No results found" message without Jquery:
// ...after buttonclick detected
// set filter for Isotope
iso.arrange({ filter: filterValue });
// No results check
var noResults = document.querySelector('.no-results');
if (iso.filteredItems.length == 0) {
noResults.classList.add('visible');
}
else {
noResults.classList.remove('visible');
}

Related

How to show native validation error for specific input on change event?

I have a classic HTML5 form. I would like using jquery/javscript to show the browser native error tooltip when the user change a specific input value. I would like to avoid the user try to submit the form to see all errors.
For that, I tried with the functions checkValidity() and reportValidity() but it works only if I add alert('test'); in my condition...so weird
JS script
myInputJqueryObject.on('change', function() {
if ( !this.checkValidity() ) {
this.setCustomValidity( 'Custom error !!!' );
var $form = $('#my-form');
if( $form[0].checkValidity() === false) {
$form[0].reportValidity();
//alert('test'); <-- works only if I active this line code
return true;
}
}
});
You do not need to check the form validity when you know that the input is invalid. You can omit if( $form[0].checkValidity() === false). Also you can reportValidity on the input itself.
And setCustomValidity takes some time to be applied to the input field. So you have to wrap reportValidity into setTimeout:
$('input').on('change', function() {
var self = this;
if (!self.checkValidity()) {
self.setCustomValidity('Custom error !!!');
setTimeout(function() {
self.reportValidity();
self.setCustomValidity('');
}, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form"><input value="del me" required></form>
Based on 'Kosh Very' answer, I found the solution. It sounds good without bugs.
JS Script :
$('input').on('focusout', function() {
var self = this;
var validity = self.checkValidity();
if( !validity ){
if( self.validity.patternMismatch ){ //<-- Optionnal : Condition to keep others native message errors except Pattern.
self.setCustomValidity( 'Custom Error about pattern!!!' );
}
setTimeout(function() {
self.reportValidity();
self.setCustomValidity( '' ); //<-- Important to reinit
}, 1);
}
});

Search for Text inside div

The problem is: I have one div that wraps all my users list. I want to make a search box, but i don't want to use Ajax, so i started trying JQuery, for search the text inside the div and hide the another results. I've tried but i'm stucked on this:
//Search Box
$(document).on('input', "#search-weeazer", function(e){
console.log('input ativado')
if($(this).val().length >= 4){
// if($('#colmeia-chat').html().indexOf($(this).val()) > -1){
// console.log('Found')
// } else {
// console.log('Not Found')
// }
$('div.chat-users>div').each(function(i,div){
if($(div).html().indexOf($(div).val()) > -1){
console.log($(div).html() + ' found: ' + i);
} else {
console.log("Not Found")
}
});
}
});
Someone know how i can do this?
Thanks!
In my HTML i have this:
<div class="chat-users" style="height: 400px;">
<?php include_once('user-chat-list.php'); ?>
</div>
Inside "chat-users" i have a list with all users, loaded with php
Here is more HTMl to show the structure:
https://jsfiddle.net/jdqbnz2w/
After Question Edit
Here is an updated JSFiddle based on the JSFiddle you included showing how to implement the search with your particular use-case:
JSFiddle
Original Answer:
You're missing some pertinent information in your question, such as "what does the HTML look like that comes from user-chat-list.php?" And because of that it makes it hard to understand exactly how your code applies.
Nevertheless, here is a simple example upon what you have provided that you can modify that does what you are looking for. You can run the following code snippet to see a working example:
var $searchBox = $('#search-weeazer');
var $userDivs = $('.chat-users div');
$searchBox.on('input', function() {
var scope = this;
if (!scope.value || scope.value == '') {
$userDivs.show();
return;
}
$userDivs.each(function(i, div) {
var $div = $(div);
$div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input id="search-weeazer">
<p>Users:</p>
<div class="chat-users">
<div>Tony</div>
<div>Amber</div>
<div>Ronald</div>
</div>

Javascript Keyup Search of Child Div Value

I have a list of tasks that I would like to create a search function for. I have managed to have it so that as soon as you start typing, the list responds and hides all incorrect results. However I am still unable to show the correct result.
Codes are below
UPDATED WITH CORRECT SOLUTION
HTML
<input type="text" id="search" placeholder="Player Search" />
<div id="todo">
<div class="task">Task 1</div>
<div class="task">Task 2</div>
<div class="task">Task 3</div>
</div>
Javascript
var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$(".task").show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).show()
console.log(result)
$(".task").eq(result).show();
}
})
As I have only started learning javascript, I would appreciate if you could explain my errors, and a laymen step-by-step explanation of the answer/process.
As a bonus, if you could also explain how one would troubleshoot a javascript problem like this to find the underlying problem, that would be appreciated.
var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$div.show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).index()//get the index of the div that has match
console.log(result)
result != -1 ? $(".task").eq(result).show() : $(".task").hide()//show or hide div depending on matching index
}
})
DEMO
Always remember ID should always be unique in same context.
Use class to target multiple elements.
function SearchContactInGroup(Strtext) {
$('#userchat_grouping .name').each(function () {
if ($(this).text().toLowerCase().indexOf(Strtext.toLowerCase())>= 0) {
$(this).closest('li').show('slow');
}
else {
$(this).closest('li').hide('slow');
}
});
// $('#dvLoading').hide();
}
$(window).load(function () {
$('#txtsearch').keyup(function () {
SearchContactInGroup($(this).val());
});});

Jquery / Javascript - Uncaught TypeError: undefined is not a function

Google doesn`t execute my JS code. In Firefox everything works fine
$('a[href="#pricends"]').click(function(){
$("div.text_1").text(($("div.text_1").text() == 'smth1') ? 'smth2' : 'smth1')
$("div.text_2").text(($("div.text_2").text() == 'smth2') ? 'smth1' : 'smth2')
if ( $('div.text_1').text().contains("smth1") ) {
//smth here
}
Chrome console output points to "if" line above.
Uncaught TypeError: undefined is not a function
(anonymous function)
f.event.dispatch jquery-1.7.2.min.js:3
h.handle.i
How to fix this? Nothing goes at mind now, name function and compare it with bool before if ?
You can't call .contains() on the text value returned from .text().
If you test the value after extracting it with jQuery you should be ok.
var divText = $('div.text_1').text();
if(divText.indexOf("smth1") != -1){
//do your stuff...
}
Use something like this:
if ( $('div.text_1').text().indexOf("smth1") !== -1 ) {
//smth here
}
The indexOf will return something other than -1 if "smth1" exists somewhere in your text.
Why don't you just use the same check you used when choosing which text to append:
if ( $('div.text_1').text() === "smth1" ) {
// do it
}
Also another way to do it with a single class
DEMO
CLICK
<div class="smth">smth1</div>
<div class="smth">smth2</div>
jQ:
var $smth = $(".smth"); // Cache your elements
$('a[href="#pricends"]').click(function( e ){
e.preventDefault(); // Prevent Browser default anchor behavior
$smth.text(function(i, txt){
return txt=='smth1'?'smth2':'smth1';
});
});
Somewhat extended:
var $smth = $(".smth"); // Cache your elements
$('a[href="#pricends"]').click(function( e ){
e.preventDefault();
$smth.text(function(i, txt){
if(txt==="smth1"){
// do something with $(this)
// or do something else
}
// and afterwards thange text
return txt=='smth1'?'smth2':'smth1';
});
});

typeahead in javascript / jquery

I'm trying to create a typeahead with the following code:
function makeTypeahead($container, schedule){
if(schedule !==undefined && schedule.classes!== undefined){
$.each(schedule.classes, function(value){
if(value.passed === false){
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(schedule.classes, 'className'),
items : 15
});
}
});
}
}
//In this code, typeahead doesn't work at all. (nothing shows in typeahead dropdown)
I have also tried:
function makeTypeahead($container, schedule){
//All non-passed classes
if(schedule !==undefined && schedule.classes !== undefined){
for(var i=0; i<schedule.classes.length; i++){
if(schedule.classes[i].passed === false){
console.log(schedule.classes[i].passed);
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(schedule.classes[i], 'className'),
items : 15
});
}
}
//in this code, typeahead doesn't work at all. (nothing shows in typeahead dropdown)
I have a list of schedules and the classes are every class in the schedule. I want to be able to say that if the class is NOT passed, don't allow it in the typeahead.
This is done on a twitter bootstrap popup. the html is using mustache - for example: (I cant get the full html to show, I guess I'm not formatting it right for stackoverflow)
input id="{{stnId}}"
value="{{stnValue}}"
Does anyone know what I am doing wrong? I feel like I'm so close to getting it to work.
function makeTypeahead($container, schedule){
//Need All non-passed classes.
if(schedule !==undefined && schedule.classes !== undefined){
var notPassed = Fp.filter(schedule.classes, function (class) { return !class.passed; });
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(notPassed, 'className'),
items : 15
});
}
}

Categories

Resources