Develop Reference

jQuery to emulate iPhone password input changes textbox to disabled in a Visual Studio web application

I am working on a web application in Visual Studio using visual basic and master pages. I have 10 textbox fields on a child page where I would like to emulate the iPhone password entry (ie. show the character entered for a short period of time then change that character to a bullet). This is the definition of one of the text box controls:
<asp:TextBox ID="txtMID01" runat="server" Width="200" MaxLength="9"></asp:TextBox>
At the bottom of the page where the above control is defined, I have the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/jQuery.dPassword.js"></script>
<script type="text/javascript">
$(function () {
var textbox01 = $("[id$=txtMID01]");
alert(textbox01.attr("id"));
$("[id$=txtMID01]").dPassword()
});
</script>
When the page loads, the alert displays MainContent_txtMID01 which is the ID of the control preceeded with the name of the content place holder.
The following is the contents of lib/jQuery.dPassword.js (which I found on the internet):
(function ($) {
$.fn.dPassword = function (options) {
var defaults = {
interval: 200,
duration: 3000,
replacement: '%u25CF',
// prefix: 'password_',
prefix: 'MainContent_',
debug: false
}
var opts = $.extend(defaults, options);
var checker = new Array();
var timer = new Array();
$(this).each(function () {
if (opts.debug) console.log('init [' + $(this).attr('id') + ']');
// get original password tag values
var name = $(this).attr('name');
var id = $(this).attr('id');
var cssclass = $(this).attr('class');
var style = $(this).attr('style');
var size = $(this).attr('size');
var maxlength = $(this).attr('maxlength');
var disabled = $(this).attr('disabled');
var tabindex = $(this).attr('tabindex');
var accesskey = $(this).attr('accesskey');
var value = $(this).attr('value');
// set timers
checker.push(id);
timer.push(id);
// hide field
$(this).hide();
// add debug span
if (opts.debug) {
$(this).after('<span id="debug_' + opts.prefix + name + '" style="color: #f00;"></span>');
}
// add new text field
$(this).after(' <input name="' + (opts.prefix + name) + '" ' +
'id="' + (opts.prefix + id) + '" ' +
'type="text" ' +
'value="' + value + '" ' +
(cssclass != '' ? 'class="' + cssclass + '"' : '') +
(style != '' ? 'style="' + style + '"' : '') +
(size != '' ? 'size="' + size + '"' : '') +
(maxlength != -1 ? 'maxlength="' + maxlength + '"' : '') +
// (disabled != '' ? 'disabled="' + disabled + '"' : '') +
(tabindex != '' ? 'tabindex="' + tabindex + '"' : '') +
(accesskey != undefined ? 'accesskey="' + accesskey + '"' : '') +
'autocomplete="off" />');
// change label
$('label[for=' + id + ']').attr('for', opts.prefix + id);
// disable tabindex
$(this).attr('tabindex', '');
// disable accesskey
$(this).attr('accesskey', '');
// bind event
$('#' + opts.prefix + id).bind('focus', function (event) {
if (opts.debug) console.log('event: focus [' + getId($(this).attr('id')) + ']');
clearTimeout(checker[getId($(this).attr('id'))]);
checker[getId($(this).attr('id'))] = setTimeout("check('" + getId($(this).attr('id')) + "', '')", opts.interval);
});
$('#' + opts.prefix + id).bind('blur', function (event) {
if (opts.debug) console.log('event: blur [' + getId($(this).attr('id')) + ']');
clearTimeout(checker[getId($(this).attr('id'))]);
});
setTimeout("check('" + id + "', '', true);", opts.interval);
});
getId = function (id) {
var pattern = opts.prefix + '(.*)';
var regex = new RegExp(pattern);
regex.exec(id);
id = RegExp.$1;
return id;
}
setPassword = function (id, str) {
if (opts.debug) console.log('setPassword: [' + id + ']');
var tmp = '';
for (i = 0; i < str.length; i++) {
if (str.charAt(i) == unescape(opts.replacement)) {
tmp = tmp + $('#' + id).val().charAt(i);
}
else {
tmp = tmp + str.charAt(i);
}
}
$('#' + id).val(tmp);
}
check = function (id, oldValue, initialCall) {
if (opts.debug) console.log('check: [' + id + ']');
var bullets = $('#' + opts.prefix + id).val();
if (oldValue != bullets) {
setPassword(id, bullets);
if (bullets.length > 1) {
var tmp = '';
for (i = 0; i < bullets.length - 1; i++) {
tmp = tmp + unescape(opts.replacement);
}
tmp = tmp + bullets.charAt(bullets.length - 1);
$('#' + opts.prefix + id).val(tmp);
}
else {
}
clearTimeout(timer[id]);
timer[id] = setTimeout("convertLastChar('" + id + "')", opts.duration);
}
if (opts.debug) {
$('#debug_' + opts.prefix + id).text($('#' + id).val());
}
if (!initialCall) {
checker[id] = setTimeout("check('" + id + "', '" + $('#' + opts.prefix + id).val() + "', false)", opts.interval);
}
}
convertLastChar = function (id) {
if ($('#' + opts.prefix + id).val() != '') {
var tmp = '';
for (i = 0; i < $('#' + opts.prefix + id).val().length; i++) {
tmp = tmp + unescape(opts.replacement);
}
$('#' + opts.prefix + id).val(tmp);
}
}
};
})(jQuery);
When I execute my code, the code behind populates the value of the textbox with "123456789" and when the page gets rendered, all the characters have been changed to bullets, which is correct. The problem I am having is that the textbox has been disabled so I can not edit the data in the textbox.
I removed (by commenting out) the references to the disabled attribute but the control still gets rendered as disabled.
As a side note, the code that I found on the internet was originally designed to work with a textbox with a type of password but when I set the TextMode to password, not only does the control get rendered as disabled, but the field gets rendered with no value so I left the TextMode as SingleLine.
Any suggestions or assistance is greatly appreciated.
Thanks!

As far as I know, it is not possible to have it so that while you type a password, the last letter is visible for a second and then turns into a bullet or star.
However what you can do is as the user types in password, with a delay of lets say 500ms store the string the user has typed in so far into some variable and replace the content of the password field or the text field with stars or black bullets. This will give you what you are looking for.

Parse line by line, then word by word from a textarea in jquery

I'm creating a basic .fountain editor to html parser that pretty much checks for words typed in a textarea on keyup.
Line by line parsing works below, but of course users would type in " **bold** then *italic* " in a single line but I can't seem to get it to scan each word in a line.
Below is my code:
jQuery.fn.parseAsFountain = function( window, jQuery ){
jQuery = $;
var storybox = $(this).val();
story = storybox.split('\n');
// Process The entire box
for( var i=0;i<story.length;i++ ){
var line = story[i];
SubstitutePerLine(line);
}
story_cleared = story.join('\n');
story_breaks = story_cleared.replace(/(?:\r\n|\r|\n)/g, '<br />');
return story_breaks;
function SubstitutePerLine(line){
if( line.match(/^[*].*[*]$/) ){
newval = line.slice(1, -1);
if( newval.match(/^[*].*[*]$/) ){
newval2 = newval.slice(1, -1);
if( newval2.match(/^[*].*[*]$/) ){
newval3 = newval2.slice(1, -1);
if( newval3.match(/\\/) ) {
if(newval3.match(/\\\*/)){
slash_val = newval3.replace(/\\/, '');
story[i] = '<b><i>' + slash_val + '</i></b>';
}
else {
story[i] = '<b><i>' + newval3 + '</i></b>';
}
}
else {
story[i] = '<b><i>' + newval3 + '</i></b>';
}
}
else if( newval2.match(/\\/) ) {
if(newval2.match(/\\\*/)){
slash_val = newval2.replace(/\\/, '');
story[i] = '<b>' + slash_val + '</b>';
}
else {
story[i] = '<b>' + newval2 + '</b>';
}
}
else {
story[i] = '<b>' + newval2 + '</b>';
}
}
else if( newval.match(/\\/) ) {
if(newval.match(/\\\*/)){
slash_val = newval.replace(/\\/, '');
story[i] = '<i>' + slash_val + '</i>';
}
else {
story[i] = '<i>' + newval + '</i>';
}
}
else {
story[i] = '<i>' + newval + '</i>';
}
}
if( line.match(/#/) ){
newval = line.replace(/^#/, '');
story[i] = '<p hidden>' + newval + '</p>';
}
if( line.match(/##/) ){
newval = line.replace(/^##/, '');
story[i] = '<p hidden>' + newval + '</p>';
}
if( line.match(/###/) ){
newval = line.replace(/^###/, '');
story[i] = '<p hidden>' + newval + '</p>';
}
return story;
}
}
I've tried re-splitting it by word in another split(" ") inside the loop then joining it again afterwards but to no avail.

Parsing markup is not a straightforward task. To name a few things:
If an asterisk is followed by a space, it will not be the start of a formatted piece of text;
Several parts can be formatted in one line, not only single words, but also word groups;
Formatting may even cross over a line break.
There might be an even number of slashes preceding an asterisk, in which case the asterisk is not escaped.
Here is a solution that only deals with italic, bold and italic+bold formatting, and the removal of escaping slashes. I did not deal with the hashes (#) as this was already quite broad for a Q&A:
jQuery.fn.parseAsFountain = function() {
var txt = this.val(),
re = /(\s?)(\\*)(\*+)(?=(\s?))/g,
arr,
openAsterisks = 0,
result = [],
last = 0,
start;
while ((arr = re.exec(txt)) !== null) {
var [all, prefix, escaped, asterisks, suffix] = arr;
if (escaped.length % 2) { // First asterisk is escaped
escaped += asterisks[0];
asterisks = asterisks.substr(1);
if (!asterisks.length) continue; // Nothing to do
}
var useAsterisks = 0;
if (openAsterisks && !prefix.length) {
useAsterisks = Math.min(openAsterisks, asterisks.length);
// Add HTML for bold, italic or both
result.push(
txt.substr(last, start - useAsterisks - last),
['<i>','<b>','<i><b>'][useAsterisks-1],
txt.substr(start, arr.index + escaped.length - start),
['</i>','</b>','</b></i>'][useAsterisks-1]);
last = arr.index + escaped.length + useAsterisks;
openAsterisks = 0;
}
if (!openAsterisks && asterisks.length > useAsterisks && !suffix.length) {
openAsterisks = asterisks.length - useAsterisks;
start = arr.index + prefix.length + escaped.length + asterisks.length;
}
}
// Flush remaining text
result.push(txt.substr(last));
// Remove escaping slashes (not escaped ones!):
result = result.join('').replace(/\\(.)/g, '$1');
return result;
}
$('textarea').on('input', function () {
$('pre').html($(this).parseAsFountain());
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="width:100%" rows=5>
This is **a** test *with several* ***formats
but*** keeping asterisks \*where* needed.
</textarea>
<h3>Rendered:</h3>
<pre>
</pre>

conditional statements in jquery shortcode generation

I want to convert this shortcode generating form into one that will generate either of two different shortcodes depending on a value selected in the form. So, a radio button says, "Which shortcode do you want to build?" Then they choose it, then they go on with the other fields to fill out the attribute values. Then when it comes time to generate the code, the JS will condition its output based on the radio button question. I've tried to modify it myself, but the problem is, this script generates the attributes from the options index, so I don't know how to include an option that doesn't go into the index:
var table = form.find('table');
form.appendTo('body').hide();
form.find('#myshortcodeidstem-submit').click(function(){
var options = {
'shortcodename' : '', \\ THIS IS THE ONE TO DETERMINE THE SHORTCODE NAME
'attribute' : '', \\ THIS IS THE ATTRIBUTE THAT BOTH SHORTCODES SHARE
};
var shortcode = '[myshortcode'; \\ THIS LINE NEEDS TO BE CONDITIONAL ON OPTION 1
for( var index in options) {
var value = table.find('#myshortcodeidstem-' + index).val();
if ( value !== options[index] && value != null )
shortcode += ' ' + index + '="' + value + '"';
}
shortcode += '] Content Here [/myshortcode]'; \\ THIS LINE CONDITIONAL ON OP1
--- UPDATE ---
Barmar pointed me in the right direction, and I got it to work, but I'd like to know if there's a more economical way to do it. Here's what I have:
var table = form.find('table');
form.appendTo('body').hide();
form.find('#myshortcodeid-submit').click(function(){
var codeselector = table.find('#myshortcodeid-codeselector').val();
if (codeselector === '1'){
var options = {
'attribute' : '',
};
var shortcode = '[shortcode_one';
for( var index in options) {
var value = table.find('#myshortcodeid-' + index).val();
if ( value !== options[index] && value != null )
shortcode += ' ' + index + '="' + value + '"';
}
shortcode += '] Content Here [/shortcode_one]';
}
if (codeselector === '2'){
var options = {
'attribute' : '',
};
var shortcode = '[shortcode_two';
for( var index in options) {
var value = table.find('#myshortcodeid-' + index).val();
if ( value !== options[index] && value != null )
shortcode += ' ' + index + '="' + value + '"';
}
shortcode += '] Content Here [/shortcode_two]';
}
--- UPDATE ---
Found a more economical way, without repeating the options index. See the answer below.

Here's the most economic way I could come up with. Doesn't repeat the options index this way. Working good. Just had to create a var for the dropdown field that chooses the shortcode, then do if statements referencing that var's value.
var codeselector = table.find('#myid-codeselector').val();
if (codeselector === '1'){
var shortcode = '[shortcode_one';
}
if (codeselector === '2'){
var shortcode = '[shortcode_two';
}
var options = {
'attribute' : '',
};
for( var index in options) {
var value = table.find('#myid-' + index).val();
if ( value !== options[index] && value != null )
shortcode += ' ' + index + '="' + value + '"';
}
if (codeselector === '1'){
shortcode += '] Content Here [/shortcode_one]';
}
if (codeselector === '2'){
shortcode += '] Content Here [/shortcode_two]';
}

JavaScript using regex for validation

I am validating a form and the text put into a form must be CIT, BIS or MATH
if(dept == ""){
msg += "You must enter a department\n";
}else if((dept != "CIT") && (dept != "BIS") && (dept != "MATH")){
msg += '"' + dept + '"' + " is not one of CIT, BIS, or MATH.\n";
}
I need to add some form of regex to make sure that the text CIT, BIS or MATH when input can be put in any form uppercase and lowercase.
Any help would be great
Thanks

There's no need for a regex.
Just convert your input to lowercase before validating it.
if (dept == "") {
msg += "You must enter a department\n";
}
else if (isInvalid(dept)) {
msg += '"' + dept + '"' + " is not one of CIT, BIS, or MATH.\n";
}
function isInvalid(u) {
var s = u.toLowerCase();
var validStrings = [ "cit", "bis", "math" ];
for (var i = 0; i < validStrings.length; i++) {
if (s === validStrings[i]) {
return false;
}
}
return true;
}
As #y_nk has pointed out, the following approach would be more efficient (if necessary):
function isValid(s) {
var validationObject = { "cit" : true, "bis": true, "math": true };
return validationObject[ s.toLowerCase() ] === true;
}

If you really think regular expressions are the way:
if (!/^(?:BIS|CIT|MATH)$/i.test(dept)) {
}
The expression had to be anchored, which is why you also see the non-capturing group in there.
A nicer approach is this:
if (['cit', 'bis', 'math'].indexOf(dept.toLowerCase()) == -1) {
}
Unfortunately, that only works from IE9 onwards due to Array.indexOf()

Something like this
var regex = new RegExp("^CIT$|^BIS$|^MATH$", "i");
if(dept == ""){
msg += "You must enter a department\n";
}else if(!regex.test(dept)){
msg += '"' + dept + '"' + " is not one of CIT, BIS, or MATH.\n";
}

How to Line Break Emails that are created with Soap Request in CRM

Hy Guys,
I'm trying a couple of hours to format an email that is created with JavaScript an Soap Request. But it won't work to set up line breaks
\n - doesn't work
<br /> - doesn't work
- doesn't work
\u000A \u000D - doesn't work
Here is my actual code for the email body
get_EmailBodyInformManager: function (projectNumber, topic, responsibleDepartment, potentialCustomer, KAMofCustomer, projectManager) {
if (KAMofCustomer == null) {
KAMofCustomer = "";
}
return "Dear Sir or Madam. 
" +
"A decision about the project leader for the following international project is necessary: &#xD" +
"Project Number: " + projectNumber + "
" +
"Topic: " + topic + " 
" +
"Responsible Department: " + responsibleDepartment + "
" +
"Potential Customer: " + potentialCustomer + "
" +
"KAM of Potential Customer: " + KAMofCustomer + "
" +
"WILO Project Manager: " + projectManager + "";
},
And the Soap Request:
var xml = "<?xml version='1.0' encoding='utf-8'?>" +
"<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'" +
" xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'" +
" xmlns:xsd='http://www.w3.org/2001/XMLSchema'>" +
authenticationHeader +
"<soap:Body>" +
"<Create xmlns='http://schemas.microsoft.com/crm/2007/WebServices'>" +
"<entity xsi:type='email'>" +
"<ownerid>" + userId + "</ownerid>" +
"<regardingobjectid type='opportunity'>" + OpportunityId + "</regardingobjectid>" +
"<subject>" + subject + "</subject>" +
"<description>" + body + "</description>" +
"<from>" +
"<activityparty>" +
"<partyid type='systemuser'>" + userId + "</partyid>" +
"</activityparty>" +
"</from>" +
"</entity>" +
"</Create>" +
"</soap:Body>" +
"</soap:Envelope>";

It should accept HTML format so long as what you pass through the description field is encoded for XML. For the data you are looking to pass I would recommend formatting it as an HTML table with content appearing on each row. I would write out the content as standard HTML using
var description = '<table><tr><td>...</td></tr></table>';
and then pass this and other values such as subject through the following function to encode it for passing in XML -
xmlEncode = function(strInput) {
var c;
var xmlEncode = '';
if (strInput == null) {
return null;
}
if (strInput == '') {
return '';
}
for (var cnt = 0; cnt < strInput.length; cnt++) {
c = strInput.charCodeAt(cnt);
if (((c > 96) && (c < 123)) ||
((c > 64) && (c < 91)) ||
(c == 32) ||
((c > 47) && (c < 58)) ||
(c == 46) ||
(c == 44) ||
(c == 45) ||
(c == 95)) {
xmlEncode = xmlEncode + String.fromCharCode(c);
} else {
xmlEncode = xmlEncode + '&#' + c + ';';
}
}
return xmlEncode;
}

An alternative approach that may be easier to implement is:
Create an on demand workflow that creates an email. This will allow you to easily edit and maintain the template, e.g. if you want to change the wording of the email you wont have to recode.
Start the workflow from JavaScript.
This will effectively achieve the same as creating the entire email in JavaScript but is probably easier to implement.