Develop Reference

jQuery input event triggered after page reload only

Basically I have two divs,
<div id="firstPage"></div>
and
<div id="details">
<div id='searchBox' class='detail--searchBox'>
<input id='txtSearchTerm' name='txtSearchTerm' type='text'>
</div>
</div>
On page load the textbox with id searchBox is hidden and it is shown on click event of div with id firstPage. I have following function which must be triggered on textbox change. But this input event is triggered once page is reloaded.
onSearchBoxOnDetailsChange: function () {
$("#searchBox").on("input", "#txtSearchTerm", function () {
var val = $(this).val().trim();
val = val.replace(/\s+/g, '');
if (val.length > 1) {
console.log(val);
} else {
}
});
},

Write your code like below:
onSearchBoxOnDetailsChange: function () {
$(document).on("input", "#searchBox #txtSearchTerm", function () {
var val = $(this).val().trim();
val = val.replace(/\s+/g, '');
if (val.length > 1) {
console.log(val);
} else {
}
});
},

A button should show/hide depending on whether or not there is value in input field

Right now the button shows when input is added to the input field, but if I remove the input the button doesn't hide.
My only idea for a solution is to divide the function into 2 seperate ones.
That is, one that adds the input to the input field on click, and then another functions that keeps track of input.val, and controls the hide/show effect of the button.
Would that be a better way of doing it?
$("#peopleInPopup").on('click', '.list-group-item', function() {
var peopleName = $(this).children("span").text();
var peopleID = $(this).children("span").attr("class");
var input = $("#friendsNames");
input.val(input.val() + peopleName + "");
if (input.val().length === 0) {
$("#checkButton").toggle(false);
console.log("button should NOT display");
} else {
console.log("button should display");
$("#checkButton").toggle(true);
}
$("#checkButton").click(function() {
var newParticipants = input.val();
socket.emit("addParticipantsToConversation", newParticipants);
$("#chatToInfo").append(", ", input.val());
$("#friendsNames").val("");
$(":mobile-pagecontainer").pagecontainer("change", $("#pagefour"), {
transition: "slidedown"
});
});
});

Just use show and hide from jQuery instead, perhaps? I assume you want this to happen as the input is changing, so I've thrown in keyup (could use onChange or alternatives).
Tweaking your code slightly...
$('input').on('keyup', function (event) {
let value = event.target.value;
if (value && value !== '' && value.length > 0) {
$('#myButton').show();
} else {
$('#myButton').hide();
}
})
With a markup...
<input id='input' />
<button id='myButton'>GO</button>
And some sort of base style...
#go {
display: none;
}
Do the trick?

I actually just found a solution to my problem. The code below makes it work:
$("#peopleInPopup").on('click', '.list-group-item', function(){
var peopleName = $(this).children("span").text();
var peopleID = $(this).children("span").attr("class");
var input = $("#friendsNames");
input.val(input.val() + peopleName + "");
$("#checkButton").toggle(true);
$("#friendsNames").on('input', function(event) {
if (this.value.length === 0) {
console.log("Works!");
$("#checkButton").toggle(false);
console.log("button should NOT display");
} else {
console.log("button should display");
$("#checkButton").toggle(true);
}
});
$("#checkButton").click(function(){
var newParticipants = input.val();
socket.emit("addParticipantsToConversation", newParticipants);
$("#chatToInfo").append(", ",input.val());
$("#friendsNames").val("");
$(":mobile-pagecontainer").pagecontainer("change", $("#pagefour"), { transition: "slidedown" });
});
});

jquery ignoring upper&lowercase in function

hello world i have an problem i am currently making experimental search boxes with divs for my homepage ..
now ive tried to ignore the upperand lowercase but nothing will going successfull so i will ask how i can get ignore the upper and lower case in my code:
$(window).load(function(){
function hide_divs(search) {
if(search === "") {
$("#sboxs > div").show();
} else {
$("#sboxs > div").hide(); // hide all divs
$('#sboxs > div[id*="'+search+'"]').show(); // show the ones that match
}
}
$(document).ready(function() {
$("#search_field").keyup(function() {
var search = $.trim(this.value);
hide_divs(search);
});
});
});
html:
<div id="jOhAnNeS">heres the content of(Johannes)</div>
<div id="michael">heres the content of(Michael)</div>
<div id="TOM">heres the content(Tom)</div>
<div id="JERry">heres the content(Jerry)</div>
<div id="kIM">heres the content(Kim)</div>
<div id="joschUA">heres the content(Joschua)</div>
<div id="katY">heres the content(Katy)</div>
</div>

try this function instead
function hide_divs(search) {
var divs = $("#sboxs > div");
var match = search.toLowerCase();
divs.each( function(i,elem) {
if ( elem.id.toLowerCase().indexOf(match) > -1 )
$(elem).show();
else
$(elem).hide();
});
}

jQuery Toggle/cycle through 3 state

I have a button, which i need to run through 3 state. eg: Mute, On and Off
<html>
<head>
<!-- define mute/on/off styles -->
<style type="text/css">
.mute{ background:gray }
.on { background:green }
.off { background:red }
</style>
<!-- define the toggle/cycle function -->
<script language="javascript">
function toggleState(item){
if(item.className == "mute") {
item.className="on";
} else if(item.className == "on") {
item.className="off";
} else {
item.className="mute";
}
}
</script>
</head>
<body>
<!-- call 'toggleState' whenever clicked -->
<input type="button" id="btn" value="button" class="mute" onclick="toggleState(this)" />
</body>
</html>
How can i cycle through this using jQuery rather using plain JavaScript

Try this:
var classNames = ['mute','on','off'];
$('div').click(function () {
$(this).toggleClass(function (i, className, b) {
var index = (classNames.indexOf(className) + 1) % classNames.length;
$(this).removeClass(className);
return classNames[index];
});
});
In this code, className is the old class. Then get the new class through classNames array, then return it.
And before return, the old class should be removed.
And with this method, you can easily expand 3 to any larger number.
Here is jsfiddle. http://jsfiddle.net/f3qR3/2/
Another situation
If there are other classes in the element, you can use the following code, but it is more complicated.
var classNames = ['mute', 'on', 'off'];
$('div').click(function () {
var $this = $(this);
$this.toggleClass(function (i, className, b) {
var ret_index;
$.each(classNames, function (index, value) {
if ($this.hasClass(value)) {
ret_index = (index + 1) % classNames.length;
}
});
$this.removeClass(classNames.join(' '));
return classNames[ret_index];
});
});
Here is jsfiddle. http://jsfiddle.net/f3qR3/4/

$("#btn").click(function(
var this=$(this);
if(this.hasClass('mute')) {
this.removeClass("mute").addClass("on");
} else if(this.hasClass('on')) {
this.removeClass("on").addClass("off");
} else {
this.removeClass("off").addClass("mute");
}
}
});
You don't need to add any onclick function, just placed it under jquery ready() function.

try this without using if and else ..
$('input[type=button]').click( function(){
var statemp = { mute: 'on', on: 'off', off :'mute' };
var toggle = $(this).attr('class')
.split(' ')
// Requires JavaScript 1.6
.map( function( cls ) {
return statemp[ cls ] || cls ;
})
.join(' ');
$(this).attr('class','').addClass( toggle );
});

Try
$(function(){
$('#btn').click(function(){
var $this = $(this);
if($this.is('.mute')) {
$this.toggleClass("mute on");
} else if($this.is('.on')) {
$this.toggleClass("on off");
} else if($this.is('.off')) {
$this.toggleClass("off mute");
}
})
})
Demo: Fiddle

function filterme(val){
if (val == 1){
$('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive');
$("span").text("Active");
}
else if (val == 2)
{
$('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll');
$("span").text("All");
}
else if(val==3){
$('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive');
$("span").text("Passive");
}
}
<p class="range-field" style=" width:60px">
<input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" min="1" class="rangeAll" max="3" value="2">
</p>
<span>All</span>

javascript button show/hide on text changed

I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....

pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>

Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.

You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.

This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>

Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>