Develop Reference

Input is not detecting that it is empty if removing text with "ctrl + a + backspace"

I am doing some easy div filtering with jQuery and input field. It is working, however it is not detecting that it is empty if I remove input using " Ctrl + a + backspace ", in other words if I select all text and remove it. What causes this?
It is not reordering divs back to default if using the keyboard commands but is going back to normal if you backspace every character.
This is how I do it:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
$('.card').show();
} else {
$('.card').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
});

Your if block that handles the empty string is not showing the same elements that the else block hides. The else block calls .parent() but the if block does not.
So the else case shows or hides the parent of each .card element, but the if case shows the .card elements themselves—without unhiding their parents. See my comments added to the code (I also reformatted the conditional expression in the else for clarity):
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
// Show all of the .card elements
$('.card').show();
} else {
$('.card').each(function() {
var text = $(this).text().toLowerCase();
// Show or hide the *parent* of this .card element
text.indexOf(valThis) >= 0 ?
$(this).parent().show() :
$(this).parent().hide();
});
};
});
Since it sounds like the non-empty-string case is working correctly, it should just be a matter of adding .parent() in the if block so it matches the others:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
// Show the parent of each .card element
$('.card').parent().show();
} else {
// Show or hide the parent of each .card element
$('.card').each(function() {
var text = $(this).text().toLowerCase();
text.indexOf(valThis) >= 0 ?
$(this).parent().show() :
$(this).parent().hide();
});
};
});
This is the kind of situation where familiarity with your browser's debugging tools would pay off big time. The .show() or .hide() methods manipulate the DOM, and by using the DOM inspector you could easily see which elements are being hidden and shown.
In fact, as a learning exercise I recommend un-fixing the bug temporarily by going back to your original code, and then open the DOM inspector and see how it reveals the problem. While you're there, also try out the JavaScript debugger and other tools.
If you use Chrome, here's an introduction to the Chrome Developer Tools. Other browsers have similar tools and documentation for them.

It seems to be working just fine:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
$('.card').show();
console.log("input is empty");
} else {
console.log("input is not empty");
$('.card').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="brandSearch">

keep focus on text input field if another input field is not clicked

I am trying to create an onblur event where any time some one clicks anywhere on the page it will stay focused on that element unless it is a specif element then it will refocus to that specific element.
I am probably way off but this is what I tried, and it just stays focused on the Barcode element no matter what.
function stayOnBarcode() {
var QTY = document.getElementById("QTY");
var Barcode = document.getElementById("Barcode");
if (Barcode.value === "") {
if (QTY.focus() === true) {
QTY.focus();
}
else if (document.hasFocus() === true) {
Barcode.focus();
}
}
else {
Barcode.focus();
}
}

How about something like this:
$(document).on("mousedown", function(e) {
clicked = $(e.target)
})
$("input").on("blur", function() {
if (!clicked.is("#QTY") && !clicked.is("#Barcode")) {
$(this).focus()
}
})
It stores the most recently clicked element in the variable clicked, then on blur event it checks if last_clicked is something other than #QTY or #Barcode. If so, it re-focuses the input being blurred.
You might need to tweak it to fit the exact conditions you have in mind, or feel free to add specifics to your question.
Check out this working fiddle: https://jsfiddle.net/oez0488h/63/

CKeditor Inline: repeats paragraph ids

I have turned on allowedContent property in config.
config.allowedContent = "true"
This allows me to add ids to paragraphs inside contenteditable div.
However, now whenever I hit enter key inside the contenteditable div a new paragraph with same id is generated. I would assume after hiiting enter key a new paragraph should be inserted without any ids but it looks like the ids are copied from previously generated paragraph.
Is there any way to avoid this?

Try this. It's not bullet proof but works well enough. Even though I wrote it, I kind of hate it so if you improve on it, please share the love ;)
editor.on('key', function (evt) {
// Only if editor is not in source mode.
if (editor.mode === 'source') { return; }
// Enter is keyCode 13
if (evt.data.keyCode === 13) {
// if we call getStartElement too soon, we get the wrong element sometimes
setTimeout(function () {
var selection = editor.getSelection();
if (typeof selection === 'undefined') { return; }
var startElement = selection.getStartElement();
// If there are spans nested in the paragraph preserve them
// And we need to find the parent paragraph
// This could be optimized...
if (startElement.getName() == 'span') {
var text = "";
while (startElement.getName() == 'span') {
text += startElement.getHtml();
startElement = startElement.getParent();
}
if (text.length === 0) {
startElement.setHtml(' ');
} else {
startElement.setHtml(text);
}
}
// HERE I remove the "id" attribute.
startElement.removeAttribute("id");;
}, 10);
}
});

Disable Select based on another element on the Same Row

In a table, I have a row with two inputs - one select and one text. What I want to achieve is that if one has a value, then the other (on the same row) should disable. This works correctly onload when there is a value in the textbox, but doesn't seem to work when there is a value in only the select box.
As you can see in the example here: http://jsfiddle.net/anAgent/UBUhn/1/ the "change" event works correctly, but it doesn't work onload.
Any help would greatly be appreciated!
I'm working with jQuery 1.5.2 and with both Google Chrome and IE9
Update With Final Code
Thanks #scoopseven and #eicto for your input. Based on these two answers, here's the final code. I hope it helps someone else.
$(document).ready(function() {
$(".validation-compare").change(runRowValidation);
$(".validation-compare").each(runRowValidation);
});
function runRowValidation() {
var $me = $(this),
$other = $('.validation-compare',$me.closest("tr")).not($me),
mVal = $me.val(),
oVal =$other.val();
if(mVal != "" && oVal == "") {
$me.removeAttr('disabled');
$other.attr('disabled',1);
} else if(mVal == "" && oVal != "") {
$other.removeAttr('disabled');
$me.attr('disabled',1);
} else {
$other.removeAttr('disabled');
$me.removeAttr('disabled');
}
}​
You can see it in action at: http://jsfiddle.net/anAgent/UBUhn/24/

i don't think that you you need to set the class valid, all you have to do is replacing
var $otherInput = $('.validation-compare', $parent).not('.valid');
by
var $otherInput = $('.validation-compare', $parent).not($me);
And this will resolve your problem on onload. Here is an example

var validme=function() {
var me=$(this);
me.removeClass('validation-compare');
if (me.val()) {
console.log(me);
me.addClass('valid');
me.parent().parent().find('.validation-compare').attr('disabled',1);
me.addClass('validation-compare');
return;
}
me.removeClass('valid');
if (me.parent().parent().find('.validation-compare.valid').length<1) {
me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
me.addClass('validation-compare');
}
$('.validation-compare').each(validme);
$('.validation-compare').change(validme)
http://jsfiddle.net/UBUhn/22/

You need to separate out the function and call it on the click event and on page load. Something like this:
jQuery(function($){
function myFunction() {
// do somestuff
}
// myFunction needs to be called when select is clicked and when page is loaded
$('#someelement').click(myFunction);
$(document).ready(myFunction);
});

function that adds <SPAN>

Good morning, I have a doubt.
I have a function that adds a click the User, the side of my input
Plus this gives an error. I wanted just once even if adicionace a person clicks the button several times the action. Do you have a scan after input if not add another
My code.
//th = Name of the input that will add, at the low <SPAN>
if(d.length == 0){
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
return false;
}
I would be very grateful for the help. :)

You should search for span.error first with $.find, and add it only if it isn't there already:
if(d.length == 0){
var errorSpan = $(th).find("span.error").length;
if(!errorSpan) {
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
}
return false;
}

use jQuery One. Attach a handler to an event for the elements. The handler is executed at most once per element.
$('#yourbuttonid').one('click', function() {
if(d.length == 0){
$(th).after('<SPAN class="erro">'+txt+'</SPAN>');
this.focus();
return false;
}
});

Register the event using $('selector').one('click', function(e) { /* your code */ }); to make it fire only once.
If th is the input name (a string), your selector should be like $('input[name='+th+']') instead of $(th)