Cleave.js error in getPostDelimiter() when entering first character into input - javascript

While implementing cleave.js for credit card formatting of an input field created as a custom element using litElement I ran into this error when I type the first character into the input but no issue with subsequent characters.
cleave-esm.js:712 Uncaught TypeError: Cannot read property 'slice' of undefined
at Object.getPostDelimiter (cleave-esm.js:712)
at Cleave.onChange (cleave-esm.js:1244)
I tracked it down as far as that it seems getPostDelimiter() is taking a value that is the previous character typed. Since I am looking at the first character this function fails when it tries to execute cleave-esm.js:712.
return value.slice(-delimiter.length) === delimiter ? delimiter : '';
I'm not sure if there is something I can do in my implementation to resolve this or if it's just a bug in Cleave.js that needs to be fixed.

It seems it's an issue introduced in 1.6.0 release.
If you can stick to a previous version, that should get you going.

Related

Is there a way to add .trim() on the back of a jquery selection?

For a project in my JavaScript class we're required to fetch a json object from flickr using their API defined by a set of tags the user enters; I've successfully done that, however I'd like to cover up a few cracks I've made while writing the algorithm.
For my search bar I'm checking:
($('#search').val().length == 0)
In order to make sure they have at least entered something. The problem I'm facing however is that if one is to type in spaces the spaces are still counted as characters.
My question is, is if I can do something like the following:
($('#search').trim().val().length == 0)
It seems, that this by itself doesn't work. Is there something I'm missing?
Any help would be much appreciated! Thanks!
trim() works on strings and removes leading and trailing spaces.
$('#search').trim().val().length
will try to execute trim() on object and thus will throw an error.
You first have to get the value(string) of the element and then trim it.
$('#search') // Select the element
.val() // Get it's value
.trim() // trim leading & trailing spaces
.length // Then get the length
or using jQuery $.trim()
$.trim($('#search').val()).length
Yes, you would want to run trim on the string not the DOM input so simply reverse it to:
($('#search').val().trim().length == 0)

Is AngularJS parsing the value incorrectly?

I have an extremely simple example here: http://jsfiddle.net/daylight/hqHSr/
To try it, just go to the fiddle and click the [Add Item] button to add some rows.
Next, click the check box next to any item and you'll see something similar to the following:
Problem: Only Displays Numeric Part
The problem is that the value should display the entire string shown in the row. In the example that means it should display: 86884-LLMUL.
Notice that it only displays the numeric part of the value.
If you look at the control you'll see that I'm using an input of type="text".
Also, if you look at the model (simpleItem) object you'll see that the one property it has is a string.
The JavaScript for the model class looks like:
function simpleItem(id) {
this.id = id;
}
My Attempt To Force to String Type
When I generate each of the simpleItems I even go so far as to set them to a character when I call the constructor (just to force the id to be set to a string type).
Here's the code that initializes each of the simpleItem ids:
currentItem.id = getRandom(100000).toString() + "-" + getRandomLetters(5).toUpperCase();
You can see the rest of the code in the fiddle, but the thing is I generate a random value and concatenate the value together with a hyphen and 5 letters. It's just a silly little piece of code for this sample.
But now, here is the part where it gets really odd.
If I simply change the hyphen - to another character like an uppercase X I get an error each time I click on the checkbox.
Here's the changed code and the new output, which you can see at the revised fiddle: fiddle version 2
currentItem.id = getRandom(100000).toString() + "X" + getRandomLetters(5).toUpperCase();
Also, now if you open Dev Tools in your browser you'll see in the console that Angular is now reporting an error each time you click the [Add Item] button. It looks like:
Adding Single-quotes ?Fixes? It
If you go up to the HTML and alter the following line from this:
ng-init="itemId ={{l.id.toString()}}"
to this
ng-init="itemId ='{{l.id.toString()}}'"
Now when you run it, the error will go away and it will work as you can see at the updated fiddle here: fiddle Version 3
Angular : Converts Hyphen to Minus Sign?
You see, Angular seems to be converting it to a numeric, attempting to do math on it (parsing the hyphen as a minus sign) and then truncating the string portion. That all seems to work when I use a hyphen, but when I use a X then Angular chokes.
Here's what it looks like when you add the single-quotes - of course the angular errors in Dev Tools console go away too.
Angular Forces to Numeric Type?
Why would this occur in Angular? It's as if it is attempting to force my string value to a numeric even though the INPUT element is type text and the JavaScript var is type string.
Anyone have ideas about this?
What About the Asterisk (multiplication symbol)?
Right as I was completing this I wondered what would happen if I changed the - to a * and ran it again. This time I saw the error below, which is indicative that something is attempting to convert to numeric.
This is the expected behavior. Angular is merely interpolating the text you have in your scope into the ng-init expression using scope.$eval and then executing that expression. This has very little to do with what is the type of the input box of the rest of the surrounding context.
It is definitely not desirable that Angular should wrap any interpolation it does in quotes, it'll break its use in all other places such as class="my-class {{dynamic-class}}".
Replace your ng-init with
ng-init="itemId =l.id.toString()"
In following with the docs, you should only use init in special circumstances anyway, you should rely on your controller for this. http://docs.angularjs.org/api/ng.directive:ngInit
I think we're just getting confused with Angular's weirdness. Basically, you're giving angular a string which it's turning into a javascript expression because it's in a {{}}. It's already, explicitly, a string (between the double-quotes):
ng-init="itemId ={{l.id.toString()}}"
It's apparently ignoring the fact that you're saying "hey, no really, this is a real string" with your l.id.toString(). It doesn't care. It's already a string and is going to evaluate it.
Just use the single quotes?
If you ng-init itemId={{undefined===undefined}}, what would you expect to happen? (it prints "true" in the alert).
Same with this: (undefined === undefined is in quotes) ng-init itemId={{'undefined===undefined'}}; prints true in the alert.
ng-init expects an angular expression. You don't have to use curly brackets there. You can simply write it like this:
ng-init="itemId=l.id" ng-click="checkBoxClicked(itemId)"

add class to parent on click with jQuery

I currently have this, it was working in jsFiddle, though its giving me errors, and not working when I use it outside of fiddle.
$('.down-photo').click(function() {
$(this).parent('.img-mask').toggleClass('hide');
});​
Firebug says:
Uncaught SyntaxError: Unexpected Token ILLEGAL
I'm newer to javascript and jQuery so I'm not sure what's wrong or what that error means.
Thanks!
In the code in your question there is a non-printing character after the last semicolon. It seems to be character 8203, a Unicode zero-width space. That's the illegal token that Firebug is telling you about.
You'll notice, if you edit the text in your question, that if you put the cursor to the left of that last semicolon and then press the right arrow a few times it takes one more keypress than you'd expect to get to the next line - that's the character I mean.
Delete that character, or manually retype the line (rather than copy/pasting), and it should be fine.
I fixed your error. $.appendTo() takes a selector, not a jquery object.
Try this:
http://jsfiddle.net/dvCmR/133/ (line 4)

Invalid quatifier. jQuery.validation.js

After a quick research here and here, the solutions didn't work for my project.
Here is the regex:
"^([A-Za-z0-9\._%-]+#[A-Za-z0-9\.-]+\.[A-Za-z]{2,4}+[;]?)(?:[;][A-Za-z0-9\._%-]+#[A-Za-z0-9\.-]+\.[A-Za-z]{2,4}+[;]?)*$|^$"
And here is an error that firebug fires at me whenever I reach email validation step (see regex above):
invalid quantifier
hasformat()jquery...tion.js (line 211)
pattern = "\^([A-Za-z0-9\._%-]+#[A...-Za-z]{2,4}+[;]?)*$|^$\"
I think it's the + after the two sets of {2,4}
removed like below gets it running but may not be what you need for the pattern
^([A-Za-z0-9\._%-]+#[A-Za-z0-9\.-]+\.[A-Za-z]{2,4}[;]?)(?:[;][A-Za-z0-9\._%-]+#[A-Za-z0-9\.-]+\.[A-Za-z]{2,4}[;]?)*$|^$

Parsing XFN data with Jquery, round 2

You guys already helped me on correctly parsing the REL attribute on A tags, but there are two XFN values that I'm not able to match:
"co-worker" and "co-resident". The hyphen causes an error with jquery.
I tried this
xfn_co-worker = $("a[rel~='co-worker']").length;
and this
xfn_co-worker = $("a[rel~='co\-worker']").length;
In both cases the error "Uncaught ReferenceError: Invalid left-hand side in assignment" is returned.
(Being these standard XFN values, I'm forces to use them)
Any idea is appreciated, as usual :-)
This isn't an error in you selector. The error lies in your variable name.
You can't use mathematical operators in the variable name. So the problem is your use of the - sign.
Try replacing
xfn_co-worker
with e.g
xfn_co_worker
And it should work alright
xfn_co_worker = $("a[rel~='co-worker']").length;
Note: Your variable name must match the following regex [a-zA-Z_$][0-9a-zA-Z_$]*

Categories

Resources