We Keep Coding

Improve my Jquery code to hide and show elements

I am new to Jquery and learning. I wrote some script, but I know its not efficient. Trying to follow DRY principles. Can someone please make this look nicer...it works fine, but i dont like it.
It works, just not efficient code.
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
});
});
</script>

Since the conditional statement inside the jquery code is same. You can wrap it into single javascript function and call it whereever it is needed.
<script>
$(document).ready(function () {
const showAndHide = (val) => {
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
}
var val = $('#id_ocftype').val();
showAndHide(val);
$('#id_ocftype').change(function () {
var val = $(this).val();
showAndHide(val);
});
});
</script>

The elements to show or hide are always the same, so you can put them all into a single variable and reference that variable.
$(document).ready(function () {
const elms = $('#div_id_date, #div_id_amount, #div_id_signedby');
const onChange = () => {
const val = $('#id_ocftype').val();
if (val <= 3) {
elms.hide();
} else {
elms.show();
};
};
onChange();
$('#id_ocftype').change(onChange);
});

You can look into .toggleClass.
It allows you to specify when to add/ remove class.
function handleVisibility() {
var val = $('#id_ocftype').val();
const hide = val <= 3
$('#div_id_date').toggleClass('hide', hide)
$('#div_id_amount').toggleClass('hide', hide)
$('#div_id_signedby').toggleClass('hide', hide)
}
$(document).ready(function() {
$('#id_ocftype').change(handleVivibility);
handleVisibility()
});

you can create a common function
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
const hideEl = () => {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
const showEl = () => {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
}
if (val <= 3) {
hideEl();
}
else {
showEl();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
hideEl();
}
else {
showEl();
};
});
});
</script>
also you can use toggle
$("button").click(() => {
$("#test").toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">test</div>
<button>Hide/Show</button>

Can someone help me write this in javascript

I am trying to write this code in javascript from jquery
I already tried but cant seems to get equivalent to work.
$(document).ready(function() {
$('a').click(function() {
var selected = $(this);
$('a').removeClass('active');
$(selected).addClass('active');
});
var $a = $('.a'),
$b = $('.b'),
$c = $('.c'),
$d = $('.d'),
$home = $('.home'),
$about = $('.about');
$a.click(function() {
$home.fadeIn();
$about.fadeOut();
});
$b.click(function() {
$home.fadeOut();
$about.fadeIn();
});
});
The code works perfect in jQuery, but am trying to just use javascript. Its basically to add and remove class when a nav item is selected. I don't know if am explaining as clear as possible but am try to write the equivalent of this in javascript.
This is what I have tried.
var callback = function(){
var clickHandler1 = function() {
document.getElementById("home").classList.remove("home");
//var rem = document.getElementById("home");
//fadeOut(rem);
//alert("I am clicked B");
};
var anchors1 = document.getElementsByClassName("b");
for (var i = 0; i < anchors1.length; i++) {
var current = anchors1[i];
current.addEventListener('click', clickHandler1, false);
}
function fadeOut(el){
el.style.opacity = 1;
function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
fadeIn(el, display){
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
}
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}

The code in es6:
window.onload = function() {
const allLinks = document.querySelectorAll('a')
console.log(allLinks)
const removeAllClass = () => {
allLinks.forEach(link => {
link.classList.remove('active')
})
}
allLinks.forEach(element => {
element.addEventListener('click', event => {
removeAllClass()
element.classList.add('active')
})
})
let $a = document.querySelectorAll('.a'),
$b = document.querySelectorAll('.b'),
$home = document.querySelector('.home'),
$about = document.querySelector('.about');
$a.forEach(element => {
element.addEventListener('click', event => {
$about.classList.remove('fadeIn');
$home.classList.add('fadeIn');
})
})
$b.forEach(element => {
element.addEventListener('click', event => {
$home.classList.remove('fadeIn');
$about.classList.add('fadeIn');
})
})
}
you can see working on https://codepen.io/rwladyka/pen/qBBBpvy

document.getElementsByClassName('a') is the javascript equivalent of $('.a')

How to update function within another function in JavaScript?

How I can update function _handlePaste() inside function paste?
$.FE.MODULES.paste = function(editor) {
var clipboard_html;
function _handlePaste(e) {
// Read data from clipboard.
if (e && e.clipboardData && e.clipboardData.getData) {
var types = '';
var clipboard_types = e.clipboardData.types;
if (editor.helpers.isArray(clipboard_types)) {
for (var i = 0; i < clipboard_types.length; i++) {
types += clipboard_types[i] + ';';
}
} else {
types = clipboard_types;
}
clipboard_html = '';
// HTML.
if (/text\/html/.test(types)) {
clipboard_html = e.clipboardData.getData('text/html');
}
// Safari HTML.
else if (/text\/rtf/.test(types) && editor.browser.safari) {
clipboard_html = e.clipboardData.getData('text/rtf');
} else if (/text\/plain/.test(types) && !this.browser.mozilla) {
clipboard_html = editor.html.escapeEntities(e.clipboardData.getData('text/plain')).replace(/\n/g, '<br>');
}
if (clipboard_html !== '') {
_processPaste();
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
} else {
clipboard_html = null;
}
}
// Normal paste.
_beforePaste();
}
}
The function is the part of jquery plugin, so I would like to change the function outside of the plugin's files to be able further update it.
I am trying to change it like this:
(function ($) {
$.FE.MODULES.paste._handlePaste = function (e) {
// my implementation of _handlePaste
}
})(window.jQuery);
But I can't access _handlePaste this way.

JavaScript jq scope

It's simple validation module. Now, i can't understand why my functions (validateEmail) can't call successful. I have no js errors, but browser do postback with my form thorought validation code
<script type="text/javascript">
var Validation;
(function (Validation) {
var FormValidator = (function () {
function FormValidator(formid) {
this.emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
this.formID = formid;
}
FormValidator.prototype.Validate = function () {
var errorsSum;
$('#' + this.formID).find('input[type="text"][validate], textarea[validate]').each(function (index, item) {
var validateType = $(item).attr('validate');
switch(validateType) {
case 'text':
case 'password': {
errorsSum += FormValidator.prototype.validateText(item);
break;
}
case 'email': {
errorsSum += FormValidator.prototype.validateEmail(item);
break;
}
}
});
return errorsSum == 0;
};
FormValidator.prototype.validateGeneric = function (element, validationFunc) {
var jqElement = $(element);
alert('tested element = ' + jqElement);
if(validationFunc(jqElement.val())) {
alert('tested element error = ' + jqElement.val());
element.removeClass('error');
return 0;
} else {
element.addClass('error');
}
alert('tested element success = ' + jqElement.val());
return 1;
};
FormValidator.prototype.validateEmail = function (element) {
return FormValidator.prototype.validateGeneric(element, function (elementValue) {
return FormValidator.prototype.emailPattern.test(elementValue);
});
};
FormValidator.prototype.validateText = function (element) {
return FormValidator.prototype.validateGeneric(element, function (elementValue) {
return elementValue != '';
});
};
return FormValidator;
})();
Validation.FormValidator = FormValidator;
})(Validation || (Validation = {}));
</script>
This is my form
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #id = "register-form", #class = "form-horizontal"}))
{
...
#Html.TextBoxFor(m => m.Email, new { #placeholder = #L("Email"), #name = "email", #validate = "email" })
...
}
This is validation code
<script type="text/javascript">
$(function () {
$('#register-form').submit(function() {
return (new Validation.FormValidator('register-form').Validate());
});
});
</script>
I don't understand js so deep

You need to catch the submit event and prevent it from firing, validate the form, then submit if it was valid. Right now you are running the javascript as soon as it's submitted, but it just keeps submitting anyway since you don't stop the http request from being made.
On a related note, this is a huge mess. You don't need anything close to that much code just to validate emails and text presence on your form. This is all you need:
var validate = function(form){
var form_valid = true;
form.find('input[validate], textarea').each(function(index, el){
var type = el.attr('validate');
if (type == 'email') {
if (!el.match(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)) { form_valid = false; el.addClass('error'); }
}
if (type == 'text') {
if (!el.val() == '') { form_valid = false; el.addClass('error'); }
}
});
return form_valid
}
$('#register-form').on('submit', function(){
validate($(this)) && $(this).submit()
});
Hope this helps...
Edit: made the example a bit more modular

restricting input tags to maximum 5

I have got following jquery tags plugin.
I want to to restrict maxmimum 5 tags, so that user can not enter more than 5 words (separated by spaces).
Can someone please help me doing it?
Thanks.. Following is original plugin code:
(function($) {
var delimiter = new Array();
jQuery.fn.addTag = function(value,options) {
var options = jQuery.extend({focus:false},options);
this.each(function() {
id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
if (tagslist[0] == '') {
tagslist = new Array();
}
value = jQuery.trim(value);
if (value !='') {
$('<span class="tag">'+value + ' x</span>').insertBefore('#'+id+'_addTag');
tagslist.push(value);
$('#'+id+'_tag').val('');
if (options.focus) {
$('#'+id+'_tag').focus();
} else {
$('#'+id+'_tag').blur();
}
}
jQuery.fn.tagsInput.updateTagsField(this,tagslist);
});
return false;
};
jQuery.fn.removeTag = function(value) {
this.each(function() {
id = $(this).attr('id');
var old = $(this).val().split(delimiter[id]);
$('#'+id+'_tagsinput .tag').remove();
str = '';
for (i=0; i< old.length; i++) {
if (escape(old[i])!=value) {
str = str + delimiter[id] +old[i];
}
}
jQuery.fn.tagsInput.importTags(this,str);
});
return false;
};
jQuery.fn.tagsInput = function(options) {
var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false}},options);
this.each(function() {
if (settings.hide) {
$(this).hide();
}
id = $(this).attr('id')
data = jQuery.extend({
pid:id,
real_input: '#'+id,
holder: '#'+id+'_tagsinput',
input_wrapper: '#'+id+'_addTag',
fake_input: '#'+id+'_tag',
},settings);
delimiter[id] = data.delimiter;
$('<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag"><input id="'+id+'_tag" value="" default="'+settings.defaultText+'" /></div><div class="tags_clear"></div></div>').insertAfter(this);
$(data.holder).css('width',settings.width);
$(data.holder).css('height',settings.height);
if ($(data.real_input).val()!='') {
jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
} else {
$(data.fake_input).val($(data.fake_input).attr('default'));
$(data.fake_input).css('color','#666666');
}
$(data.holder).bind('click',data,function(event) {
$(event.data.fake_input).focus();
});
// if user types a comma, create a new tag
$(data.fake_input).bind('keypress',data,function(event) {
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) {
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
return false;
}
});
$(data.fake_input).bind('focus',data,function(event) {
if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) {
$(event.data.fake_input).val('');
}
$(event.data.fake_input).css('color','#000000');
});
if (settings.autocomplete_url != undefined) {
$(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) {
if (data) {
d = data + "";
$(event.data.real_input).addTag(d,{focus:true});
}
});;
$(data.fake_input).bind('blur',data,function(event) {
if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) {
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false});
}
$(event.data.fake_input).val($(event.data.fake_input).attr('default'));
$(event.data.fake_input).css('color','#666666');
return false;
});
} else {
// if a user tabs out of the field, create a new tag
// this is only available if autocomplete is not used.
$(data.fake_input).bind('blur',data,function(event) {
var d = $(this).attr('default');
if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) {
event.preventDefault();
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
} else {
$(event.data.fake_input).val($(event.data.fake_input).attr('default'));
$(event.data.fake_input).css('color','#666666');
}
return false;
});
}
$(data.fake_input).blur();
});
return this;
};
jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) {
id = $(obj).attr('id');
$(obj).val(tagslist.join(delimiter[id]));
};
jQuery.fn.tagsInput.importTags = function(obj,val) {
$(obj).val('');
id = $(obj).attr('id');
var tags = val.split(delimiter[id]);
for (i=0; i<tags.length; i++) {
$(obj).addTag(tags[i],{focus:false});
}
};
})(jQuery);

best way is to count the number of "tag" classes already added, and then you can handle it differently, for example you can prevent showing the "add a tag" input once 5 tags inserted by defining maxTags and updating jQuery.fn.addTag and jQuery.fn.removeTag :
/*
jQuery Tags Input Plugin 1.0
Copyright (c) 2010 XOXCO, Inc
Documentation for this plugin lives here:
http://xoxco.com/clickable/jquery-tags-input
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
ben#xoxco.com
*/
(function($) {
var delimiter = new Array();
var maxTags = 5;
jQuery.fn.addTag = function(value,options) {
var options = jQuery.extend({focus:false},options);
this.each(function() {
id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
if (tagslist[0] == '') {
tagslist = new Array();
}
value = jQuery.trim(value);
if (value !='') {
$('<span class="tag">'+value + ' x</span>').insertBefore('#'+id+'_addTag');
tagslist.push(value);
$('#'+id+'_tag').val('');
if (options.focus) {
$('#'+id+'_tag').focus();
} else {
$('#'+id+'_tag').blur();
}
}
jQuery.fn.tagsInput.updateTagsField(this,tagslist);
});
if($(".tag").length>maxTags-1){$('#'+id+'_addTag').hide()}
return false;
};
jQuery.fn.removeTag = function(value) {
this.each(function() {
id = $(this).attr('id');
var old = $(this).val().split(delimiter[id]);
$('#'+id+'_tagsinput .tag').remove();
str = '';
for (i=0; i< old.length; i++) {
if (escape(old[i])!=value) {
str = str + delimiter[id] +old[i];
}
}
jQuery.fn.tagsInput.importTags(this,str);
});
if($(".tag").length<maxTags){$('#'+id+'_addTag').show()}
return false;
};
jQuery.fn.tagsInput = function(options) {
var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false}},options);
this.each(function() {
if (settings.hide) {
$(this).hide();
}
id = $(this).attr('id')
data = jQuery.extend({
pid:id,
real_input: '#'+id,
holder: '#'+id+'_tagsinput',
input_wrapper: '#'+id+'_addTag',
fake_input: '#'+id+'_tag',
},settings);
delimiter[id] = data.delimiter;
$('<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag"><input id="'+id+'_tag" value="" default="'+settings.defaultText+'" /></div><div class="tags_clear"></div></div>').insertAfter(this);
$(data.holder).css('width',settings.width);
$(data.holder).css('height',settings.height);
if ($(data.real_input).val()!='') {
jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
} else {
$(data.fake_input).val($(data.fake_input).attr('default'));
$(data.fake_input).css('color','#666666');
}
$(data.holder).bind('click',data,function(event) {
$(event.data.fake_input).focus();
});
// if user types a comma, create a new tag
$(data.fake_input).bind('keypress',data,function(event) {
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) {
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
return false;
}
});
$(data.fake_input).bind('focus',data,function(event) {
if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) {
$(event.data.fake_input).val('');
}
$(event.data.fake_input).css('color','#000000');
});
if (settings.autocomplete_url != undefined) {
$(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) {
if (data) {
d = data + "";
$(event.data.real_input).addTag(d,{focus:true});
}
});;
$(data.fake_input).bind('blur',data,function(event) {
if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) {
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false});
}
$(event.data.fake_input).val($(event.data.fake_input).attr('default'));
$(event.data.fake_input).css('color','#666666');
return false;
});
} else {
// if a user tabs out of the field, create a new tag
// this is only available if autocomplete is not used.
$(data.fake_input).bind('blur',data,function(event) {
var d = $(this).attr('default');
if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) {
event.preventDefault();
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
} else {
$(event.data.fake_input).val($(event.data.fake_input).attr('default'));
$(event.data.fake_input).css('color','#666666');
}
return false;
});
}
$(data.fake_input).blur();
});
return this;
};
jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) {
id = $(obj).attr('id');
$(obj).val(tagslist.join(delimiter[id]));
};
jQuery.fn.tagsInput.importTags = function(obj,val) {
$(obj).val('');
id = $(obj).attr('id');
var tags = val.split(delimiter[id]);
for (i=0; i<tags.length; i++) {
$(obj).addTag(tags[i],{focus:false});
}
};
})(jQuery);

How about adding something like this:
if($('.tag').length>=5){
$('#tags_tag').attr('disabled','true');
}
I put a little more flair into my demo.

Probably the easiest solution is to change line 89 of jquery.tagsinput.js from:
var skipTag = $(tagslist).tagExist(value);
to:
var skipTag = $(tagslist).length > 5 || $(tagslist).tagExist(value);