ASP.NET String Format Grid Link Button

Today I wanted create a link button to allow a user to delete an item with a confirmation message. However, I did not want to just say 'Are you sure you want to delete?'. I wanted it to be more customized like 'Are you sure you want to delete 'XYZ'? I was working in a GridView using a templated LinkButton. Eval statements are not my thing but I did find a post out there that suggested I do the following and it worked great.

 <asp:LinkButton ID="LinkButton1" 

  runat="server" CausesValidation="False" 

  CommandName="Delete" Text="Delete" 

  OnClientClick='<%# Eval("ClassDesc", "return confirm(\"Delete {0}?\");") %>'>

</asp:LinkButton>

And that was it. Pretty simple.

Visual Studio 2008 Team Foundation Server 2010

After un-installing VS2008 because I never used it and it seemed to have so many issues, I had to re-install it because I had some work that needed to done that used the Business Intelligence part of it. The problem I had was hooking up VS2008 to the Team Foundation Server which was deployed in 2010. I have no idea how it TFS is setup but that was the current configuration.

Of course, my TFS setup flawlessly in VS2010, however in VS2008 initially there was not even a source control option. So here were the steps to get it working:

1. Install VS2008 Team Explorer

2. Install VS2008 Service Pack 1. NOTE: This took a loooong time to install. I even received an error saying it failed to install. Dummy me installed it again...the second time it showed the same problem. I opened up the error log and saw that MOST of it installed but the final component did not. I think there was regarding SQL Server compact or something. SO I made the command decision to ignore this error for the time being until it comes bite me at a later date...

3. I returned back to VS2008 still no go with TFS. I would type in the URL to the TFS server but it could not connect. So I installed VS2008 SP1 forward patch. Still no go....

4. Setup the TFS url like this: https://tfsXX.servername.net/tfs/projectname/ with the final forward slash. It will appear to work, it is NOT - no project show in the Team Explorer....

5. Close VS2008.

6. Open up regedit, edit this key: HKEY_CURRENT_USER/Software/Microsoft/VisualStudio/9.0/TeamFoundation/Servers, remove that final slash.

The regedit tip was provided to me by this post: http://coderjournal.com/2010/02/connecting-visual-studio-2008-to-team-foundation-server-2010/comment-page-1/#comment-69411

7. Now reopen VS2008. Should work now.

Good luck! Although this is probably such old technology that no one will EVER need this post :)

Jquery Firefox won't submit form

I was attempting submit a cart checkout page to a hosted order form. I was submitting the form via a jquery call after modifying the form by removing some un-necessary elements and modifying the form action. This worked fine in IE/Chrome but not FF. In FF the form was not submitted. It was apparently due to the removing of the extra elements. I found this post that helped me out:

http://stackoverflow.com/questions/6347433/form-will-not-submit-if-remove-is-used

I was using ASP.NET button as using the submit behavior. I removed the asp.net button and replace it with a plain old html input button and it worked great!

Here is some sample code:

Input Button:

<input type="button" name="btnPayment" value="Checkout" onclick="update();" id="btnPayment">


Javascript:

function update() {

if ($("#uType").val() == "US") {

$("#__EVENTVALIDATION").remove();

$("#__VIEWSTATE").remove();

$("#__PREVIOUSPAGE").remove();

$("#__EVENTARGUMENT").remove();

$("#__EVENTTARGET").remove();

$elements = $('input[id^="ctl00_SubContentPlaceHolder_"]').remove();

$('form').get(0).action = "https://xxx.com/payment";

$('form').get(0).submit();

}

}

Hope that helps!!!

TheThe Image Slider Plugin: Stops working after two images

Ok. I worked on an issue with the TheThe Image Slider which is a plugin for a WordPress site. It is a basic image slider that has several options of showing numerous images. The problem was after a couple of images the slider seemed to stop working. Of course, after searching for a solution, I found the question asked many times with no solution. So I investigated further and hours later found the problem was very simple.

I changed the Transition Time setting from 9000 (ms) to 900 (ms). So maybe the image slider was not stuck but rather waiting 9000 ms? Seems like I waited longer that 9 seconds to confirm it was not moving on. Anyway, I don't know if this was the default setting. I was given the problem to solve so I don't know the initial state of the plugin just that changing it fixed it...

Hope that helps someone!

CSS: Absolute Positioning

I was using the JCarousel package to create a 'Related Items' carousel to style the WordPress plugin for 'Related Items'. CSS is a tricky area for me especially things like positioning.

On this particular piece of functionality that I was building, when the user hovered a 'Related Item', an overlay needed to pop-up exactly over it with some additional information.

Basically, a
<ul> tag is created with several <li>, each </li> <li> contains two <div> tags. One is the 'active' div and the other is the 'inactive' div. When the 'inactive' div is hovered you want the 'active' div to show.

For the most part it worked fine, however, I noticed that the first 4 related items worked fine, however, the last would hover up and over to the left rather than right over the image being hovered. So confusing. Anyway, it goes back to understanding absolute positioning.

I had the 'active' class defined like this:

.active {
width:160px;
height:160px;
display: none;
position:absolute;
top:0;
left:-1;
z-index:2;
}

This should pop this div up from its original placement to cover the 'inactive' div.

My problem was solved by explicitly making the parent of this (which in my case was  a <li> classed as 'jcarousel-item') marked as position:relative like so:

.jcarousel-skin-tango .jcarousel-item {
    width: 165px;
    height: 165px;  
    position:relative;  
}

Apparently child items that are absolutely position need the parent to be relative. By default it is static, that is why I was getting the odd last item positioned funny.

This post helped me to better understand things.

HttpWebRequest Time Out HTTPS Call

I recently had some HttpWebRequest calls begin to timeout without any error code returned. Just a timeout. I had not changed my code so I suspected that the site I was calling had changed something.

I found that I could call other HTTPS sites just fine, but this one in particular just timed out. I also tried to bypass all the certificate errors using the code:

ServicePointManager.ServerCertificateValidationCallback = (s, cert, chain, ssl) => true;

That did not work. I had the break-through moment when I found that if I change the call from HTTPS to HTTP, it worked. Although that was not going to be a fix!

After much searching, I found this post, I submitted the fix to the company and it resolved the problem.

The company had migrated the webserver which was an Apache Server. This small configuration item made some mismatch with the SSL certificate which blocked the HttpWebRequest calls I was making to the HTTPS urls.

Basically, Apache httpd.conf needed to be modified. Here is info from the post:

It had the server name like this: ServerName www.secure.mydomain.com

The certificate was registered to secure.mydomain.com, and the URL I was calling was also https://secure.mydomain.com/xxxx.html.

So simply changing the conf file to the following and restarting Apache did the trick:

ServerName secure.mydomain.com

The following would have also worked, most likely:
ServerName www.secure.mydomain.com
ServerAlias secure.mydomain.com

Hope this saves someone a major headache!

PHP Location Redirect Error IE

This will be short. You try using the PHP location command to redirect or refresh your page. It works in Firefox but you notice that IE cuts you off with "Page cannot be displayed" error.

Look at your code very carefully:

I had this:
header("location:".$_SERVER["PHP_SELF"]);
exit();

Notice the lowercase "l" and the lack of a space after the colon, this was the problem, this fixed it:

header("Location: ".$_SERVER["PHP_SELF"]);
exit();

Apparently, IE can be picky about this...

Also, make sure you include the exit, it is important...

Picup App load image locally rather than using Imgur

A few months back I blogged about using the Picup app to grap iPhone/iPod/iPad pictures from their "i"-device to your website.

The part that has been bugging me was doing a remote upload to Imgur rather than a local upload to my server. I assume Imgur owns any image you upload to them which was a concern of mine.

So I spent some time yesterday trying to figure out my missing piece. I was relieved when I figured out that it was not my lack of brain power :) but rather the technology that I was using. I don't generally use classic ASP. I prefer ASP.NET/C# or PHP any day! With Classic ASP, you cannot easily upload files to your server by accessing the response.form. Instead, you have to download one of several 3rd party components to get the files, which then you have to register the dll blah blah blah.

However, on my server I happened to also have access to PHP. Out of frustration, I thought I will just try all my code on PHP to see if the upload will work. And it did...easily.

So to re-iterate the steps:

STEP 1. Create initial page with an input button, here is a short sample:

<html>
<header></header>
<body class="iphone" onLoad="loadMobile();" >
<form method="post" name="form1">

<input type="file" name="attach1" id="attach1"/>

</body></form></html>

STEP 2. Add script calls to that page.

<script type="text/javascript" src="js/picup.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>

STEP 3. Add javascript function that sets up picup app settings. This function is loaded on the body "onLoad" see step 1. You could probably use jQuery to load this after document ready...

<SCRIPT TYPE="text/javascript">
function loadMobile(){

Picup.checkHash();
var url = escape('http://yourwebsite.com/uploadPhoto.asp');
var posturl = escape('http://yourwebsite.com/get-posted.php');

currentParams = {
'callbackURL': url, //the page called after upload.
'referrername'   : escape('mywebsitename'),
'referrerfavicon'  : escape('http://yourwebsite.com/images/favicon.ico'),
'purpose'               : escape('Select...message to user..'),
'debug'   : 'false',
'returnThumbnailDataURL': 'false',
'thumbnailSize'         : '80',
'postURL': posturl,    //the page that will upload the photo
'returnServerResponse':'true' //returns output of posturl
};

Picup.convertFileInput($('attach1'), currentParams);
}
</script>

STEP 4. Setup the "postURL" page, for me it is a simple PHP file. It outputs the name of the file as the response body so that my callback page can get the file name and update records accordingly.

<?php
if (isset($_FILES)){
 foreach ($_FILES as $key => $file){
  move_uploaded_file($file['tmp_name'], 'photos/'.$file['name']);
  echo $file['name'];
 }
}
?>

STEP 5. Setup the javascript on the callback page to grab the file name...and anything else that it needs.

<SCRIPT TYPE="text/javascript">
var fileName = unescape(getHashUrlVars()['serverResponse']);
var success = getHashUrlVars()['status'];

//parse hashed values from url
function getHashUrlVars(){
 var vars = [], hash;
 var hashes = window.location.href.slice(window.location.href.indexOf('#') + 1).split('&');
 for(var i = 0; i < hashes.length; i++)
 {
 hash = hashes[i].split('=');
 vars.push(hash[0]);
 vars[hash[0]] = hash[1];
 }
 return vars;
}

....process as needed

I hope this helps.

CSS: Using Fieldset in place of Tables to lay out form information

Typically, I've used tables or nested div tags to lay out a page that has label/input items for forms such as "Contact Us". Although tables and div tags can work fine, I found that using a fieldset tag with label and input tags can be very easy to use with a little CSS to help things along.

First here is a sample fieldset layout:
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" />
</fieldset>

Which looks as follows:

Name

Phone Number

This will layout the data from top to bottom, vertically. Now the problem is the default spacing and border stuff. To control this, attach a stylesheet or style tag with class definitions as follows:

/*get rid of gray border*/
.styleFieldset {border: 0 none;}

/*style the input fields*/
.styleFieldset input{
border: solid;
border-color:#9FB6CD;
border-width: thin;
background: #FFF;
width: 250px;
height: 25px;
font-size:100%;
float: left;
clear: left;
border-radius: 3px;
color: #4F4F4F;
}

/*style the label fields*/
.styleFieldset label {
float: left;
clear: left;
text-align:left; 
width:250x; 
color:#006296;
font-weight:bold;
padding-bottom:5px;
padding-top:12px}

Which then you would apply the class as follows:

<fieldset class='styleFieldset'>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" />
</fieldset>

And finally should look as follows:

Name

Phone

T-Mobile Hotspot @home blue light (phone port) not on

I've posted on this topic before, but here is another tip I have for this setup. If your blue router light for the phone port does not come on after having worked for years, you may want to upgrade the firmware. Our phone line stopped working a couple weeks ago after working fine for quite some time (the wireless internet was working just fine).

I have the WRTU54G-TM Linksys router. I logged into the Admin Tool via a browser. You will need to navigate to http://192.168.0.1/ in your brower, login as admin and if you have never been there before probably use the default password located on your router.

Once you have logged in go to Administration - Firmware upgrade. I downloaded the latest upgrade file from Linksys and ran the upgrade. After restarting the router with the SIM card installed in slot 2, and waiting quite a bit, the blue light came on.

You may have to wait a bit, it did not happen immediately. IDK when it happened because I was just walking by thinking it was still not working when I noticed the light on.

Hope that helps!

Gold Cart Thumbnail Gallery Link not Working

If you find one day that your Gold Cart Thumbnail gallery images are not click-able, this post may help you! I was using the following in my wp-ecommerce wpsc-single-product.php page, to display small thumbnail images below the large, main image, these are supposed to be click-able and should open up the big gallery image when clicked, depending on your setting for the main image i should add.

if ( function_exists( 'gold_shpcrt_display_gallery' ) )
 echo gold_shpcrt_display_gallery( wpsc_the_product_id() );

I am not sure at what point the image links were not working..I had modified the code from just changing out the main image to opening the gallery maybe that broke it or it was always broke.. Anyhow, in using Firebug I could tell the anchor/image link was set up but just not working right, of course, after much research I finally came across this post: http://www.sitekickr.com/blog/wp-e-commerce-gold-cart-product-gallery-lightbox/ that suggested I do this:

if ( function_exists( 'gold_shpcrt_display_gallery' ) )
 echo str_replace('attachment-gold-thumbnails', '',  gold_shpcrt_display_gallery(wpsc_the_product_id() ));

Which was removing the 'attachment-gold-thumbnails' from the output. 'Cause it was getting in the way! And that worked out perfect!

Get PHPMailer to work for GoDaddy Shared Hosting

I inherited a GoDaddy website that is setup as, I think, a shared hosting environment. With this setup, it seems you are somewhat limited in many ways including how to send emails.

The website I was working with was using the default no authentication relay email service. You simply submit the command like this:

mail($email, $subject, $sub);

add this to your php.ini file: SMTP: SMTP = relay-hosting.secureserver.net

And it magically sends the email out for you. It works but it does seem to be rather slow and the other downfall is that the "To:" looks like this on the receiver's end:

MY NAME via p444nlh038.xxx.bbbb.xxxx.secureserver.net

Many of the recipients of the emails could not receive this message. Maybe their emails marked this as SPAM or whatever. I could tell the users to dig into the SPAM mark it not as SPAM and then add that weird email address as a known contact...but that seems too hard and it just does not look right (that email).

In and out of months, I hoped and tried to setup the email to work with GMAIL. So many postings lead me to believe I could. And it may be possible in a non-shared environment on GoDaddy. Ultimately, I found that IT WAS NOT POSSIBLE with all the knowledge I found to do this setup: PHPMailer, GoDaddy, Gmail, and Shared hosting. I could run emails all day locally, but when I would move it to the server it would not work.

What I did find that turned out to be an acceptable solution was to use the email account provided by GoDaddy that used the domain name in the email like 'info@junk.com'.

Some yahoo who took care of the site before me had setup the MX records to point to Google and then took off leaving no evidence of the login info for that account. So I had to revert the MX records to GoDadddy, wait and hour...and the press on.

1. Modify php.ini: SMTP = relay-hosting.secureserver.net

2. Download PHPMailer. I don't know exactly where the "good" download was that I got. The first download I tried named the main file as "phpmailer.inc.php" which I found had a single syntax error. And never seemed to work right. So luckily I found another download that names the main file "class.phpmailer.php". This one worked better with a couple of well-documented hacks that I applied.

3. Apply Hacks:

Around line 104 in the class.smtp.php file add this:

$host = "relay-hosting.secureserver.net";

under the comment: #connect to the smtp server

Around line 1036 in the same file,

Replace this line:

while($str = fgets($this->smtp_conn,515)) {

with this:

while($str = @fgets($this->smtp_conn,515)){

4. Setup your test:

include('phpmailer/class.phpmailer.php');

$mail = new PHPMailer ();

$mail -> From = "junk@junk.com";
$mail -> FromName = "JUNK";
$mail -> AddAddress ("junk2@junk.com");
$mail -> Subject = "Test";
$mail -> Body = "
From Me!
";
$mail -> IsHTML (true);

$mail->IsSMTP();

$mail->Host = 'hosting';
$mail->Username = 'junk@junk.com';
$mail->Password = '***';

if(!$mail->Send()) 
 echo "Error:" . $mail->ErrorInfo;
else 
 echo "Success.";

?>

Data URL? How to display an inline image

I recently wrote code to work with the Picup App. One of the parms returned by the app is thumbnailDataUrl. I had no idea what it was and had not heard of it. It looked this in the query string (shortened):

thumbnailDataURL=data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl

At first I was so concerned with figuring out how to use the Picup to grab images that I did not pay attention to this piece until today.

I learned from this article that is a URL Data Scheme. And it is soooo easy to use, just throw it into the src value of an image tag!
<img src="data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl" />
Love it!

Use Picup App to upload image to website from iPhone

To allow iPhone image uploads on the the classic, yes, I said, classic ASP site I was working I followed the following Picup App instructions posted at:

http://www.parorrey.com/blog/php-development/resolve-mobile-safari-greyed-out-file-field-issue-in-iphone-ipod-ipad-by-using-picup-app-to-upload-images/

For the most part, the instructions worked just fine. The only item I would add is that the blog post is not very clear in stating that the iPhone user must download the free Picup App onto their phone for the code that you write to work. It is mentioned in the comments.

It is also mentioned here: http://picupapp.com/best_practices.html

However, the image is posted rather than the words of the error so googling it might be hard to find. The error that indicates the app has not been installed is a generic window that says:
"Safari cannot open the page because the address is invalid"

I did change the code to work with my asp site. I could not get the document.observe to work. I think that is what the prototype.js file is for but it was no go.

Instead I put 'hardcoded' the body tag "class=iphone" and used the onLoad to call my loadMobile() function instead of using the document.observe:

function loadMobile(){

Picup.checkHash();
var element = document.getElementById('aid');
var x;

if (typeof(element) != 'undefined' && element != null)
x = element.value;

var url = escape('http://mysite.com/uploadContactPhotoI.asp?Assigneduserid=' + x);

<!-- Set some starter params -->
currentParams = {
'callbackURL' : url,
'referrername' : escape('mysite'),
'referrerfavicon' : escape('http://mysite.com/images/favicon.ico'),
'purpose' : escape('Select your photo for the our App.'),
'debug' : 'false',
'returnThumbnailDataURL': 'true',
'thumbnailSize' : '80'
};

Picup.convertFileInput($('attach1'), currentParams);
}

And the following is the code used on the callback page go pick up the values passed back by the Picup app hash url:

<SCRIPT TYPE="text/javascript">

var allVars = getHashUrlVars();

// Get all URL parameters
var imageURL = unescape(getHashUrlVars()['remoteImageURL']);
var success = getHashUrlVars()['status'];

function getHashUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('#') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

function onSubmitForm(){
var startIndex = 0;

startIndex = imageURL.indexOf('.com/');
startIndex = startIndex + 5;

var fileName = imageURL.substring(startIndex);

if(success.toUpperCase() != 'COMPLETE')
alert("We were unable to complete the request to upload the image, please try again.");
else
{

document.getElementById('fname').value = fileName;
document.getElementById('rurl').value = imageURL;
document.getElementById('uploadedImg').src = imageURL;

}
}

function showImage(){

if(typeof(imageURL) != "undefined"){

if(document.getElementById('uploadedImg') != null)
{
document.getElementById('uploadedImg').src = imageURL;
document.getElementById('uploadedImg').style.display="block";
document.getElementById('uploadedImg').style.visibility="visible";
document.UpdateContactPhoto.action = "uploadContactPhotoI.asp?imageUrl=" + imageURL;
}
}
}

</script>

WordPress WP-Ecommerce, Modify or Remove Sidebar

I needed to modify the product page display to be better displayed. The product page did not have a side menu, but the div tag 'sidebar' still existed taking up about 180px worth of space which threw the layout off. I searched for a way to get rid of the space, but found there was not an acceptable solution since the Theme was forcing it to be there and I did not really feel like digging around in the code to find it.

It took me awhile to think of this solution and I am not sure why and I never saw anyone post this solution and IT IS SIMPLE! Modify the css on the 'wpsc-single_product.php' page. I am not a senior word press person so I don't know if all wp wp-ecommerce pages have this page but whatever page you are dealing with add this css to override the stylesheet and make the sidebar 0px:

#columnleft
{
float:left;
width:0px;
}

#columnright
{
float:right;
width:870px;
padding:1px;
}

#sidebar
{
width: 0px;
}

Ajax Update Panel Scroll to Top Issue

I found this great post on how to force a scroll to top when you have a long page that is contained inside an UpdatePanel. For myself, I was having issues with items inside a Wizard control. Some of the pages had very long text. So when the user clicked "Next" it would move to the next page, but it would go the middle of the page (whereever the last page position was) rather than go to the top. So the user would be confused as to where they were. So I wanted the page to go to the top of the page on the Next button click. I added the following script just after my script manager:

<script type="text/javascript" language="javascript">

var postbackElement;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded)

function beginRequest(sender, args) {

postbackElement = args.get_postBackElement();

}

function pageLoaded(sender, args) {

if (typeof (postbackElement) === "undefined") {

return;

}

if ((postbackElement.id) === "btnStepNext" || (postbackElement.id) === "btnStepPrevious") {

window.scrollTo(0, 0);

}

}

</script>

Then I set the Next and Previous button in the Wizard control to ClientIDMode="Static" so the Javascript could identify them and it worked great!