We Keep Coding

Modify HTML according to provided JQuery Snippet

I am trying to modify my HTML for according to class names in following jQuery Snippet. The snippet add class to texarea which turns border red
JQuery Snippet:
$(".scope-question .commentbox").removeClass("redColor")
$(".scope-question input[data-require-comment]:checked").each(function() {
$(this).closest(".scope-question").find(".commentbox").addClass("redColor");
});
Fiddle:
https://jsfiddle.net/t23un23y/
There are four questions, with 3 radio box as answer(Yes/No/Not Applicable) and a textarea for remarks. On Click of particular radio, Say NO, the textarea border turns red.
I am trying to modify HTML, using class names given in above snippet. Unable to get desire output. Could anyone please help in same.
Update:
1) if not necessary; please try not to modify JQuery code; but HTML Code as on particular click i need some changes in whole question row like grey of question, disable other radio etc.
2) I have just created fiddle for onClick of radio, i have use case to validate red color textarea on load too. So please also consider the case

Updated Fiddle: Here
Basically, your code assumes that .scope-question is a parent of the inputs, when in fact it is a sibling of their parents.
$('input[type="radio"]').click(function () {
var textarea = $(this).closest("div").next(".scope-question").find(".commentbox");
if($(this).val() === "No") {
textarea.addClass("redColor");
}
else {
textarea.removeClass("redColor");
}
});
Update
Detailed Fiddle
Here's a summary of the changes I made:
Updated the HTML to use .scope-question as a wrapper
Added data-require-comment attribute to the "NO" radio buttons.
I'm not sure the exact use case you want from this, but the code you provided suggests that this attribute indicates that comments are required (duh). Because you indicated that "NO" should turn the textarea red, I attached it to know. This of course suggests that if a user clicks yes, it's ok not to add a comment. You can modify this however.
Added a call to the update function for onload that checks all of the comment-required inputs that are checked to see if they have a comment in the comment box.

Here is your updated JSFiddle
Your only had to remove javascript each function and change few selectors

Blur event not firing on <label> - can't find workaround for dealing with hide-on-blur <input> text field

TL;DR how can I get this self-explanatory JSFiddle to work?
From the W3C:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
The basic idea, HTML:
<form>
<label>
<input type="text" />
after focusing in input, there should be no blur when clicking here
</label>
</form>
but blur should fire when clicking here
And JS:
$("form, label").on("blur", function() {
alert("you're not going to see this");
});
It doesn't work. A more illustrative example is in this JSFiddle.
I also tried focusout, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.
I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.
Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0 on the form or label elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form, blur events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input and then outside the form.
Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:
In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...
Clicking outside (on blur) should close the text input field again
Pressing enter should add the tag and close the input field
Clicking the "add tag" button should also add the tag and close the input field
The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.
Here is a JSFiddle with my best attempt so far.

The thing I think you are looking for is
e.stopPropagation();
This Fiddle here shows a little different way to handle it ... it put the hide on a window click (which would blur the input anyways) except on the label, which it would allow the click event to stop inside the label.
Happy coding!

use the below code to achieve the desired
$(document).on("blur", "label",function() {
$("div").append("form or label blurred<br>");
});
Here is the demo Fiddle

Try this it should work
.focus {
border-color:red;
}
$(document).ready(function() {
$('input').blur(function(){
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});
});

Add this piece of js in your Fiddle. you added listener for label but blur happens on anchor tag.
$("form a").on("blur", function() {
$("div").append("form or label blurred<br>");
});

according to your explanation i have create a demo
$("form > label >a").on("blur", function() {
return false
});
$("#outsideform > a").on("blur", function() {
alert("but blur should fire when clicking here");
});
Check the Demo here

For a while, I am posting an intermediate development. But this definitely will help you where exactly you should look for. The jquery implementation but not your javascript.
This is the real concern.
I have added 3 lines at different places. no big changes.
Added an || $("input").css("visibility") == "visible" to the if
condition
Added $("input").css("visibility","hidden"); to the inner else condition
$("input").css("visibility","visible"); to the outer (and last) else condition.
Please note this is intermediate, you need to click twice after a submit of non-empty text.
If I get time, I would post the correct working thing.
This is the fiddle.

tobek, your JSFiddle with my best attempt so far is almost there. The problem is your selector at the bottom in this section of code:
$("input").on("blur", function(){
$("input").hide();
});
You stated the problem correctly in your comments when you said: "THE PROBLEM: we never get in here because it's already been hidden because the input blurred".
Change the above section to this and I think you'll have what you're looking for.
$("input-blur label").on("blur", function(){
$("input").hide();
});
Because the "Add tag" link is inside the label clicking it doesn't trigger your "blur" function.

Rangy: Creating a new highlight is remembering the old highlight

I am using the highlighter module in Rangy.
I have a div element, which has some html. The html is actually loaded from a file using ajax, I have a button which does this loading.
Once the text is loaded, I can select a portion of the displayed html and press my "Highlight" button. This calls some Rangy code and highlights the text as desired...
//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);
//called on "Highlight" button click
highlighter.highlightSelection(highlightClassName, selection);
For the purpose of replicating, please select a large portion for first highlight.
Next, I click my load html button to reload the html. The highlight is gone, as expected. But now I select another bit of text, which happens to overlap the first highlight that I did. Now when I press the "Highlight" button, for some reason the highlight is the one from the previous highlight. Why is this happening?
I know there must be something to do with the merging, but I can't understand why. When I debug the JS I can see that the selection (from rangy.getSelection()) is what I expect it to be.
Here is a JSFiddle replication of the problem

The reason this is happening is because each highlight exists as a pair of character offsets rather than having references to actual ranges in the DOM, meaning that when some part of the DOM is replaced, existing highlights remain blissfully unaware and continue to assume they are applied to the original character range.
Your workaround is fine. Another way would be to call the highlighter's removeHighlights() method:
highlighter.removeHighlights(highlighter.highlights);
Demo: http://jsfiddle.net/8pMEt/1/
I'm going to add a removeAllHighlights() method that will do the same thing.
One thing that the documentation doesn't make clear is that highlighting is designed to work on static DOMs, or at least DOMs with text content that doesn't change. Changing the DOM after highlights have been created could obviously throw character offsets off and the whole thing falls down.

I solved this problem by re-creating the highlighter prior to each highlightSelection call. I don't know why this works, but the highlighter must store some data regarding previous highlights that is uses for highlight merging or something.
The code in my question can be changed as follows to solve the problem:
//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });
//called on "Highlight" button click
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);
highlighter.highlightSelection(highlightClassName, selection);

how to change the text color using jquery or javascript

I have a two items(rows) in the list box
I love to work with jquery
i love to work with javascript
I have textbox and button when I enter love in the text box when I click button i need to loopthrow this list box to find the text love and change that love text color? to yellow.
thanks

first of all, jQuery is javascript, it's a library written in javascript.
So, If I understand your problem, you have 3 interactive elements on your page:
a list box containing a list of words
a text field for the user to enter a word
a button for the user to click when he has written the text.
And you want the option to change color when the user clicks the button.
the code for thsi would be something like this:
$("#mybutton").click(function(){
var text = document.getElementById("mytextinput").value
$("#lstCodelist option").each(function (){
if(this.text()===text)
this.css('color':'yellow');
});
});
this is what happens:
line 1: I define a click handler when the button gets clicked.
line 2: I get the text from inside the textbox, I use getElementById to avoid the overhead of using jQuery for something that simple
line 3: I loop over each of the items in the list.
line 4: if the string in the textbox equals the text inside the option:
line 5, change the css property of the list option.
So no, this is not affecting the text, it only edits the css.

for changing text box color, you can add class to the element
addClass("myClass yourClass");
http://api.jquery.com/addClass/

How to prevent multiple html selection box displayed on screen?

I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!

JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");

Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.