jquery masking/alerting problem in IE - javascript

I've got a table an input box that has a money input mask on it. I haven't had any problems with it yet, but now it doesn't seem to be working properly and I can't get anything to alert from it.
All of this is an internet explorer problem. Works fine in FireFox.
In firefox the mask works right as it only allows numbers and at a fixed format, but in ie, the format, or mask, is shown correctly when you're on focus, but as once you begin typing, the characters are being appended, rather than in place of the mask. It also is allowing non numeric characters. I've tried alerting in IE, but that also is not working. I can't find anything on this issue through google..
You'll have a better understanding of what it's doing if you check in firefox and then IE. It's the less advance cell at the bottom. or just append #less to the url.
I'll provide any code relevant to this..Though, I'm not getting any errors.
Code:
<td class="totals<cfif r EQ 1>1</cfif>"><cfif r EQ 1>Total<cfelse><input type="text" <cfif labels[r] EQ "Less Advance(if applicable)">id="less"</cfif><cfif labels[r] EQ "Net Due Employee">id="net"</cfif>id="totals" class="ttlR#r# total<cfif labels[r] EQ "Grand Total"> grandTot</cfif>" name="totals#r#" readonly="readonly" /></cfif></td>
$('#less').removeAttr("readonly").css("background-color", "none").css("text-align", "right").maskMoney({symbol: ""});
$('#less').keyup(function(){
$('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2));
alert($('#less').val());
});
//Get value of net total if page is refreshed.//
if($('#less').val() != "" || $('#less').val() != " "){
$('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2));
}

$('#less').keyup(function(){
$('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2));
alert($('#less').val());
});
You are quite likely overwriting your masking function with this. Take out everything but masking and then see if your masking works. If so then it is one of your additional functions overwriting the masking changes to the input box.

It doesn't look like the mask is being applied at all in IE. Which plugin are you using for the masking?
EDIT
I'm testing with IE 7.0.5730.13 and the mask doesn't work at all. Focusing-on and typing-in the <input> yields no special functionality, but it does throw an error
Line: 13
Char: 12949
Error: Invalid property value.
Code: 0
Have you tried debugging this with Firebug lite?
Also, you need to up your discipline with utilizing jQuery efficiently. Reuse Reuse Reuse!
var $less = $('#less')
, $net = $('#net')
, $grandTot = $('#totals .grandTot')
;
$less
.removeAttr( "readonly" )
.css( "background-color", "none" )
.css( "text-align", "right" )
.maskMoney( {symbol: ""} )
;
$net.bind( 'update-total', function()
{
$net.val( Number( parseFloat( $grandTot.val() ) - parseFloat( $less.val() ) ).toFixed( 2 ) );
} );
$less.keyup(function()
{
$net.trigger( 'update-total' );
alert( $less.val() );
});
//Get value of net total if page is refreshed.//
if ( $less.val() != "" || $less.val() != " " )
{
$net.trigger( 'update-total' );
}

Or just update to the newest version :)
https://github.com/plentz/jquery-maskmoney

Related

How to add new class for date in CalendarIO

I wanted to make various dates. Two types, first with the red border, second with te green, i understand how to change the css, but small problems with js, cuz dont know ho to create a second type of the date and give him new class for change the color.
Ok, i find the answer by myself, i dont think its good, but it was myself),
var cellClasses = today ? 'fc-today ' : '';
if( content.indexOf('1') > -1 ) {
cellClasses += 'fc-content';
}else if (content.indexOf('2') > -1)
cellClasses += 'fc-content-new';
i added check on some chars in main file, than in data file make this cheat:
'11-29-2021' : '<p class="disp-none">2</p><span>Как всегда</span>',
there we have date, than char which we want to find to add wanted class and the text of ivent, so its mean:
'11-28-2021' : '<p class="disp-none">1</p><span>Wirking</span>',-it would be 'fc-content'
'11-29-2021' : '<p class="disp-none">2</p><span>Как всегда</span>',- and it would be 'fc-content-new'.

Replace a part of text in textbox while typing text in it

The format of text in the text box is like this:
login -u username -p password
While typing this text I want to replace 'password' with number of '*' equal to its length. So if I type:
'login -u abc#abc.com -p abc' in text box it should display like this:
login -u abc#abc.com -p ***
And also I need to store the actual password which is being replaced.
Is there a possible way? Thank you in advance
You should parse the input value using regular expression, i.e.
<input type="text" id="inputText" />
<input type="hidden" id="actualPassword" /> <!-- Another element to store actual password -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// Function to repeat string n times */
var StringUtilities = {
repeat: function(str, times) {
return (new Array(times + 1)).join(str);
}
};
$(function(){
$('#inputText').keyup(function(){
var test = /(login[\s]+\-u[\s]+[a-zA-Z0-9#\.\s]+\-p[\s]+)(.*)/i.exec( $(this).val() ); //'login -u user123 -p password123'
if(test !== null)
{
if( $('#actualPassword').val().length < $.trim(test[2]).length )
$('#actualPassword').val( $('#actualPassword').val() + test[2].slice(-1) );
else
$('#actualPassword').val($('#actualPassword').val().slice(0, test[2].length));
$(this).val( test[1] + StringUtilities.repeat( '*', test[2].length) );
}
});
});
</script>
JS FIDDLE: http://jsfiddle.net/nmx04h1o/3/
You can use multiple text boxes and still make it look like one, command prompt. Using CSS you remove left, right borders and join them close enough. On keypress event of each textbox, check if the user typed space and change the focus to next textbox. This solution works provided you have some fixed format of input to be taken.
The way you need to look at your requirement needs to be change. Why you need to get data from user with nly one input?
You need to collect username and password differently and then you can merge the same on form submit.
$("#submit").click(function(){
$output = "login -u " + $("#username").val() + " -p " + $("#password").val();
alert($output);
return false;
});
http://jsfiddle.net/kiranvarthi/j8gL9mvx/1/
Do not do it. You can see what i've tried at the bottom of my answer.
I played around with this problem a littlebit, but when i did a facing myself another problems.
There are 2 method to do this. 1st is, when a user enter a character, you need to use the keyup function.
So, you can write a regular expression, what is catching the -p andsomecharactersherewhileitsnotspace.
Ok, the first method is to catch the last character of users password, and contcat it to a hidden field. Me and Apul Gupta tried this.
For some reason, both of our code is mess up the password, because for some reason, what i do not know, there will be * characters if you are typing to fast. I tried to replace those * characters, but in this case, some characters are lost from the password.
The other way is to get the character from keyup event. This is bad, because String.fromCharCode is returning always uppercase characters, since, keyup do not know, is there a SHIFT or CAPS LOCK happens. Maybe now you think, you can handle it, but you can not. SHIFT is simple, but you don't know, was the CAPS LOCK was turned on befor or not.
A solution could be for this, if you allow users only lowercase or only uppercase passwords, but this is bad because weekening the password.
So, think a littlebit more. Let's say, somehow we can use one of the solution. Then this whole things turn to a very complex thing, what are too expensive i think. Because, you should handle, what happens, if a user just SHIFT, LEFT ARROW, DELETE the password. You need to check, what selected with that combination of keyperss, where was the cursor, etc...
I suggest you to forget this, or try to find another way to do it.
Kiran Varthis answer is the best option i think.
What i've tried:
<input type="text" name="userInput" id="userInput" value="" />
<input type="hidden" value="" name="hiddenPassword" id="hiddenPassword" />
<script type="text/javascript">
$(function() {
String.prototype.repeat = function(num) {
return new Array(num + 1).join(this);
}
//46 = delete key
$("#userInput").keyup(function(e) {
var match = $("#userInput").val().match(/-p([\s]+)(.+)/i);
if (e.keyCode === 8) {
var deleted = $('#hiddenPassword').val().substring(0, $('#hiddenPassword').val().length - 1);
$('#hiddenPassword').val(deleted);
} else {
if (match !== null && match[2] && String.fromCharCode(e.keyCode).match(/[a-zA-Z0-9]/)) {
//Alphanumeric
$('#hiddenPassword').val($('#hiddenPassword').val() + $("#userInput").val().substring($("#userInput").val().length - 1));
$("#userInput").val(($("#userInput").val().replace(/-p (.+)/, "-p " + "*".repeat(match[2].length))));
}
}
if (match !== null && match[2]) {
console.log("Password is: " + $('#hiddenPassword').val());
}
});
});
</script>

Date coming as undefined with javascript

function duplicateWithLines()
{
var datefield = jQuery("#lineItemDate").val();
if ( !( datefield && datefield.match( /^\d{1,2}[/]\d{1,2}[/]\d{4}$/ ) ) ) alert("Date is required");
else {
//DO blah blah
}
}
---
---
<input type='button' class='duplicate_button' name='duplicateWithLines' value='Duplicate Line Items:' onClick='duplicateWithLines()'/>
<hsi:calendar name="lineItemDate" size='10' maxlength='10' />
At Line var datefield = jQuery("#lineItemDate").val(); value is coming as undefined I think. Because of that it failing to enter else block.if condition is satisfying so alert msg printed. But it has to enter else block.
And there date format would be entered as dd/mm/yyyy.
What is the way to get in to else block.
Addressing the val()-problem: you are trying to find an element with id lineItemDate. But your element has no id. It does have a name, so $('[name=lineItemDate]').val() should work.
If the formatting is fixed (dd/mm/yyyy), try modifiyng the if part this way to avoid the ugly and expensive matching:
var dateFromValue = new Date(
$('[name=lineItemDate]').val().split('/').reverse().join('-')
);
if (!isnNaN(dateFromValue)) {
/* it's a date! */
} else {
/* don't bother */
}
While we're at it, don't use inline handlers. Every activation of an inline handler spawns a new javascript interpreter. In your scripting use:
$('[name=duplicateWithLines]').on('click', duplicateWithLines);
It may be wise to rename your function, to avoid name clashes.
jQuery doesn't know how to retrieve the value from the hsi:calendar element. You need to find the html element that contains the data value in order to use jquery to fetch it.

displaying user content as typed in

When a user types in some value in a text box it should be displayed in a td as it is.
This is the code I've tried with a div,
<input type="text" name="userStr" id="userStr" onKeyUp="processValue()"/>
<div id="disp">
</div>
<script type="text/javascript" >
function processValue() {
var userval = document.getElementById("userStr").value;
//alert('userval'+userval);
document.getElementById("disp").innerHTML = userval;
}
I enter the value, &lt&gt &#40 &#41 &#35 &#38 , but it is showing as <> ( ) # &
instead of the original string (&lt&gt &#40 &#41 &#35 &#38 )
What is the standard way to do this.
While I typed stackoverflow showed exactly the same, I'll now view the source, but looking for insights from you.
Thanks.
Try:
document.getElementById("disp").innerHTML = userval.replace(/&/g, '&').replace(/</g, '<');
Alternatively, you could set the element text, but you'd have to deal with browser variation.

Autocomplete jQuery plugin not working, claiming a variable is undefined [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
jQuery variable claiming it's undefined when it has been defined
The problem is that when opening it in firefox and typing a value for input 1 and selecting it, firebug says that the variable phone isn't defined. I tried defining the variables at the start but it still ceased to work.
This is the jQuery:
$(document).ready(function() {
var phone; //fix scoping
var phoneid;
var firmware;
var firmwareid;
$("#input1").autocompleteArray(["iPhone 2G","iPhone 3G","iPhone 3GS","iPhone 4","iPhone 4s"],
{ minChars:1,
matchSubset:1,
onItemSelect:selectPhone,
onFindValue:findPhone,
autoFill:true,
maxItemsToShow:10,
selectFirst:true,
});
$("#input2").autocompleteArray(["1.1","1.2","1.3","1.4","1.5"],
{ minChars:1,
matchSubset:1,
onItemSelect:selectFirmware,
onFindValue:findFirmware,
autoFill:true,
maxItemsToShow:10,
selectFirst:true,
});
function findPhone(li) {
if( li == null ) return alert("No match!");
phone = li.selectPhone;
phoneid = phone.replace("iPhone ","iphone").toLowerCase();
};
function findFirmware(li) {
if( li == null ) return alert("No match!");
firmware = li.selectFirmware;
firmwareid = phone.replace(".","");
$(".info").hide
$(phoneid+firmware).show
};
function selectPhone(li) {
findPhone(li);
}
function selectFirmware(li) {
findFirmware(li);
}
});
And this is the HTML:
<div id="formcontainer">
<input id="input1"/>
<input id="input2"/>
</div>
<div id="iphone2g11" class="info" style="display:none">iPhone 2G</div>
<div id="iphone2g12" class="info" style="display:none">iPhone 3G</div>
<div id="iphone2g13" class="info" style="display:none">iPhone 3GS</div>
<div id="iphone2g14" class="info" style="display:none">iPhone 4</div>
<div id="iphone2g15" class="info" style="display:none">iPhone 4S</div>
I'm using this plugin for autocomplete http://www.pengoworks.com/workshop/jquery/autocomplete.htm
The problem is in your findFirmware() function, change it to
function findFirmware(li) {
if( li == null ) return alert("No match!");
firmware = li.selectFirmware;
firmwareid = phone.replace(".","");
$(".info").hide();
$('#' + phoneid + firmwareid).show(); // This line was messed up
};
There two problems with this line $(phoneid+firmware).show, well four if you count the missing parenthesis and semicolon but...
The div your trying to show has an ID, you don't have # in your selector to select the element by ID
firmware contains the unparsed string with the period so phoneid + firmware becomes iphone2g1.2 when your div ID is iphone2g12 thus you needed to use firmwareid in which you parsed it out of.
Fiddle Demo: http://jsfiddle.net/AaNWM/
Its undefined because you do:
li.selectPhone;
Which .selectPhone doesn't exist on the li element passed in. So, once you get to replacing the string, you get an error.
Assuming that I may, possibly, think, that I might know what you are trying to do, I changed li.selectPhone and li.selectFirmware to li.innerHTML and it works fine. jsFiddle.
Edit: You also were using phone.replace in your firmware function so I changed that as well in the above fiddle.
phone is undefined because li.selectPhone is undefined.
It's hard to guess why that's missing without seeing autoCompleteArray(), which doesn't seem to be part of the jQuery autocomplete plugin, at first glance?

Categories

Resources