Jquery Shortening code [closed] - javascript

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Ive posted a similar question before, yet again i find my self stupidly copy and pasting code.
is there anyway i can combine the following, im sure there is.. Please help.. Im in the learning process.
See i have the follow:
$(document).on('blur', 'input.email', function() {
validate_Email_Input(this);
});
$(document).on('blur', 'input.id', function() {
validate_Id_Input(this);
});
$(document).on('blur', 'input.pass', function() {
validate_Pass_Input(this);
});
$(document).on('blur', 'input.town', function() {
validate_Town_Input(this);
});
$(document).on('blur', 'input.relation', function() {
validate_Relation_Input(this);
});
$(document).on('blur', 'input.contact', function() {
validate_Relation_Input(this);
});
and for all of those i have separate function, here's an example of one:
function validate_Email_Input(el) {
var $this = $(el);
var input_groups = $this.parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
email_values = $.map($(inpg).children('input'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
});
return isValid;
}
I really want to learn how to write efficient code, Any Help Greatly apreciated...
I don't know if this helps at all. but what i'm trying to do is validate everything and have messages pop out for each specific field. This is my first really big project in jQuery and I thought i may as well show you all what im working on: http://jsfiddle.net/dawidvdh/36BLm/
sample of a valid ID: 85 0929 5266086

This should do the exact same thing as your first block of code:
$(document)
.on('blur', 'input.email', validate_Email_Input)
.on('blur', 'input.id', validate_Id_Input)
.on('blur', 'input.pass', validate_Pass_Input)
.on('blur', 'input.town', validate_Town_Input)
.on('blur', 'input.relation', validate_Relation_Input)
.on('blur', 'input.contact', validate_Relation_Input);
Edit: commenter Ian is right. In order for this to work you need to change the second block of code to:
function validate_Email_Input() {
var $this = $(this); // This line has changed
var input_groups = $this.parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
email_values = $.map($(inpg).children('input'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
});
return isValid;
}

You could create an object mapping each field selector to its validator function, and loop from within a single event handler:
$(document).on('blur', function(e) {
var validators = {
'input.email' : validate_Email_Input,
'input.id' : validate_Id_Input
// etc
};
for(var field in validators) {
if($(e.target).is(field)) {
validators['field'](e.target);
}
}
}

To refactor it you can create a model:
var myInputsModel = [
{ a: 'input.email' }, // you can store all the information you want in the model...
{ a: 'input.id' },
etc...
];
so then you got just one function for all of them:
$.each(myInputsModel, function(i, v) {
$(document).on('blur', v.a, function() {
// One function for all of them.
mySingleFunction(this);
});
});
function mySingleFunction(el) {
var $this = $(el);
var input_groups = $this.parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
email_values = $.map($(inpg).children('input'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
});
return isValid;
}

$("#my_form").submit(function(e){
var valid = 1;
var error_msg = "";
//validate fields here, if fails set valid to 0 and error_msg to whatever
if(!valid){
e.preventDefault();
alert(error_msg);
}
});

Here's one approach.
Start by giving all of the html elements a common class, and use a data attribute for the value type
<input type="text" class="validate" data-value-type="town" />
Sample jQuery + javascript
// Make an object matching strings to functions
var functionMap = {
email: emailFunction(),
id: idFunction(),
pass: passFunction(),
town: townFunction,
relation: relationFunction(),
contact: contactFunction
}
function validate(element){
// see if the attribute being checked against has a matching entry in functionMap
if(functionMap[element.data('value-type')] !== undefined){
// call the function if it's there
functionMap[element.data('value-type')];
}
}
$(document).on('blur', '.validate', function(){
validate($(this));
}

Related

jQuery change event code not running possible event conflict

Let me start off by saying that this is my second day learning jQuery so I'm very much a beginner.
I've written a document ready function and all components are working except the countryField.change function I wrote. I'm pretty sure the web application already has a change function for this field and I'm not sure if there can be two of the same event on a field. When I say it's not working, I set a breakpoint in the Chrome debugger and it never enters the function.
Maybe I have to temporarily pause the existing event, run my code, then re-enable the default event?
Any help would be appreciated. Thanks.
$(document).ready(function(){
var submitReady = true;
var phoneField = $("p.phone").find("input");
var phoneExt = $("p.Ext").find("input");
var countryField = $("p.country").find("input");
var stateField = $("p.state").find("input");
var provinceField = $("p.Province").find("input");
var regex = /^\([2-9][0-9]{2}\)\s+[2-9][0-9]{2}\-[0-9]{4}$/;
phoneField.mask('(000) 000-0000', {placeholder: "(###) ###-####"});
phoneExt.mask('00000', {placeholder: "#####"});
$('#pardot-form').submit(function() {
// DO STUFF
if (submitReady) {
if (phoneExt.val() != "") {
phoneField.val(phoneField.val() + ' x' + phoneExt.val());
return true;
}
}
else {
return false;
}
});
phoneField.focusout(function() {
if (regex.test($(this).val())) {
submitReady = true;
return true;
}
else {
$(".form-field.phone").after( "<p class='tempError error no-label'>Please Enter a valid phone number: (###) ###-####</p>");
submitReady = false;
}
});
phoneField.focus(function() {
$(".tempError").remove();
});
countryField.change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});
});
You can try
$( "p.country" ).change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});

Making bootstrap-tags responsive, jquery events lost

I am trying to change this demo:
http://maxwells.github.io/bootstrap-tags.html
into a responsive version in which I can set it to readOnly and remove it from readOnly as I like. This code:
var alltags = ["new tag", "testtag", "tets", "wawa", "wtf", "wtf2"];
$(document).ready(function() {
var tagbox = $('#my-tag-list').tags({
suggestions: alltags
});
var tagenable = true;
$('#my-tag-list').focusout(function() {
if (tagenable) {
tagbox.readOnly = true;
$('#my-tag-list').empty();
tagbox.init();
tagenable = false;
}
});
$('#my-tag-list').click(function() {
if(!tagenable) {
tagbox.readOnly = false;
$('#my-tag-list').empty();
tagbox.init();
tagenable = true;
}
});
});
seems to work fairly well, it makes everything readonly after focusout and editable when I click it. However, the editing does not work since I cannot insert new tags nor delete them (seems to be like event handling was lost or something like that).
I am guessing that emptying the #my-tag-list div is causing this, but I cannot yet find a way to use for instance "detach" instead that removes everything inside (not the element itself) and putting it back in again.
I tried to make a JS Fiddle, but it isn't really working so well yet:
http://jsfiddle.net/tomzooi/cLxz0L06/
The thing that does work is a save of the entire website, which is here:
https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0
this link has the unminimized JS of the bootstrap-tags stuff I am using:
https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js
So far I managed to do this with some modifications of the bootstrap javascript code. I use two different tagbox which I hide and unhide with some click events.
var tagbox = $('#my-tag-list').tags({
suggestions: alltags,
tagData: tmp_tags,
afterAddingTag: function(tag) { tagboxro.addTag(tag); },
afterDeletingTag: function(tag) {tagboxro.removeTag(tag); }
});
var tagboxro = $('#my-tag-listro').tags({
suggestions: alltags,
tagData: tmp_tags,
readOnly: 'true',
tagSize: 'sm',
tagClass: 'btn-info pull-right'
});
$(document).mouseup(function (e) {
var container = $("#my-tag-list");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) { // ... nor a descendant of the container
if (tagsave) {
$("#my-tag-listro").show();
$("#my-tag-list").hide();
var tags = tagbox.getTags();
$.post("%basedir%/save.php", {
editorID:"new_tags",
tags:tags
}, function(data,status){
//alert("Data: " + data + "\nStatus: " + status);
});
tagsave = false;
}
}
});
$('#my-tag-listro').click(function() {
tagsave = true;
//$(".tag-list").toggle();
$("#my-tag-list").show();
$("#my-tag-listro").hide();
});
I had to modify the code of bootstrap-tags.js to allow for this since it normally deletes all of the usefull functions when it is considered readonly in the init function:
if (this.readOnly) {
this.renderReadOnly();
this.removeTag = function(tag) {
if (_this.tagsArray.indexOf(tag) > -1) {
_this.tagsArray.splice(_this.tagsArray.indexOf(tag), 1);
_this.renderReadOnly();
}
return _this;
};
this.removeTagClicked = function() {};
this.removeLastTag = function() {};
this.addTag = function(tag) {
_this.tagsArray.push(tag);
_this.renderReadOnly();
return _this;
};
this.addTagWithContent = function() {};
this.renameTag = function() {};
return this.setPopover = function() {};
}
would be awesome if this feature was incorporated in a somewhat less hacky way though :)

jQuery click inside each loop

I want to loop my click events, to make the code shorter. I might have 30 of these values later on.
My working code
$(document).ready(function () {
var last_click = '';
$("#title").click(function() { last_click = 'title'; });
$("#subtitle").click(function() { last_click = 'subtitle'; });
$("#test").click(function() { last_click = 'test'; });
});
This is how I want it (not working)
My guess is that the each-loop runs on dom ready and then never again and that way the click-event can never be triggered?
$(document).ready(function () {
var last_click = '';
var contents = new Array();
contents = ['title', 'subtitle', 'test'];
$.each(contents , function(index, value){
$("#" + value).click(function() { last_click = value; });
});
});
If there is not solved like I would, I would be thankful for a nice workaround.
I would rather add a class to all elements you want to bind this to, eg class="last-click"
and define the binding once as:
$(".last-click").on('click', function() {
last_click = this.id;
}
If you really wanted to make it shorter, give them all a similar class.
$(document).ready(function () {
var last_click = '';
$(".theclass").click(function() {
last_click = this.id;
});
});
if you have value attribute for your buttons or elements, you can do it:
$(document).ready(function() {
var last_click = '';
$("input").click(function() {
last_click = $(this).attr('value');
alert(last_click);
});
});​
I assumed that you are using "input type="button". Also here is the demo you can see it in action: http://jsfiddle.net/rS2Gb/5/

Toggling two events on one button

I'm trying to add some functionality to be able to edit comments inline. So far it's pretty close, but I'm experiencing issues trying to trigger a second event. It works the first time, but after that, fails.
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').append('saved');
clicked = false;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});​
jsfiddle demo here
Hiya demo for your working solution: http://jsfiddle.net/8P6uz/
clicked=true was the issue :)) I have rectified another small thing. i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.
small note: If I may suggest use Id of the button or if there are many edit buttons try using this which you already i reckon; I will see if I can write this more cleaner but that will be sometime latter-ish but this should fix your issue. :) enjoy!
Jquery Code
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').text("");
$('#output').append('saved');
clicked = true;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});​

How to detect if some text box is changed via external script?

I have some jQuery plugin that changes some elements, i need some event or jQuery plugin that trigger an event when some text input value changed.
I've downloaded jquery.textchange plugin, it is a good plugin but doesn't detect changes via external source.
#MSS -- Alright, this is a kludge but it works:
When I call boxWatcher() I set the value to 3,000 but you'd need to do it much more often, like maybe 100 or 300.
http://jsfiddle.net/N9zBA/8/
var theOldContent = $('#theID').val().trim();
var theNewContent = "";
function boxWatcher(milSecondsBetweenChecks) {
var theLoop = setInterval(function() {
theNewContent = $('#theID').val().trim();
if (theOldContent == theNewContent) {
return; //no change
}
clearInterval(theLoop);//stop looping
handleContentChange();
}, milSecondsBetweenChecks);
};
function handleContentChange() {
alert('content has changed');
//restart boxWatcher
theOldContent = theNewContent;//reset theOldContent
boxWatcher(3000);//3000 is about 3 seconds
}
function buttonClick() {
$('#theID').value = 'asd;lfikjasd;fkj';
}
$(document).ready(function() {
boxWatcher(3000);
})
try to set the old value into a global variable then fire onkeypress event on your text input and compare between old and new values of it. some thing like that
var oldvlaue = $('#myInput').val();
$('#myInput').keyup(function(){
if(oldvlaue!=$('#myInput').val().trim())
{
alert('text has been changed');
}
});
you test this example here
Edit
try to add an EventListner to your text input, I don't know more about it but you can check this Post it may help
Thanks to #Darin because of his/her solution I've marked as the answer, but i have made some small jQuery plugin to achieve the same work named 'txtChgMon'.
(function ($) {
$.fn.txtChgMon = function (func) {
var res = this.each(function () {
txts[0] = { t: this, f: func, oldT: $(this).val(), newT: '' };
});
if (!watchStarted) {
boxWatcher(200);
}
return res;
};
})(jQuery);
var txts = [];
var watchStarted = false;
function boxWatcher(milSecondsBetweenChecks) {
watchStarted = true;
var theLoop = setInterval(function () {
for (var i = 0; i < txts.length; i++) {
txts[i].newT = $(txts[i].t).val();
if (txts[i].newT == txts[i].oldT) {
return; //no change
}
clearInterval(theLoop); //stop looping
txts[i].f(txts[i], txts[i].oldT, txts[i].newT);
txts[i].oldT = $(txts[i].t).val();
boxWatcher(milSecondsBetweenChecks);
return;
}
}, milSecondsBetweenChecks);
}

Categories