We Keep Coding

How to write a single Jquery function to trigger on document change and ready events

What I am trying to do is just to call this function once the document has loaded but also whenever some of the elements values are changed. I was wandering if there is a way to do this without writing the same piece of code twice, for document.ready() event and document.change().
$(document).on("change", "#holiday-editor input[name=StartDate],input[name=EndDate]", function() {
that.UpdateDays();
if ($("#holiday-editor input[name=StartDate]").val() == $("#holiday-editor input[name=EndDate]").val() && $("#holiday-editor input[name=StartDate]").val() + $("#holiday-editor input[name=EndDate]").val() != "") {
$("#IsHalfDay").show();
} else {
$("#IsHalfDay").hide();
$("input[name=HalfDay]").removeAttr("checked");
$("#amPM").hide();
$("#HalfDayAP").val("");
}
});
What I basically need is this function to run and check already existing values on the form before they get changed.

Use like this:
var changeFn = function() {
that.UpdateDays();
if ($("#holiday-editor input[name=StartDate]").val() == $("#holiday-editor input[name=EndDate]").val() && $("#holiday-editor input[name=StartDate]").val() + $("#holiday-editor input[name=EndDate]").val() != "") {
$("#IsHalfDay").show();
} else {
$("#IsHalfDay").hide();
$("input[name=HalfDay]").removeAttr("checked");
$("#amPM").hide();
$("#HalfDayAP").val("");
}
};
$(document).on("change", "#holiday-editor input[name=StartDate],input[name=EndDate]", changeFn);
and you can call the changeFn() also on ready or whenever you want.

Show/Hide part of the page based on dropdown choice in MVC 5

I have a dropdown in MVC5 "view" by changing the dropdown part of the page is going to show and hide. I like to call this function in page load but is not working properly it shows all the text boxes when page loads as I don't know how to send "e" to the page load and when I change the drop down it gave me this error:
Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined
This is my code:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(
function toggleDIvDisplay(e) {
if (e == 1) {
$('#divAppName').hide();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 2) {
$('#divAppName').show();
$('#divSSN').hide();
$('#divRemref').hide();
}
if (e == 3) {
$('#divSSN').show();
$('#divAppName').hide();
$('#divRemref').hide();
}
if (e == 4) {
$('#divRemref').show();
$('#divSSN').hide();
$('#divAppName').hide();
}
and this is dropdown:
Search By: #Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new { #onchange = "toggleDIvDisplay(this.value)" })
thanks everyone for the answer.
Solution is to add this lines:
$(document).ready(function () {
toggleDIvDisplay(1);
});

First I dont think you should create the function in document.ready,
From this link
defining it outside the document.ready will make it accessible to your jS after your page has loaded.

Right after you define the function in $(document).ready(), just call it:
toggleDIvDisplay(1);
The above assumes you want your page-load behavior to be when e is set to 1.
$(document).ready(
function toggleDIvDisplay(e) {
// ... your implementation, removed for brevity
}
toggleDIvDisplay(1);
);

You could write your function in a way that it gets the value of the dropdown inside the function itself:
function setDivVisibility() {
var e = $('#ddl').val();
if (e == 1) {
// Show/Hide elements
} else if (e == 2) {
// Show/Hide elements
}
// and so on...
}
Then call the function for the first time on document ready:
$(document).ready(function() {
setModeVisibility();
});
Bonus: For unobtrusive JavaScript, put this in the document ready as well so you don't need to the onchange behavior mixed in with the html.
$('#ddl').change(function () {
setModeVisibility();
});

assuming ddl is the id of your dropdown, you can try this.
EDIT: simplified your conditions.
$(function() {
$('#ddl').on('change', function() {
var value = $(this).val();
$('#divAppName, #divSSN, #divRemref').hide();
if (value == 2) {
$('#divAppName').show();
}
else if (value == 3) {
$('#divSSN').show();
}
else if (value == 4) {
$('#divRemref').show();
}
});
});

How to continuously check the value of an input using jquery?

I have an input that is empty after page load, and if a user suddenly fill a value on it the value of the two inputs on the if condition should change to.
My problem is when I fill an input, the if condition result doesn't changed in real time.
script:
$(document).ready(function(){
var countTimerEmailName = setInterval(
function ()
{
emailName();
}, 500);
function emailName(){
if($('#emailCodeResult').val() != '' || $('#email').val() == ''){
clearInterval(countTimerEmailName);
}
$.ajax({
url:"view.php",
type:"GET",
data: { term : $('#email').val() },
dataType:"JSON",
success: function(result) {
}
});
};
});

Fire your function on change
$('#inputA, #inputB').change(function(){
if($('#inputA').val() != '' || $('#inputB').val() == '') {
alert("True");
}else{
alert("False");
}
})

You can use keyup like this:
$('#textboxID').on( 'keyup', function () {
//write your code here
});
For touch devices as rzr siad keyup won't occur.
You can write a function that is called every, say 1 sec or whatever, like this:
t1=window.setInterval(function(){foo()},1000);
function foo()
{
// write function definition here
}
or use blur as others suggested, if the you want to check value only after the user is done with that textbox and moves to next field.

var fieldcheck;
$(function() {
$("#input").focus(function() {
fieldcheck = setInterval(function() {
var innerValue = $("#input").val();
if (innerValue == "") {
// Your code
} else {
// Your code
}
}, 100);
});
$("#input").blur(function() {
clearInterval(fieldcheck);
});
});

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?

Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});

demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...

I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

Why is my jquery .each() function not working properly?

I wrote this function:
jQuery(document).ready(function() {
jQuery('input[type=text]').each( function(i) {
thisval = jQuery(this).val();
jQuery(this).blur( function() {
if (jQuery(this).val() == '') {
jQuery(this).val(thisval);
}
}); // end blur function
jQuery(this).focus( function() {
if (jQuery(this).val() == thisval) {
jQuery(this).val('');
};
});// end focus function
}); //END each function
}); // END document ready function
It's designed to get the value of an input, then if the user clicks away without entering a new value, the old value returns. This works properly with one of the inputs on the page, but not the others. However, when I remove the .blur and .focus functions and just use alert(thisval); it alerts the name of each input, so something is wrong with my function, but I can't figure out what. Any help?

You need var when declaring your variable so it's not a global one being shared, like this:
var thisval = jQuery(this).val();
Also since you're dealing specifically with text inputs you can just use the .value DOM property, like this:
jQuery(function() {
jQuery('input[type=text]').each(function(i) {
var thisval = this.value;
jQuery(this).blur( function() {
if (this.value == '') this.value = thisval;
}).focus( function() {
if (this.value == thisval) this.value = '';
});
});
});

thisval is a global variable so it is replaced with each loop. Make it local [stick var in front of it] and it should work like magic.
You should not just keep creating jQuery(this) over and over again. That is very inefficient. jQuery(this) is expensive. You should store one copy in a variable and use the variable.