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.

Cannot read property 'url' of undefined

From a short tutorial I started this widget script to grab posts on Blogger. In the theme I originally made it in, it works fine without error. However, when I try to use the exact same code in a new template I'm working on, it throws the error:
Uncaught TypeError: Cannot read property 'url' of undefined
For the love of god I cannot figure out why it's doing that. For debugging purposes I tried removing all other scripts, placing the code right after the <body> tag and just before the </body> tag.
I really don't know anything about scripting and did this widget as a starting point in learning, but it's been months since I messed with it. Looking at it now I just don't see the problem. Here is the script:
<script type="text/javascript">
//<![CDATA[
function postGrabber(json) {
// The Magic
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
// Thumbnail Stuff
var orgImgUrl = json.feed.entry[i].media$thumbnail.url ? json.feed.entry[i].media$thumbnail.url : 'http://1.bp.blogspot.com/-mxinHrJWpBo/VD6fqbvI74I/AAAAAAAAcn8/LslulDeOROg/s72-c/noimage-chalkboard.jpg';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + imgSize + '-c');
var imgTag = '<a class="item-link-post" href="' + postUrl + '"><img class="item-img-thumbnail" src="' + newImgUrl + '" width="' + imgSize + '" height="' + imgSize + '"/></a>';
var authorName = json.feed.entry[i].author[0].name.$t;
var authorURL = json.feed.entry[i].author[0].uri.$t;
var authorOriImgUrl = json.feed.entry[i].author[0].gd$image.src;
var authorNewImgUrl = authorOriImgUrl.replace('s512-c', 's' + authorImgSize + '-c');
var authorImgTag = '<a class="item-link-author" href="' + authorURL + '" target="_blank" rel="nofollow"><img class="item-img-author" src="' + authorNewImgUrl + '" alt="' + authorName + '"/></a>';
// Standard Stuff
var postTitle = json.feed.entry[i].title.$t;
var postCommentCount = json.feed.entry[i].thr$total.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, '' + summaryLength + '');
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var postDate = json.feed.entry[i].updated.$t ? json.feed.entry[i].updated.$t : json.feed.entry[i].published.$t;
var shortDate = postDate.substring(0,10);
// Let's Make Options Here
var toggleImg = showImg ? '' + imgTag + '' : '';
var toggleTitle = showTitle ? '<h1 class="item-title">' + postTitle + '</h1>' : '';
var toggleSummary = showSummary ? '<p class="item-snippet">' + postContent + '</p>' : '';
var toggleDate = showDate ? '<span class="item-date">' + shortDate + '</span>' : '';
var toggleAuthorImg = showAuthorImg ? '' + authorImgTag + '' : '';
var toggleCommentCount = showCommentCount ? '<span class="item-comment-count">' + postCommentCount + '</span>' : '';
// The Output
var itemPost = '<div class="item-post"><div class="item-imgs">' + toggleImg + toggleAuthorImg + '</div>' + toggleCommentCount + '<a class="item-link" href=' + postUrl + '>' + toggleTitle + '</a>' + toggleSummary + toggleDate + '</div>';
// Let's Write It Down
document.write(itemPost);
}
}
//]]>
</script>
<script type="text/javascript">
// The Default Options
var imgSize = 96;
var summaryLength = 142;
var authorImgSize = 36;
var showImg = true;
var showTitle = true;
var showSummary = true;
var showDate = true;
var showAuthorImg = true;
var showCommentCount = true;
</script>
<script src="/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=postGrabber"></script>

In all those lines of code, the only reference I can see to a url property is here...
var orgImgUrl = json.feed.entry[i].media$thumbnail.url ? json.feed.entry[i].media$thumbnail.url : 'http://1.bp.blogspot.com/-mxinHrJWpBo/VD6fqbvI74I/AAAAAAAAcn8/LslulDeOROg/s72-c/noimage-chalkboard.jpg';
so, I'm guessing that what the error is saying is that json.feed.entry[i] doesn't have a property named media$thumbnail...it is "undefined". You need to correct that, whether it is a typing error or something else, make sure that that property exists.
If the property is "optional" then change your evaluation to check for the existence of that property as below...
var orgImgUrl = (json.feed.entry[i].media$thumbnail != null
&& json.feed.entry[i].media$thumbnail.url)
? json.feed.entry[i].media$thumbnail.url
: 'http://1.bp.blogspot.com/-mxinHrJWpBo/VD6fqbvI74I/AAAAAAAAcn8/LslulDeOROg/s72-c/noimage-chalkboard.jpg';

Add div to javascript code

Trying to add a div around some javascript code.
Here's the code I'm trying to modify:
slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');
if (slider.pagingCount > 1) {
for (var i = 0; i < slider.pagingCount; i++) {
slide = slider.slides.eq(i);
item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"/>' : '<a>' + j + '</a>';
if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
var captn = slide.attr( 'data-thumbcaption' );
if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
}
slider.controlNavScaffold.append('<li>' + item + '</li>');
j++;
}
}
Here's the resulted outcome when you add <div class="container"> before the <ol> and closing </div> tag after </ol> in the code above...as you can see the list closes before list items make it inside:
<div class="container"><ol class="flex-control-nav flex-control-paging"></ol><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></div>
Here's what I'm trying to output.
<div class="container"><ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li><li><a>3</a></li><li><a>4</a></li></ol></div>
Code that isn't working:
slider.controlNavScaffold = $('<div class="container"><ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol></div>');
if (slider.pagingCount > 1) {
for (var i = 0; i < slider.pagingCount; i++) {
slide = slider.slides.eq(i);
item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"/>' : '<a>' + j + '</a>';
if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
var captn = slide.attr( 'data-thumbcaption' );
if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
}
slider.controlNavScaffold.append('<li>' + item + '</li>');
j++;
}
}

You didn't post it, but I suspect that you changed that first line to
slider.controlNavScaffold = $('<div><ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol></div>');
That will cause the code to do exactly what you describe, because the .append() calls will append to the outer element (the <div>).
Instead, leave that first line alone, and then at the end — after the <li> elements have been added — add this:
slider.controlNavScaffold.wrap( $('<div/>', { "class": "container" }) );
After that, in order to have things work properly when you actually add the stuff to the DOM, you'll want to find the parent of the <ol> and make sure that that's what you add:
slider.controlNavWrapper = slider.controlNavScaffold.parent();
(or however you want to keep track of it).

Retrieve multiple elements with "getElementById"?

I've tried using the techniques mentioned in these questions, but I haven't had any luck. I'm trying to adjust a JavaScript function to retrieve multiple divs using the getElementById method.
Here is the current line of code within the function which retrieves the div #cat1:
var elem = document.getElementById(cat1);
Moving forward, I need this function to also retrieve the div #cat2.
jQuery can be loaded if there's a better method to accomplish this using their library?
Here is the full function (reference Line 3):
function getCategories(initial) {
var i;
var elem = document.getElementById('cat1');
if (initial == 1) {
jsonGroups = "";
jsonGroups = '{ xml: [], "pin": [] ';
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
jsonGroups = jsonGroups + ', "' + elem.childNodes[i].attributes.getNamedItem("id").value + '": [] ';
}
}
jsonGroups = jsonGroups + "}";
markerGroups = eval('(' + jsonGroups + ')');
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
var elemID = elem.childNodes[i].attributes.getNamedItem("id").value;
if (elemID != "user") {
elem.childNodes[i].innerHTML = "<a onclick='" + 'toggleGroup("' + elemID + '")' + "'>" + elem.childNodes[i].innerHTML + "</a>";
} else {
elem.childNodes[i].innerHTML = '<form id="userPOIForm" action="#" onsubmit="userPOIFind(this.userPOI.value); return false"><input id="userPOITxt" size="20" name="userPOI" value="' + elem.childNodes[i].innerHTML + '" type="text"><input id="userPOIButton" value="Go" type="submit"> </form>';
}
if (hasClass(elem.childNodes[i], "hidden") !== null) {
elem.childNodes[i].setAttribute("caption", "hidden");
} else {
elem.childNodes[i].setAttribute("caption", "");
}
if (elem.childNodes[i].attributes.getNamedItem("caption").value != "hidden") {
classAdder = document.getElementById(elemID);
addClass(classAdder, "visibleLayer");
}
}
}
}
for (i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeName == "LI") {
var catType = elem.childNodes[i].attributes.getNamedItem("id").value;
result = doSearch(elem.childNodes[i].attributes.getNamedItem("title").value, elem.childNodes[i].attributes.getNamedItem("id").value);
}
}
}

If you are trying to select all elements with an id that starts with cat, you can do this in jQuery like this:
$("[id^=cat]")
jQuery: Attributes Starts With Selector

Just make categoriesList be another parameter, and call the function twice.

How to get input inside textfield here?

I am new to javascript. I just want to take input in the created textfield.
So that I created a ul tag with id cstList.
and called a function listData() on the onclick event
Inside that I am trying to create a input tag inside a div tag.
After creation I am not able to type in the textfield.
Can anybody tell me, why is it so?
Here is my listData() code
function listData()
{
//var a = sessionStorage.getItem('id');
if(sessionStorage == null)
{
alert("Session storage not supported here");
}
else
{
var ss = sessionStorage.getItem('id');
alert("storage value is: "+ss);
}
var rows = prompt('Please type in the number of required rows');
var listCode = '';
for (var i = 0; i < rows; i++) {
var listID = 'list_' + i.toString();
var divID = 'div_' + i.toString();
var inputIdp = 'inputp_'+ i.toString();
var inputIdq = 'inputq_'+ i.toString();
// listCode += '<li id="' + listID + '><div id = "'+ divID + '"> <input type= "text" id= "boltQTY" name= "boltQTY" value = "abc"/> <input type= "text" id= "a" name= "boltQTY" value = "abc" size="5"/></div></li>';
listCode += "<li id='" + listID + "'><div id = '"+ divID + "'> <input type='text' id='" + inputIdp + "' name='" + inputIdp + "' value='' size='15'/> <input type='text' id='" + inputIdq + "' name='" + inputIdq + "' value='' size='15'/> </div></li>";
//variable = "string" + var1 + "string=' " + var2 +"' ";
}
document.getElementById('cstList').innerHTML = listCode;
}

I got an answer. That was the issue with the iscroll, discussed on the group.google.com.
Resolved the problem of entering the value in text field by the below code.
Create this code in new js file.
iScroll.prototype.handleEvent = function(e) {
var that = this,
hasTouch = 'ontouchstart' in window && !isTouchPad,
vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
(/firefox/i).test(navigator.userAgent) ? 'Moz' :
'opera' in window ? 'O' : '',
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel';
switch(e.type) {
case START_EV:
if (that.checkInputs(e.target.tagName)) {
return;
}
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV:
that._move(e);
break;
case END_EV:
if (that.checkInputs(e.target.tagName)) {
return;
}
case CANCEL_EV:
that._end(e);
break;
case RESIZE_EV:
that._resize();
break;
case WHEEL_EV:
that._wheel(e);
break;
case 'mouseout':
that._mouseout(e);
break;
case 'webkitTransitionEnd':
that._transitionEnd(e);
break;
}
}
iScroll.prototype.checkInputs = function(tagName) {
if (tagName === 'INPUT' || tagName === 'TEXTFIELD' || tagName === 'SELECT') {
return true;
} else {
return false;
}
}