Develop Reference

While loop to hide div elements

I am trying to create searchable content with the help of some JS yet am having trouble hiding the content when there is no input in the search field.
Here is my script:
var $searchContainer = $("#search");
var $contentBoxes = $searchContainer.find(".content");
var $searchInput = $searchContainer.find("#search-input");
var $searchBtn = $searchContainer.find("#search-btn");
$searchBtn.on("click", searchContent);
$searchInput.on("input", searchContent);
while($searchInput == null) {
for($contentBoxes) {
hide();
}
}
function searchContent(){
var userInput;
//Check if call comes from button or input change
if($(this).is(":button")){
userInput = $(this).siblings("input").val();
} else {
userInput = $(this).val();
}
//make the input all lower case to make it compatible for searching
userInput = userInput.toLowerCase();
//Loop through all the content to find matches to the user input
$contentBoxes.each(function(){
var headerText = $(this).find(".title").text();
var contentText = $(this).find(".description").text();
//add the title and content of the contentbox to the searchable content, and make it lower case
var searchableContent = headerText + " " + contentText;
searchableContent = searchableContent.toLowerCase();
//hide content that doesn't match the user input
if(!searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}
});
};
I understand a while loop could have a condition where if userInput is equal to null it would loop through each content box and hide the element.
Something like this maybe?
while($searchInput == null) {
$contentBoxes.each(function(){
hide();
}
}
Any help would be greatly appreciated.

You would need to update your userInput variable every cycle of the loop because the userInput value never gets updated. Nonetheless this not a good way to do this because you will block your entire application.
There is no need for a loop, just use an if statement. Also, because this function gets executed when the value of the input is changed, there is no need to use this.
You could put this block of code beneath your $contentBoxes.each function:
$contentBoxes.each(function(){
var headerText = $(this).find(".title").text();
var contentText = $(this).find(".description").text();
//add the title and content of the contentbox to the searchable content, and make it lower case
var searchableContent = headerText + " " + contentText;
searchableContent = searchableContent.toLowerCase();
//hide content that doesn't match the user input
if(!searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}
});
if (userInput === null) {
$contentBoxes.each(function(){
$(this).hide();
});
}

I think it will be work like this. You just check if search input !== null and dont hide any content in this case
if($searchInput != null && !searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}

"label.error" seems to always be present on every bootstrap tab

I can't figure out why $('label.error') is showing up on every bootstrap tab when that particular element should only show on 1 tab. I have a field that's not passing validation on a bootstrap tab and thus a label with class error is being appended the DOM on the violating field. But, I can't seem to get my code to land on the specific tab that has the violating field. What am I doing wrong in the code below? isErrorPresent should only be true on 1 particular tab but EVERY tab is showing it to be true...
$("#" + formId).validate({ignore:""}).form(); // ignore:"" allows for hidden fields to be validated as well
$(".tab-content").find("div.tab-pane").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').click();
alert('processing tab ' + id);
var isErrorPresent = $('div.tab-pane, div.active').find('label.error').length > 0;
alert(isErrorPresent);
// if (isErrorPresent) {
// alert("label.error detected...");
// hasError = true;
// return false; // Break .each loop and return to page
// }
});

Without seeing more markup, this is what I am thinking:
You are doing this:
var isErrorPresent = $('div.tab-pane, div.active').find('label.error').length > 0;
The selector has a comma in it, meaning you want to checking on div.tab-pane && div.active
Is that what you wanted? Maybe you meant to do this (no comma and no space):
var isErrorPresent = $('div.tab-pane.active').find('label.error').length > 0;

Figured it out with #Red2678's help (thanks)...here's what's working for me now...
// Check all tabs for errors & show first tab that has errors
$(".tab-content").find("div.tab-pane").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').click();
$("#" + formId).validate().form();
var activeTab = $('div.tab-pane.active');
var isErrorPresent = false;
if ($(activeTab).find('label.error').length > 0) {
isErrorPresent = $(activeTab).find('label.error').css('display') !== 'none';
}
if (isErrorPresent) {
hasError = true;
return false; // Break .each loop and return to page
}
});

Jquery Click Event on Form Input Not Running

I am creating a math problem website and in one page I have a part where the user clicks submit and it will check whether the answer is right or wrong.
Here is the main part of my code that I am having trouble with:
var newProblem = function(){
var textHide = true;
var submitTimes = 0
$("#content").append("<h2 class='middle_text'>Notice, this page is in BETA stage, improvement is still needed.</h2>")
$(".middle_text").fadeTo(1000,.8)
setTimeout(function(){$(".middle_text").fadeTo(500,0,function(){$(".middle_text").hide()})},4000);
setTimeout(function(){
var denominator = getNumbersEquivFrac.den()
var numerator = getNumbersEquivFrac.num(denominator);
var equivalent = getNumbersEquivFrac.equiv()
var problem = new equivalFrac(numerator,denominator,equivalent);
$("#content").append("<div class ='problem-choice' id='solve'>SOLVE THIS!</div>")
$("#content").append("<div class='problem-choice' id='answer'>SKIP AND GET ANSWER</div>")
$("#content").append("<div style='margin:auto; width:450px; text-align:center'><p id='question'>" + problem.printQuestion() + "</p>")
$("#content").append("<div id='instructions'></div>")
$("#question").fadeTo(750,1);
$(".problem-choice").fadeTo(750,1);
$("#solve").click(function(){
if(textHide === true){
$("#content").append("<form name='answer'><input class='problem-text' type='text' name='answer-input'><input type='button' class='problem-submit' value ='SUBMIT ANSWER'></form>");
$(".problem-text").fadeTo(300,.8)
$(".problem-submit").fadeTo(300,.8)
textHide = false
}
})
},4500)
}
newProblem();
$(".problem-submit").click(function(){
var checkAnswer = function(){
var answer = document.forms["answer"]["answer-input"].value;
if(answer === null || answer === ""){
alert("You must type in an answer.")
}
else{
submitTimes = submitTimes + 1;
if(answer !== problem.answer()){
if(submitTimes < 2){
$("#content").append("<div class='result' id='wrong'><div id='problem-des'><p>The correct answer was " + problem.answer() + "." + "</p></div><button id='next'>NEXT</button></div>");
$(".result").fadeTo(500,1)
}
}
else if(answer===problem.answer()){
if(submitTimes < 2){
alert("Correct!")
}
}
}
}
checkAnswer()
});
This is where the event is for the form submit button
$(".problem-submit").click(function(){
var checkAnswer = function(){
var answer = document.forms["answer"]["answer-input"].value;
if(answer === null || answer === ""){
alert("You must type in an answer.")
}
else{
submitTimes = submitTimes + 1;
if(answer !== problem.answer()){
if(submitTimes < 2){
$("#content").append("<div class='result' id='wrong'><div id='problem-des'><p>The correct answer was " + problem.answer() + "." + "</p></div><button id='next'>NEXT</button></div>");
$(".result").fadeTo(500,1)
}
}
else if(answer===problem.answer()){
if(submitTimes < 2){
alert("Correct!")
}
}
}
}
checkAnswer()
});
I don't know if it is the fact that the event is being called on a selector that was appended through the code and not originally in the html document.
I tried calling the event on parts of the page that were originally there, it worked.
But it isn't working for these, if you have any idea why, please say so.

You can asign an ID to your form, an use in the submit function:
$(document).on('submit','id_form',function(e) {
e.preventDefault();
}

Have you tried using using jquery's .on() function which essentially attaches the click event handler to any element that may have been created after the DOM was originally completed.
more info here: http://api.jquery.com/on/
$(".problem-submit").on('click',function(){
//function here
});

js code to replace checkbox and closures

The following javascript (prototype 1.6) code hides all checkboxes on the page and inserts a div element with some css style and a click event to act as a fake-checkbox. It also looks out for a label next (or previous) the checkbox, to also trigger the same event.
When I click the div (fake_el) itself, everything works as expected, but when I try the same with the label, it only works one time. after that, the el isn't gonna change - as if it (the el) would be a value-parameter.
Any ideas here?
$$('input[type=checkbox]').each(function(el) {
if (el.visible()) {
var fake_el = new Element('div', { className:'checkbox checkbox_' + el.checked });
var label = (el.next() != null && el.next().tagName === 'LABEL' && el.next().readAttribute('for') === el.id) ? el.next() : undefined;
label = (el.previous() != null && el.previous().tagName === 'LABEL' && el.previous().readAttribute('for') === el.id) ? el.previous() : label;
var action = function(el) {
el.checked = (el.checked) ? false : true;
fake_el.className = 'checkbox checkbox_' + el.checked;
}
fake_el.observe('click', function() { action(el); });
if (label != null) { label.observe('click', function() { c.log(el); action(el); c.log(el); }); }
el.insert({ after:fake_el }).hide();
}
});

I changed a couple items and created a jsFiddle for this. First and foremost, c.log had to be changed to console.log for it to work for me :). After that, the only thing I changed was how the divs were added, since it wasn't working for me with insert. I set up some test data and away I went...
EDIT: Perhaps you don't have a non-label tag between two checkboxes and it is getting confused? Notice I have a br between label and the next checkbox, maybe you need to do something like that.

how to select all class except the clicked element in JQuery?

I have a website developed on Drupal. I use a module called collapsiblock (it is basicly a JQuery plugin) to achieve accordion like effect. It is working fine with me (although it is in Beta). But I want to modify it so that when the user clicks on one item of the accordion the other items will collapsed.
In its current stats, it is working in a way that when the user click on one item, it will check if the item is already collapsed or expanded and it will make the item the opposite. That means if the user clicks on one item it will expand and if he/she clicks on another item it will also expand, but it will not collapse the previously clicked item.
You can see the code below. I know where should I add the code to collapse and how to collapse and expand. My question is: How do I select all the items that have the class '.collapsiblock' except the one that the user has clicked??
Note: the item that has the class '.collapsiblockCollapsed' get collapsed and if this class is removed from the item it get expanded.
// $Id: collapsiblock.js,v 1.6 2010/08/18 19:17:37 gagarine Exp $
Drupal.Collapsiblock = Drupal.Collapsiblock || {};
Drupal.behaviors.collapsiblock = function (context) {
var cookieData = Drupal.Collapsiblock.getCookieData();
var slidetype = Drupal.settings.collapsiblock.slide_type;
var defaultState = Drupal.settings.collapsiblock.default_state;
var slidespeed = parseInt(Drupal.settings.collapsiblock.slide_speed);
$('div.block:not(.collapsiblock-processed)', context).addClass('collapsiblock-processed').each(function () {
var id = this.id;
var titleElt = $(':header:first', this).not($('.content :header',this));
if (titleElt.size()) {
titleElt = titleElt[0];
// Status values: 1 = not collapsible, 2 = collapsible and expanded, 3 = collapsible and collapsed, 4 = always collapsed
var stat = Drupal.settings.collapsiblock.blocks[this.id] ? Drupal.settings.collapsiblock.blocks[this.id] : defaultState;
if (stat == 1) {
return;
}
titleElt.target = $(this).find('div.content');
$(titleElt)
.addClass('collapsiblock')
.click(function () {
var st = Drupal.Collapsiblock.getCookieData();
if ($(this).is('.collapsiblockCollapsed')) {
$(this).removeClass('collapsiblockCollapsed');
if (slidetype == 1) {
$(this.target).slideDown(slidespeed);
}
else {
$(this.target).animate({height:'show', opacity:'show'}, slidespeed);
}
// Don't save cookie data if the block is always collapsed.
if (stat != 4) {
st[id] = 1;
}
}
else {
$(this).addClass('collapsiblockCollapsed');
if (slidetype == 1) {
$(this.target).slideUp(slidespeed);
}
else {
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
}
// Don't save cookie data if the block is always collapsed.
if (stat != 4) {
st[id] = 0;
}
}
// Stringify the object in JSON format for saving in the cookie.
var cookieString = '{ ';
var cookieParts = [];
$.each(st, function (id, setting) {
cookieParts[cookieParts.length] = ' "' + id + '": ' + setting;
});
cookieString += cookieParts.join(', ') + ' }';
$.cookie('collapsiblock', cookieString, {path: Drupal.settings.basePath});
});
// Leave active blocks uncollapsed. If the block is expanded, do nothing.
if (stat == 4 || (cookieData[id] == 0 || (stat == 3 && cookieData[id] == undefined)) && !$(this).find('a.active').size()) {
$(titleElt).addClass('collapsiblockCollapsed');
$(titleElt.target).hide();
}
}
});
};
Drupal.Collapsiblock.getCookieData = function () {
var cookieString = $.cookie('collapsiblock');
return cookieString ? Drupal.parseJson(cookieString) : {};
};
UPDATE:
Problem has been solved by adding the following code:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
just above the following line:
$(this).removeClass('collapsiblockCollapsed');

Use the not selector.
Example:
$('.collapsiblock').click(function(){
$('.collapsiblock').not(this).each(function(){
$(this).slideUp();
});
$(this).slideDown();
})

Try this,This is a better way because if you use each function it will load and in the future when you have more than a thousand div it will take a long time to slide up and slide down.
Example:
$('.collapsiblock').click(function(){
$('.collapsiblock').not(this).slideUp();
$(this).slideDown();
});

You could keep track of which element has already been clicked with your own jquery click handler and jquery's data(...) function. Then filter iterating your .collapsiblock items with jquery's filter (...) function to include the items you need.