We Keep Coding

How to nest an OnChange event in an OnLoad event?

I'm working with Sharepoint and am creating a list with injected Javascript and JQuery. I'm trying to keep a field hidden unless the user selects "Deferred" or "Removed" from a field above with a dropdown. I want this to happen with an OnChange event, however, I believe this OnChange event should be within the OnLoad event.
Here's the code so far:
_spBodyOnLoadFunctionNames.push("myFunction");
function myFunction(){
$("h3.ms-standardheader:contains('Status Justification')".closest("tr").hide();
var StatusVal = $('select[id*=Status]').val();
if (StatusVal == 'Not Started' || StatusVal == 'Deferred'){
$("h3.ms-standardheader:contains('Status Justification')".closest("tr").show();
---THIS SHOULD ONLY HAPPEN ONCHANGE FOR STATUS DROPDOWN---
)
};
How can I use something like:
$('select'.on('change', function() {
alert($(this).find(":selected").val());
});
to make Status Justification only show when Status is changed to "deferred" or "removed"?

$('select').on('change', function() { // whenever values are changed in dropdown, this will be called.
if($(this).val() == 'deferred') { // example: run some code when value selected is 'deferred'
// code goes here...
}
});
And you need not have above code inside $(document).ready(function(){ ..

Stop onclick method running with jQuery

I have a button similar to below
<button id="uniqueId" onclick="runMethod(this)">Submit</button>
What I'm trying to do is stop the runMethod from running, until after I've done a check of my own. I've tried using the stopImmediatePropagation function, but this doesn't seem to have worked. Here's my jQuery:
$j(document).on('click', '#uniqueId', function(event) {
event.stopImmediatePropagation();
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});
Note: runMethod basically validates the form, then triggers a submit.

What you want to do, especially in the way that you want to do it, requires a some sort of workaround that will always be a bit fiddly. It is a better idea to change the way the button behaves (e.g. handle the whole of the click event on the inside of the jQuery click() function or something along those lines). However I have found sort of a solution for your problem, based on the assumption that your user will first hover over the button. I am sure you can extend that functionality to the keyboard's Tab event, but maybe it will not work perfectly for mobile devices' touch input. So, bear in mind the following solution is a semi-complete workaround for your problem:
$(document).ready(function(){
var methodToRun = "runMethod(this)"; // Store the value of the onclick attribute of your button.
var condition = false; // Suppose it is enabled at first.
$('#uniqueId').attr('onclick',null);
$('#uniqueId').hover(function(){
// Check your stuff here
condition = !condition; // This will change to both true and false as your hover in and out of the button.
console.log(condition); // Log the condition's value.
if(condition == true){
$('#uniqueId').attr('onclick',methodToRun); // Enable the button's event before the click.
}
},
function(){
console.log('inactive'); // When you stop hovering over the button, it will log this.
$('#uniqueId').attr('onclick',null); // Disable the on click event.
});
});
What this does is it uses the hover event to trigger your checking logic and when the user finally clicks on the button, the button is enabled if the logic was correct, otherwise it does not do anything. Try it live on this fiddle.
P.S.: Convert $ to $j as necessary to adapt this.
P.S.2: Use the Javascript console to check how the fiddle works as it will not change anything on the page by itself.

Your problem is the submit event, just make :
$('form').on('submit', function(e) {
e.preventDefault();
});
and it works. Don't bind the button click, only the submit form. By this way, you prevent to submit the form and the button needs to be type button:
<button type="button" .....>Submit</button>
Assuming there's a form that is submitted when button is clicked.

Try adding
event.cancelBubble();
Hence your code becomes:
$j(document).on('click', '#uniqueId', function(event) {
// Don't propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});

Your code is mostly correct but you need to remove J:
$(document).on('click', '#uniqueId', function(event) {...
You also need to remove the onClick event from the inline code - there's no need to have it there when you're assigning it via jQuery.
<button id="uniqueId">Submit</button>

Cannot programmatically select radio button if preventDefault() called

I've got a 'catch 22' in Chrome. I cannot programmatically select a radio button within a click event if any other function bound to the same event makes a call to preventDefault().
For example, I have a radio button with a parent element bound to a click event in which preventDefault() is called. If the radio button is clicked directly it is not checked. This is to be expected. However, I actually need the radio button to be selected so within code I attempt to check it in another function bound to the click event: $(this).prop('checked', true);.
Oddly, this doesn't work and I cannot remove the call to preventDefault() or disable propagation because it is in third party code that I need to run.
Is this a bug? Any suggested workarounds?
Here is an example:
http://jsfiddle.net/LnLuk4st/
UPDATE:
I have tried #RGraham's suggestion. His example clearly works, but oddly it does not work in the context of my code. #RGraham's code had a syntax error which made it appear to be working.
Here's some context:
// Remember kendo tab
$(".k-tabstrip").each(function () {
var $tabStrip = $(this);
var $tabs = $tabStrip.find(".k-tabstrip-items .k-item");
var tabCookie = "Current_Tab_" + $tabStrip.attr("id");
// On tab change, set cookie
$tabs.click(function () {
createCookie(tabCookie, $(this).attr("aria-controls"), 1);
$tabStrip.parent().css({ 'min-height': $tabStrip.parent().height() });
if ($(this).is('input')) { // Doesn't eval to true, 'this' is always a '.k-item'.
$(this).prop("checked", true);
} else {
// Never works if the input is clicked directly
$(this).find('input').prop("checked", true);
}
});
// #RGraham's suggestion...
$tabs.on('click', 'input', function() {
$(this).prop("checked", true); // Line reached but doesn't work either :(
});
// If cookie set, select tab
var tab = readCookie(tabCookie);
if (tab) {
$tabs.each(function () {
if ($(this).attr("aria-controls") == tab) {
$(this).click();
}
});
}
});

I still believe this behaviour to be a bug but I have found a workaround.
Capture the click of the radio button directly, prevent propagation, then programmatically click the parent of the radio button. This allows the third party code to run without applying preventDefault to the radio button.
// preventDefault bug fix.
$tabs.find("input").click(function (e) {
e.stopPropagation();
$(this).parent().click();
});

Binding more than one 'id' to On click of body tag and to perform actions depending on the button clicked?

I am developing a hotel application in mvc4 with the help of razor and jquery. And in my app, I am trying to bind a click event to 2 buttons in my page and do appropriate action based on the button clicked. But my problem, how do i check which button is clicked? I have id's for both buttons. I tried,
Jquery Find which button is clicked then run a specific If else statement? (Newbie)
but no luck because I have used the body tag to bind both buttons to the click event like,
$("body").on("click","#Room1, #Room2", function (e) {
if (counter> 0) {
//stmts
//stmts
if ($('#Room1').data('clicked', true))
//stmts
}
else {
if ($('#Room2').data('clicked', true))
{
//stmts
alert('Room1 clicked');
}
else
{
//stmts
alert('Room2 clicked');
}
//stmts
//stmts
}
});
(ie).,for both the buttons, I'm binding to the same click because i have few common stmts to be performed. But have to check if particular button is clicked and perform few other operations.
I can bind them seperately and define the handlers separately, but just that they have a few common operations and I dont want to repeat the code.
Can someone please help me? I am sure there are a bunch of jquery experts out there..
Thanks in advance...

This is actually very simple. When you use event delegation with the on method, the context of the event handler will be the delegated element. That is to say, it will be the element matched by the "#Room1, #Room2" selector. In very simple terms, within the event handler this will point to either the #Room1 or the #Room2 element.
You can then check this.id to determine which element was clicked.
$(document.body).on("click","#Room1, #Room2", function (e) {
alert(this.id + ' was clicked');
// common code
if (this.id === 'Room1') {
// #Room1 code
}
if (this.id === 'Room2') {
// #Room2 code
}
});

Differentiate change event incurred by user or script

I've encountered a situation where some script changes a select/radio/checkbox. That fires the change event. However I need, separately, an event to tell me the user changed the element, and obviously when change fires from the script it registers as a user change.
Is there a way to prevent a script from firing the change event when you alter the value of a select/radio/checkbox?

Use jQuery.trigger() and pass an additional parameter when triggering the event from code.
For example:
$('select').bind('change', function(e, isScriptInvoked) {
if (isScriptInvoked === true) {
// some code for when artificial
} else {
// some code for when organic
}
});
// Trigger the event.
$('select').trigger('change', [true]);

Try:
function changeEvent(){
if(this.type.toLowerCase()=='select' || this.type.toLowerCase()=='radio' || this.type.toLowerCase()=='checkbox')
return false;
else{
//Your code here
}
}