tag:blogger.com,1999:blog-76384342553649723632024-03-05T14:42:10.289-08:00Diary of A DeveloperEmmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.comBlogger28125tag:blogger.com,1999:blog-7638434255364972363.post-55617148819757988462018-02-13T10:26:00.000-08:002018-02-13T10:26:02.809-08:00Domain Not Propagating<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://help.duda.co/hc/en-us/article_attachments/210773688/sitenotfound.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="447" data-original-width="800" height="177" src="https://help.duda.co/hc/en-us/article_attachments/210773688/sitenotfound.jpeg" width="320" /></a></div>
<br />
<br />
Isnt it frustrating sometimes, when for whatever reason, you had to update your DNS records for your domain and it takes forever to propagate. I had to go through this recently. One of the domains I manage expired, and we renewed after two days. Unfortunately, the registrar had parked the domain, pointing it to another location temporarily. This meant that after the renewal, we had to wait for 24 to 48 hours for the domain to fully propagate.<br />
<br />
I then had to do a fix that ensured that some other servers who talked to that domain could still access the server it pointed to, even though the domain was not fully propagated to them. It involves a simple fix for windows systems.<br />
<br />
<ol style="text-align: left;">
<li>Open notepad as administrator</li>
<li>Open <span style="font-family: "Courier New", Courier, monospace;">C:\Windows\System32\Drivers\etc\hosts</span> (assuming that windows is installed on the C drive)</li>
<li>Scroll to the end of file and add two new lines (press Enter twice)</li>
<li>Enter the IP Address, leave a space then the domain name</li>
<li>Do the same for necessary subdomains where needed, e.g www</li>
<li>Save and close the file</li>
</ol>
Great! you are done. </div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-48631835839816112152016-10-12T07:01:00.001-07:002016-10-12T07:05:56.694-07:00Resize or Crop Image before Upload Using HTML5 File API<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfG1Fp39fBuYWWMVn6LR1Tw2jz2jlKYjrOfiecELVja5iUjkfzXPOkMGI0N160JnslZat-lCOHSEtfBBIPyN7Wy4oZgzcgg1ellk8ByQHmEN3TIvaXINgrqOtkUC6ZED1sjV2vxOFjQ/s1600/cropper.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfG1Fp39fBuYWWMVn6LR1Tw2jz2jlKYjrOfiecELVja5iUjkfzXPOkMGI0N160JnslZat-lCOHSEtfBBIPyN7Wy4oZgzcgg1ellk8ByQHmEN3TIvaXINgrqOtkUC6ZED1sjV2vxOFjQ/s640/cropper.jpg" width="640" /></a></div>
<br />
I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that.<br />
<br />
<b>Step 1: Download <a href="https://github.com/fengyuanchen/cropper" target="_blank">CropperJs Plugin</a></b><br />
There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's <a href="https://github.com/fengyuanchen/cropper" target="_blank">the github link</a><br />
<br />
<br />
<b>Step 2: Import the CropperJs Plugin</b><br />
Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in the head section, while Javascript files should be loaded just before closing the BODY tag. Also ensure that JQuery library is included in your project.<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007700;"><link</span> <span style="color: #0000cc;">href=</span><span style="background-color: #fff0f0;">"css/cropper.css"</span> <span style="color: #0000cc;">rel=</span><span style="background-color: #fff0f0;">"stylesheet"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><script </span><span style="color: #0000cc;">src=</span><span style="background-color: #fff0f0;">"js/cropper.min.js"</span><span style="color: #007700;">></script></span>
</pre>
</div>
<br />
<br />
<b>Step 3: Add Required HTML Tags</b><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007700;"><input</span> <span style="color: #0000cc;">id=</span><span style="background-color: #fff0f0;">"the-file-input"</span> <span style="color: #0000cc;">type=</span><span style="background-color: #fff0f0;">"file"</span> <span style="color: #0000cc;">accept=</span><span style="background-color: #fff0f0;">"image/*"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">id=</span><span style="background-color: #fff0f0;">"PreviewImage"</span><span style="color: #007700;">></div></span>
<span style="color: #007700;"><button</span> <span style="color: #0000cc;">type=</span><span style="background-color: #fff0f0;">"button"</span> <span style="color: #0000cc;">id=</span><span style="background-color: #fff0f0;">"SaveImageBtn"</span> <span style="color: #007700;">></span>Save Image<span style="color: #007700;"></button></span>
</pre>
</div>
<br />
<ul style="text-align: left;">
<li>The file input control with Id = <span style="font-family: "courier new" , "courier" , monospace;"><i>the-file-input</i></span> will be used to select the image</li>
<li>The div with id = <i><span style="font-family: "courier new" , "courier" , monospace;">PreviewImage</span> </i>will be the cropping area</li>
<li>The button with id = <span style="font-family: "courier new" , "courier" , monospace;"><i>SaveImageBtn</i></span> will be used to trigger the upload process</li>
</ul>
<br />
<b>Step 3: Add JavaScript Code </b><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">InitializeCropper <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> () {
$WorkingImage <span style="color: #333333;">=</span> $(<span style="background-color: #fff0f0;">"#ImageToCrop"</span>);
<span style="color: #008800; font-weight: bold;">var</span> CropperSize <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">200</span>; <span style="color: #888888;">//size of the crop box</span>
$WorkingImage.cropper({
aspectRatio<span style="color: #333333;">:</span> <span style="color: #0000dd; font-weight: bold;">1</span> <span style="color: #333333;">/</span> <span style="color: #0000dd; font-weight: bold;">1</span>, <span style="color: #888888;">//aspect ratio of the crop box</span>
data<span style="color: #333333;">:</span> {
width<span style="color: #333333;">:</span> CropperSize,
height<span style="color: #333333;">:</span> CropperSize
}
});
}
<span style="color: #008800; font-weight: bold;">function</span> renderImage(file) {
<span style="color: #008800; font-weight: bold;">var</span> reader <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> FileReader();
reader.onload <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">function</span> (event) {
the_url <span style="color: #333333;">=</span> event.target.result
$(<span style="background-color: #fff0f0;">'#PreviewImage'</span>).html(<span style="background-color: #fff0f0;">"<img id='ImageToCrop' src='"</span> <span style="color: #333333;">+</span> the_url <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">"' />"</span>)
InitializeCropper();
}
reader.readAsDataURL(file);
}
$(<span style="color: #007020;">document</span>).ready(<span style="color: #008800; font-weight: bold;">function</span>(){
$(<span style="background-color: #fff0f0;">"#the-file-input"</span>).change(<span style="color: #008800; font-weight: bold;">function</span> () {
renderImage(<span style="color: #008800; font-weight: bold;">this</span>.files[<span style="color: #0000dd; font-weight: bold;">0</span>])
});
$(<span style="background-color: #fff0f0;">'#SaveImageBtn'</span>).click(<span style="color: #008800; font-weight: bold;">function</span> () {
<span style="color: #008800; font-weight: bold;">var</span> ImageDataURL <span style="color: #333333;">=</span> $WorkingImage.cropper(<span style="background-color: #fff0f0;">'getCroppedCanvas'</span>).toDataURL(<span style="background-color: #fff0f0;">'image/jpeg'</span>);
//SaveImageURL(ImageDataURL);
});
});
</pre>
</div>
<br />
Remember that your JavaScript code needs to be enclosed in script tags if they are within your HTML.<br />
<br />
<b>Step 4: Save Your Cropped Image</b><br />
If you open your HTML file in the browser, at this point, you should be able to select an image file and crop as desired. The next step required is to upload cropped image and save in the server. Notice the SaveImageURL method called above inside the SaveImageBtn click event? Its commented out, but that's where the uploading takes place. The image DataURL string will be sent to the server through an Ajax call. I will provide sample codes for Client and Server side in my next post. Meanwhile, enjoy this cropping process first.<br />
<br />
This method is in use within a live project at <a href="http://www.osigla.com.ng/clinical/">http://www.osigla.com.ng/clinical/</a><br />
<br />
Cheers.</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-90637361449154281952016-04-07T04:39:00.001-07:002016-04-07T04:39:26.948-07:00T-SQL: Prudent use of Select ... As<div dir="ltr" style="text-align: left;" trbidi="on">
Every database developer using T-SQL will agree that the Select ... As feature allows one to easily grab values into a variable. However, after I got my fingers burnt recently, I had to share this to remind everyone how important it is to exercise prudence with its usage. Given the table below, assuming its an SQL table named Students.<br />
<br />
<br />
<table style="border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; max-width: 500px; padding: 0.2em 0.6em; width: 100%;"><thead>
<tr><td>Id</td><td>Name</td><td>Age</td><td>Class</td></tr>
</thead><thead>
</thead><tbody>
<tr><td>1</td><td>Fade Ayomi</td><td>10</td><td>5</td></tr>
<tr><td>2</td><td>Oluwayomi Ojo</td><td>9</td><td>6</td></tr>
<tr><td>3</td><td>Kemi Mide</td><td>8</td><td>4</td></tr>
</tbody>
</table>
<br />
<br />
And given the SQL statements below which performs certain operations on the table given above<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">declare</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #007020;">int</span>;
<span style="color: #008800; font-weight: bold;">select</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #333333;">=</span> Age <span style="color: #008800; font-weight: bold;">from</span> Students <span style="color: #008800; font-weight: bold;">where</span> Id <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1</span>;
<span style="color: #008800; font-weight: bold;">set</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #333333;">=</span> Age <span style="color: #333333;">*</span> <span style="color: #0000dd; font-weight: bold;">2</span>;
<span style="color: #008800; font-weight: bold;">select</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #333333;">=</span> Age <span style="color: #008800; font-weight: bold;">from</span> Students <span style="color: #008800; font-weight: bold;">where</span> Id <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">5</span>;
<span style="color: #008800; font-weight: bold;">select</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #008800; font-weight: bold;">as</span> AgeSelected;
</pre>
</div>
<br />
<br />
So what would AgeSelected resolve to according to the provided information? Ordinarily, one would expect AgeSelected to be NULL however, since @StudentAge carried a value initially, and the row described in the where clause do not exist in the table, @StudentAge will retain its previous value of 20 and therefore AgeSelected will be 20.<br />
<br />
To prevent logical errors like this in code, always ensure to initialize the value of your variable. For instance you could modify the code above by adding the following code after line 3.<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">set</span> <span style="color: #333333;">@</span>StudentAge <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">null</span>;
</pre>
</div>
Then go ahead to test for null after line 4 (which would now be line 5 when you have added the new line). Better still, just enclose the entire line 4 and 5 in if exists block. This ensures that line 5 only runs if the where condition is able to find a matching row.
If you are a culprit of this oversight with code in production, ensure you immediately rewrite your codes, I know you'll not want embarrassment from this.
</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-42880259191759132232016-04-06T05:16:00.000-07:002016-04-06T05:22:46.587-07:00Determine Appropriate Font-Size for Text iTextSharp<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OVt4LTIXvDvgMNDrEG947hFwoTsYQM6yB-1BsvJfz6Zm0orcPMnV_Qx_09JjsIV0wbMRiNcebvwkEdUiyoLi2LAxRbMm5RRjdgcT1ayW6943QuBlZSMPKucJPRG5gINLRgYkiBEEVA/s1600/appropriate+fontsize.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OVt4LTIXvDvgMNDrEG947hFwoTsYQM6yB-1BsvJfz6Zm0orcPMnV_Qx_09JjsIV0wbMRiNcebvwkEdUiyoLi2LAxRbMm5RRjdgcT1ayW6943QuBlZSMPKucJPRG5gINLRgYkiBEEVA/s1600/appropriate+fontsize.jpg" /></a></div>
<br />
<b>Background:</b><br />
I use CorelDraw a lot to lay out my reports before writing the iTextSharp code to generate them. It gives me a fair idea of how to position report elements and keeps me from doing guesses or trial and error. This was the case when I worked on the ID Card project for Delta State University: I had the ID card neatly laid out and the school loved the design.<br />
<br />
<b>Issue:</b><br />
Now, everyone knows we normally have long names in Nigeria. My design template had a name that was 10 characters long and I used 28pt points for this text. What I wanted to achieve however is that, for names that will not be able to fit into the maximum space allowed for the name text at the 28pt used in the design template, the system should use the maximum font size that will permit the name to fit in the space available. Its a simple problem, but wasn't so easy to resolve.<br />
<br />
<b>Solution:</b><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"> <span style="color: #008800; font-weight: bold;">public</span> Font <span style="color: #0066bb; font-weight: bold;">GetSafeFont</span>(<span style="color: #333399; font-weight: bold;">string</span> DisplayText, Font FontToUse, <span style="color: #333399; font-weight: bold;">float</span> SafeLength, <span style="color: #333399; font-weight: bold;">float</span> StartingSize)
{
<span style="color: #888888;">/* Display Text: The text you wish to display in your PDF using iTextSharp </span>
<span style="color: #888888;"> * FontToUse: The ideal Font definition for this text e.g FontFactory.GetFont("Avenir Next", 15.5f, Font.BOLD, new BaseColor(16, 99, 166))</span>
<span style="color: #888888;"> * SafeLenght: Maximum allowed lenght for the display text according to your design template</span>
<span style="color: #888888;"> * StartingSize: The ideal Font size for the DisplayText</span>
<span style="color: #888888;"> */</span>
<span style="color: #333399; font-weight: bold;">float</span> FontSize = StartingSize, CurrentLenght;
FontToUse.Size = StartingSize;
Chunk NameChunk = <span style="color: #008800; font-weight: bold;">new</span> Chunk(DisplayText, FontToUse);
<span style="color: #888888;">//ensure that displaytext doesnt exceed safe lenght by finding the largest possible font size</span>
CurrentLenght = NameChunk.GetWidthPoint();
<span style="color: #008800; font-weight: bold;">while</span> (CurrentLenght > SafeLength)
{
FontSize -= <span style="color: #6600ee; font-weight: bold;">0.5f</span>;
NameChunk.Font.Size = FontSize;
CurrentLenght = NameChunk.GetWidthPoint();
}
Font NewFont = FontToUse;
NewFont.Size = FontSize;
<span style="color: #008800; font-weight: bold;">return</span> NewFont;
}
</pre>
</div>
</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com1tag:blogger.com,1999:blog-7638434255364972363.post-6211745185066922382016-01-22T08:40:00.000-08:002016-01-22T09:07:19.210-08:00Creatives for Beauty Sanctuary<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyHHCllcuKzfgmcvIfLgtpKDy2dLzcdKWKQsUXCofId-BEXd_lhxD3BNKVZKtLhpKwr26MjkjliJea0uvy8iF2gBgOyzyzcPJl74VoT9y43oUaUUAWiCrVQp4A9jDwMEwXuvIXcEcZmQ/s1600/BS+Front.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyHHCllcuKzfgmcvIfLgtpKDy2dLzcdKWKQsUXCofId-BEXd_lhxD3BNKVZKtLhpKwr26MjkjliJea0uvy8iF2gBgOyzyzcPJl74VoT9y43oUaUUAWiCrVQp4A9jDwMEwXuvIXcEcZmQ/s640/BS+Front.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
This is a creative set for Beauty Sanctuary beauty shop. I hope it gives you some inspiration too.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOC8WF4fdk9alcC7BIOzohNC9vXskoW-9_eLml4f_nSEyNZuINVJVN72tdeLxkNi5rLl4MdvdIHwGW-Fe-xFpMw2TrUW1OqkQmyB-7Tvtdh59dpTAdZiaHAxVnA5IQD5DysBrT8_Q2aw/s1600/BS+Back.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOC8WF4fdk9alcC7BIOzohNC9vXskoW-9_eLml4f_nSEyNZuINVJVN72tdeLxkNi5rLl4MdvdIHwGW-Fe-xFpMw2TrUW1OqkQmyB-7Tvtdh59dpTAdZiaHAxVnA5IQD5DysBrT8_Q2aw/s640/BS+Back.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy8hHQRR1kSYCzbew9TIv9kSx4fSNiCZ6-Zgkm8SSehYLmJ_RJiiBFJ4cID2R7mIEEslH5A-Az1umag30ITsFIAqf5Beg0h0mLRtHp3tprfgieoGm7c8eTxBd6M2E9nR-X5PxpAi5oew/s1600/BS+Inner+Spread.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy8hHQRR1kSYCzbew9TIv9kSx4fSNiCZ6-Zgkm8SSehYLmJ_RJiiBFJ4cID2R7mIEEslH5A-Az1umag30ITsFIAqf5Beg0h0mLRtHp3tprfgieoGm7c8eTxBd6M2E9nR-X5PxpAi5oew/s640/BS+Inner+Spread.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsrCPIF6zpPKXTW-WeN40ZTp-AiOs7lbU_iKakFhOngl0OEcfs1pC2OThFVR3FDojip-bQtEReNxxTJXUd47G5j2Xr7-fKcyyOlTgsfuChPNChXUQ3tygTOfFfd-wsAavIXXmTa_cWpw/s1600/BS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsrCPIF6zpPKXTW-WeN40ZTp-AiOs7lbU_iKakFhOngl0OEcfs1pC2OThFVR3FDojip-bQtEReNxxTJXUd47G5j2Xr7-fKcyyOlTgsfuChPNChXUQ3tygTOfFfd-wsAavIXXmTa_cWpw/s640/BS.jpg" width="450" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br /></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-67740236277282317502016-01-21T09:29:00.000-08:002016-04-07T04:47:14.982-07:00Implementing Token-based Authentication for Service-based Web Applications<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtAgnYJB-t9dpsRJarHTZkEJSvz3kvLowxN95Pi-mBqYPhiGEzGqXIdaam1WnFGD2dsFG9p1ndONOb0-IWuOSFyS0kbyfkYl0Br5t0A9EDcVVgGAlYAY5GXWvdA58mjMra1af_PnV3A/s1600/security.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtAgnYJB-t9dpsRJarHTZkEJSvz3kvLowxN95Pi-mBqYPhiGEzGqXIdaam1WnFGD2dsFG9p1ndONOb0-IWuOSFyS0kbyfkYl0Br5t0A9EDcVVgGAlYAY5GXWvdA58mjMra1af_PnV3A/s640/security.jpg" width="640" /></a></div>
<br />
With the magical things developers can achieve with JavaScript these days, there is almost no reason to develop on the web without JavaScript. The drawbacks of the traditional web development approaches are just too unbearable. JavaScript introduces superb user experience with AJAX and developers can now update an element on a page without post back!<br />
<br />
Although JavaScript solves most of the developer's head ache, it introduces its own issues. Foremost of these are security flaws of which we have the 3 giants: XSS, CSRF and SQL Injection.<br />
<br />
I remember implementing a solution for a leading financial company in Nigeria, and though I insisted on stringent security measures for the Web API, the guy in charge maintained that there was no need for it, and the project went ahead without it. Yes! there are lots of systems trusted by the public that are in use without adequate security. I'm afraid these are time bombs waiting to explode. The effect of not adequately securing a system can be very disastrous, ranging from Identity Theft, to denial of service and other issues. No matter how minute, you do not want your organisation to suffer any of it.<br />
<br />
<b>Securing Your Web-API Using Tokens</b><br />
I'm assuming here that you have good knowledge of your database, server side language like PhP, C# or Python and JavaScript. In later posts, I will break down the steps and provide sample codes, this post only outlines the solution (note that no solution is 100% bullet proof, the best guard against hacking is being security conscious, keeping up to date with trends and fixing loop holes immediately). The steps are outlined below:<br />
<br />
<ol style="text-align: left;">
<li>After users are authenticated with their usernames and passwords, an encrypted token (named UserToken) is generated with expiry date/time set and returned to the client in the response header. This UserToken is unique and saved in the database along with the expiry date for the UserToken and the UserId of the user for which its meant. UserToken validity normally should not be less than 5 minutes, and not more than one hour</li>
<li>Thereafter, for every request initiated from the client, the client must include this UserToken in the request header</li>
<li>The server will first confirm that:
<ul>
<li>The UserToken is valid and active (i:e not yet expired)</li>
<li>The UserToken belongs to the user that initiated the request</li>
</ul>
</li>
<li>If these conditions are met, the UserToken validity is extended and request is processed</li>
<li>It any of the conditions isn’t met, the server returns 401 error</li>
</ol>
<br />
<u>Other Considerations</u> <br />
<ol style="text-align: left;">
<li>If you do not wish to allow multiple login by the same user concurrently on different devices, in order to increase security, we may have to expire a UserToken once the user logs into another device.</li>
<li>You may also decide to tie the userAgent to the UserToken, to ensure that only the browser that was authenticated can generate subsequent requests.</li>
</ol>
<br /></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-1752639870548214622016-01-21T08:43:00.000-08:002016-01-21T08:43:40.501-08:00Logo Design for Fashion Bags Store<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFlHKyq6hpCBdu3Pfz0IYk_Izd7RsAf1cA37n9u7dtqn8XzzGD3cBrk1VZNVYptnClMVMRGUZafjR08JE8ggGqJ2PnmUkAcpmJ9GVou4IbZLLywYT75I5GfnSPqS2olJmGWDp7TVjlg/s1600/mwob_exhibition.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFlHKyq6hpCBdu3Pfz0IYk_Izd7RsAf1cA37n9u7dtqn8XzzGD3cBrk1VZNVYptnClMVMRGUZafjR08JE8ggGqJ2PnmUkAcpmJ9GVou4IbZLLywYT75I5GfnSPqS2olJmGWDp7TVjlg/s640/mwob_exhibition.png" width="640" /></a></div>
<br />
MWoB is a fashion bags store in Nigeria. This logo concept was created using deep Turquoise as the primary colour. </div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-45186531151316066832016-01-21T08:29:00.001-08:002016-01-21T08:47:10.025-08:00Making Website Images Blend-in Naturally<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZaCOGflsUm5UKYD4aU5WtaTTheJPMGQpegNPUTtNk9RaSLtK2UJ1xD3ZntIjs3irc4om0gDrPJ5mNaT5dvXYKzZFZVEzGLcT9UeUskF40IkBfrQ9muBGbyzQgwH0pc98z-FWTp9bpQ/s1600/blend.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZaCOGflsUm5UKYD4aU5WtaTTheJPMGQpegNPUTtNk9RaSLtK2UJ1xD3ZntIjs3irc4om0gDrPJ5mNaT5dvXYKzZFZVEzGLcT9UeUskF40IkBfrQ9muBGbyzQgwH0pc98z-FWTp9bpQ/s640/blend.jpg" width="640" /></a></div>
Okay, maybe like me, you have experienced this frustration at one time or the other: A perfectly designed website with great layout still looking out of place. Trust me, the culprit most times are just website images that do not blend with the site's primary colours. Images used in our website design are usually sourced from several places and they come with different colour themes. Injecting these pictures directly into our design automatically creates confusion in the design. So how do we resolve this?<br />
<br />
<b>Solution</b><br />
In order to ensure that your images do not create confusion in the design, the images you use need to be readjusted to harmonize with the primary colour(s) of your design. There are several ways to achieve this, I'll illustrate one of the simplest approach in this post using Adobe Photoshop.<br />
<ol style="text-align: left;">
<li>Open the image in Photoshop</li>
<li>Navigate the menu: Image - Adjustments - <i>Photo Filter </i></li>
<li>In the Use area, select Color</li>
<li>Select your website's primary colour in the Color Dialog by clicking the currently active color</li>
<li>Adjust the Density while Preview is turned on to achieve desired filter density</li>
<li>Click Ok</li>
<li>Save a copy of the image to use on your website</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryZWT2LCzbEnCGXStYaUMsR6SK6IcsF3Tl5PT1GPMda-2Hekl8Nf0cDt20WRZM-thvFIIRydQgrnrDe1md_egV0jtWkbO3i8CVktQloOLVSW_yBq5kW0lUZBVfq6TYRpam55uGWrqXQ/s1600/Photo+Filter.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryZWT2LCzbEnCGXStYaUMsR6SK6IcsF3Tl5PT1GPMda-2Hekl8Nf0cDt20WRZM-thvFIIRydQgrnrDe1md_egV0jtWkbO3i8CVktQloOLVSW_yBq5kW0lUZBVfq6TYRpam55uGWrqXQ/s320/Photo+Filter.PNG" width="320" /></a></div>
<br />
<br />
<br />
<br />
You will observe that if you stick to this ritual for all images used on your website, the website will immediately have an appealing overall outlook. Its a simple process, but has great impact!<br />
<br />
You may take a look at <a href="http://www.kadunapolytechnic.edu.ng/new/" target="_blank">this website</a> where I implemented the technique. <br />
<br />
<br />
<br />
<br /></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-50522056690679366862015-11-20T04:17:00.000-08:002015-11-20T04:17:49.671-08:00Null Response Headers<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtLoOowS9vNvj1jQrLtCe1Prbgi8B47-DinPeRzlzmrte-T4zfzH2KqF6LPcVWdZeOjpgwkQogzGF3_50nQ-KQb7uPoVFvHsXym3cnYQiGN2_q2811FHx7-WVOVfl7RnOdKu8inoIEA/s1600/header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtLoOowS9vNvj1jQrLtCe1Prbgi8B47-DinPeRzlzmrte-T4zfzH2KqF6LPcVWdZeOjpgwkQogzGF3_50nQ-KQb7uPoVFvHsXym3cnYQiGN2_q2811FHx7-WVOVfl7RnOdKu8inoIEA/s1600/header.jpg" /></a></div>
<br />
<b>Background</b><br />
HTTP Request and Response Header are very cool components of the web. They allow for transmission of some intricate information concerning how the a particular request should be handled. Sometimes however, developers "abuse" the system and hijack this feature for transmitting small amounts of data to and from the webserver. I am one of these system abusers, lol. It just happens that sometimes, our software solutions give us little choice than to do some awkward things. Before you start castigating yourself, its not really a bad practice, so far you only send little amount of text data.<br />
<br />
<b>Issue</b><br />
Most of my web apps now run on Javascript front-ends, and this comes with its own challenges. I developed a software that sends data to the server to generate a PDF file and the server responds with the filename of the file generated for the client to download. As you could rightly guess, things worked quite perfectly until I migrated to production. The frontend now resided on a separate domain. Each time I queried for the content of my custom header using request.getResponseHeader in Javascript, I got null. See my code sample below:<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">$.ajax({type<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"POST"</span>, url<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'http://myappurl.com'</span>, headers<span style="color: #333333;">:</span> { <span style="background-color: #fff0f0;">"custom-header"</span><span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'my custom header'</span> },
data<span style="color: #333333;">:</span> JSON.stringify({}),
success<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span> (response, status, request) {
<span style="color: #008800; font-weight: bold;">var</span> filename <span style="color: #333333;">=</span> request.getResponseHeader(<span style="background-color: #fff0f0;">'filename'</span>);
alert(filename); <span style="color: #888888;">// I GOT NULL HERE</span>
}
}, error<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span> () {
alert(<span style="background-color: #fff0f0;">'an error occurred'</span>);
}
});
</pre>
</div>
<br />
<br />
<b>Solution</b><br />
It happens that although headers may be present, in cross domain situations, the headers are not made accessible to the client. Adding "Access-Control-Expose-Headers" to the web config resolves this in ASP.NET. "Access-Control-Expose-Headers" ensures that some specific headers are accessible by the client in cross domain situations. See sample below: <br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><system.webServer>
<httpProtocol>
<customHeaders>
<<span style="color: #008800; font-weight: bold;">add</span> name=<span style="background-color: #fff0f0;">"Access-Control-Allow-Origin"</span> <span style="color: #008800; font-weight: bold;">value</span>=<span style="background-color: #fff0f0;">"*"</span> />
<<span style="color: #008800; font-weight: bold;">add</span> name=<span style="background-color: #fff0f0;">"Access-Control-Allow-Headers"</span> <span style="color: #008800; font-weight: bold;">value</span>=<span style="background-color: #fff0f0;">"Origin, X-Requested-With, Content-Type, Cache-Control, filename, Accept"</span> />
<<span style="color: #008800; font-weight: bold;">add</span> name=<span style="background-color: #fff0f0;">"Access-Control-Expose-Headers"</span> <span style="color: #008800; font-weight: bold;">value</span>=<span style="background-color: #fff0f0;">"filename"</span> />
</customHeaders>
</httpProtocol>
...
<system.webServer>
</pre>
</div>
</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-40139483052025122012015-11-06T08:37:00.001-08:002015-11-06T08:43:03.181-08:00Consume ASP.NET Web API Using PHP and JQuery<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiON04V1mwCQnW6AJNPXNXdHv1StDnCIPkKstZkAOx4I2TayKwrHTeoyaCVD15M3J94iuagAy54yCez2QJYHg0wFW7ZlnOFMhXojdnhKXpMoBaqNU-wc8OmfknXYNQF6jZS9Y_1x84P9Q/s1600/php_jquery_consume_aspnet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiON04V1mwCQnW6AJNPXNXdHv1StDnCIPkKstZkAOx4I2TayKwrHTeoyaCVD15M3J94iuagAy54yCez2QJYHg0wFW7ZlnOFMhXojdnhKXpMoBaqNU-wc8OmfknXYNQF6jZS9Y_1x84P9Q/s640/php_jquery_consume_aspnet.jpg" width="640" /></a></div>
<br />
<br />
<br />
<b>Background</b><br />
Whether it is shortage of required skills, platform unavailability or even laziness, anything could make you want to cut some corners in development. And please get me right, by cutting corners I do not mean writing code that is cumbersome and difficult to maintain or leaving out important possible outcomes to favour low turnaround times. There's this popular quote that drives this best practice home: <br />
<i>Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.</i><br />
<br />
<b>Issue</b><br />
We had this project I was working on with a team. Its kind of like a payment aggregator, functioning in similar manner as your regular payment gateways like Paypal, UPL, Interswitch. You can find the project here (<a href="http://a1pay.net/">a1pay.net</a>). I was the front-end guy, which meant that I was basically responsible for presentation. However, in a twist of events, I was also saddled with handling the POST request from our 3rd party payment gateways, consume an already prepared ASP.NET Web API to update the transaction, and display the transaction status to the user.<br />
<br />
This shouldn't be a problem normally, but as the frontend guy, I had restricted my set of tools to Javascript/HTML/CSS, and this was because I didn't want the application to be platform dependent. How was I to achieve this without any server side code?<br />
<br />
<b>Solution</b><br />
It was just impossible to handle POST requests using Javascript, because Javascript runs at the client-side, but POST requests are received at the server end. I had to improvise a little with PHP. My choice of PHP is basically because it allows me to write a single file and place it on the server without bothering about compilation issues.<br />
<br />
I basically used PHP to compose my JQuery ajax request. This gets interpreted and executed as the page gets to the client. The JQuery ajax updates the transaction by consuming the ASP.NET Web API and redirects to the transaction status page. The code sample below basically works for anyone who wishes to integrate with Interswitch. In a subsequent post, I will be explaining the drawbacks of this technique and why you should approach its usage with caution. Cheers.<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007700;"><html></span>
<span style="color: #007700;"><head></span>
<span style="color: #007700;"><script </span><span style="color: #0000cc;">type=</span><span style="background-color: #fff0f0;">"text/javascript"</span><span style="color: #007700;">></span>
txnref <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'txnref'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
resp <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'resp'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
desc <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'desc'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
payRef <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'payRef'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
retRef <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'retRef'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
cardNum <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'cardNum'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
apprAmt <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'apprAmt'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
mac <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'mac'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
amount <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'</span><span style="color: #557799;"><?php</span> <span style="color: #008800; font-weight: bold;">echo</span> <span style="color: #996633;">$_POST</span>[<span style="background-color: #fff0f0;">'amount'</span>]; <span style="color: #557799;">?></span><span style="background-color: #fff0f0;">'</span>;
<span style="color: #008800; font-weight: bold;">var</span> URL <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">"https://mydomain.com/SaveResponse"</span>;
<span style="color: #008800; font-weight: bold;">var</span> ds <span style="color: #333333;">=</span> {
<span style="background-color: #fff0f0;">"ID"</span><span style="color: #333333;">:</span> <span style="color: #0000dd; font-weight: bold;">1</span>, <span style="background-color: #fff0f0;">"txnref"</span><span style="color: #333333;">:</span> txnref, <span style="background-color: #fff0f0;">"resp"</span><span style="color: #333333;">:</span> resp, <span style="background-color: #fff0f0;">"desc"</span><span style="color: #333333;">:</span> desc, <span style="background-color: #fff0f0;">"payRef"</span><span style="color: #333333;">:</span> payRef, <span style="background-color: #fff0f0;">"retRef"</span><span style="color: #333333;">:</span> retRef, <span style="background-color: #fff0f0;">"cardNum"</span><span style="color: #333333;">:</span> cardNum
}
$.ajax({ url<span style="color: #333333;">:</span> URL, type<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"POST"</span>, dataType<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"json"</span>, data<span style="color: #333333;">:</span> JSON.stringify(ds),
success<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span>(data){
<span style="color: #888888;">//do something here e.g: window.location.href = "status.html";</span>
},
error<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span>(x, y, z){
<span style="color: #888888;">//do something here e.g: window.location.href = "error.html";</span>
}
});
<span style="color: #007700;"></script></span>
<span style="color: #007700;"></head></span>
<span style="color: #007700;"><body></body></span>
<span style="color: #007700;"></html></span>
</pre>
</div>
</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-2437368182181856432015-08-19T09:38:00.001-07:002015-08-19T09:42:52.471-07:00ASP.NET Postback Problems<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAwLmLEedZuoe3xLilcck4iyXS2hKIr3K24nMj2M1X4tTAoKUpxO8Lnnsan6twQLQwP0jHLzieKH0PIBGsIGsc7PDNBJrv9FqiR40S9umqeUNd4AhWi3M0ivrHbrCs5c-aj9pGyBaSyg/s1600/Postback+problems.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAwLmLEedZuoe3xLilcck4iyXS2hKIr3K24nMj2M1X4tTAoKUpxO8Lnnsan6twQLQwP0jHLzieKH0PIBGsIGsc7PDNBJrv9FqiR40S9umqeUNd4AhWi3M0ivrHbrCs5c-aj9pGyBaSyg/s320/Postback+problems.jpg" width="320" /></a></div>
<br />
<br />
<b>Background</b><br />
First, I hope everyone knows that the form element in HTML is not a presentation tag but a functionality tag. I had to spell that out just so we are all clear. I've found that many web developers, me inclusive, often find ourselves entangled in usage of multiple redundant form elements on a page. Rather than clean out this clog, we simply leave it because "<i>it after-all causes no one harm</i>". I was soon to to learn otherwise ...<br />
<br />
I was redesigning the interface for a legacy ASP.NET 3.5 webforms application (<i>only
God knows how we survived the ages when this technology was the
de-facto. I so much hate the tight coupling between then presentation
and logic layers</i>). In order to jump-start the work, I quickly pasted
the HTML from a previous project into the master page and updated the
CSS and JavaScript references, then I copied the form tag including all
the Content Placeholders from the old master page into the content area.
After this, I noticed I now had two form tags, but since only one had
the runat="server" attribute, I simply left it "<i>it after-all causes no one harm</i>".<br />
<br />
<b>Issue</b><br />
I had gone far in my work before I observed that my forms were not posting back. It initially started with a Dropdownlist that would not Auto-Postback no matter how <i>well </i>I set the autopostback property. I was in a fix! What was the problem? What had I done wrong?<br />
<br />
<b>Solution</b><br />
As pointed out earlier, I traced the problem to the presence of two form tags on the same HTML page. I removed the one without runat="server" and the application was up and running again. Now I've learnt that the presence of redundant form tags could cause harm.</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-79061410546284650092015-08-05T02:26:00.000-07:002015-08-07T03:01:51.347-07:00Exception from HRESULT: 0x80131040<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbjTWuJE5FKLRAaocsx-1Ma0rSeKlDuKoQQEF-OrS5J1aobVrL-QCF6BP2rCQOpH4vGIK1XCudFb9JSQLb8EjH2DLaZdlYmrV5c0mziXmoG0LiUdb77Mo-WV86e7l1nsL1jAUnCW09g/s1600/error.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbjTWuJE5FKLRAaocsx-1Ma0rSeKlDuKoQQEF-OrS5J1aobVrL-QCF6BP2rCQOpH4vGIK1XCudFb9JSQLb8EjH2DLaZdlYmrV5c0mziXmoG0LiUdb77Mo-WV86e7l1nsL1jAUnCW09g/s320/error.jpg" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b>Background:</b><br />
I just recently upgraded to Windows 10, and I must confess, the overall experience immediately got me. I love the fact that our good old start menu was back and better. The tile one was much of a controversy although I have been indifferent about it all the while. I particularly love Cortana, the search assistant who made me remember the office assistants that used to come with the office suite back then. The euphoria I experience was a perfect disguise, however, for the ambush that was ahead.<br />
<br />
<br />
<b>Issue:</b><br />
I went ahead to open VisualStudio and launched the project I was currently working on. I pressed F5 to launch it, only to ram into a jam! The project I still successfully tested only a day before now threw an exception. From my experience, and this situation hasn't proved me wrong, every Microsoft upgrade always has a catch somewhere. This particular one forced me to begin to rectify a fault in an application that was initially 'bug-free' before my upgrade. The error message looked like this:<br />
<h1>
<span style="font-size: large;"><span style="color: red;"><span style="font-family: "Trebuchet MS",sans-serif;">Server Error in '/' Application</span></span></span><span style="font-size: small;"><span style="color: #990000;"><b><span style="font-weight: normal;"><span style="font-family: "Trebuchet MS",sans-serif;"><i> <br />Could not load file or assembly 'bts_school (1)' or one of its dependencies. The located<b> </b>assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)</i></span></span></b></span></span> </h1>
<br />
<b>Solution:</b><br />
Well after lots of research and trials I simply resolved the issue by deleting the application's DLL file from the bin folder. I particularly noticed that for whatever reason, the system created a copy, hence the bts_school (1) seen above in the error message. I deleted the main DLL and the copies including the PDB files, then I rebuilt the solution. It worked after that.<br />
<br />
I've since been wondering how a simple upgrade to Windows 10 went ahead to confuse VisualStudio, but I'm indeed glad to have my application up and running again!</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-26424075812511171202015-06-24T11:54:00.000-07:002015-06-24T11:59:17.382-07:00Collapsible Widgets<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXgt7LyyskTYcoKBeEQU_FnAn5kAUimwsqneqCrM9y_AMteHful0IuJD6Am-yD5f8KSj-VgI46E1LMdyrmlMFWgCMg_RILhflPdflBfX_j-Zn9dNePCpJ3sHVodLZhvfvPJ_fZ6_rg-w/s1600/collapsible.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXgt7LyyskTYcoKBeEQU_FnAn5kAUimwsqneqCrM9y_AMteHful0IuJD6Am-yD5f8KSj-VgI46E1LMdyrmlMFWgCMg_RILhflPdflBfX_j-Zn9dNePCpJ3sHVodLZhvfvPJ_fZ6_rg-w/s320/collapsible.jpg" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<b>Small Feature, Excellent Idea</b> <br />
Collapsible Widgets are a simple feature that can easily make a site or application exciting. It could just be the simple thing that adds that wow effect to your project. You can hardly find any of my work where this isn't implemented. All these projects;<a href="http://asset.bz/" target="_blank"> asset.bz</a>, <a href="http://a1school.net/" target="_blank">a1school.net</a>, <a href="http://buysellairtime.com/" target="_blank">buysellairtime.com</a> and many others proudly fly the banners of this wonderful feature. Collapsible widgets also provide an avenue for front-end flexibility and space management<br />
<br />
<b>Implementation</b> <br />
I won't bore you with any more rants, lets get down to how you can get this implemented. First you add two html elements, an header and a div like we have below<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghsngcCH6DCpL-_Rm1qY-gXBfG3T4p-gENsqXO-hKWf0pKyaWDd-Lf70OA-1kt6oueTiDqt1qXk3mQqbXtLGSh-wCQCXgSY0UPsc0UBB4WrLN9JdoSuj8wFbH88lMh1XhytIAEBpwvAksC/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <div class="panel">
<header class="panel-heading">
Widget Header Text
</header>
<div class="panel-body">
</div>
</div>
</code></pre>
<br />
In order to make things a little more exciting, you may also want to include the following in your CSS:<br />
<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghsngcCH6DCpL-_Rm1qY-gXBfG3T4p-gENsqXO-hKWf0pKyaWDd-Lf70OA-1kt6oueTiDqt1qXk3mQqbXtLGSh-wCQCXgSY0UPsc0UBB4WrLN9JdoSuj8wFbH88lMh1XhytIAEBpwvAksC/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> .panel-heading{
background-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, 0.2);
border-bottom-style: dotted;
border-bottom-width: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-sizing: border-box;
color: rgb(66, 79, 99);
cursor: pointer;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
height: 51px;
line-height: 20px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
text-transform: uppercase;
}
.panel-body{
box-sizing: border-box;
color: rgb(122, 118, 118);
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 316px;
line-height: 20px;
padding-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
padding-top: 15px;
}
.panel{
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px 0px;
box-sizing: border-box;
color: rgb(122, 118, 118);
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 367px;
line-height: 20px;
margin-bottom: 20px;
}
</code></pre>
<br />
So far so good. Now JQuery will be cake icing. Before you include the code below, be sure you have a reference to <a href="https://code.jquery.com/" target="_blank">JQuery</a> in your project. In your document ready block, add the following code:<br />
<br />
<br />
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghsngcCH6DCpL-_Rm1qY-gXBfG3T4p-gENsqXO-hKWf0pKyaWDd-Lf70OA-1kt6oueTiDqt1qXk3mQqbXtLGSh-wCQCXgSY0UPsc0UBB4WrLN9JdoSuj8wFbH88lMh1XhytIAEBpwvAksC/s320/codebg.gif); background: #f0f0f0; border: 1px dashed #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> $('header.panel-heading').each(function () {
$(this).click(function () {
if ($(this).hasClass('up')) {
$(this).next('.panel-body').slideDown();
$(this).removeClass('up');
}
else {
$(this).next('.panel-body').slideUp();
$(this).addClass('up');
}
});
});
</code></pre>
<br />
And that will be all. Test your page now, and be sure everything works fine. If you encounter any challenges, please drop your comments below, I will try my best to help you fix it.<br />
<br />
Cheers!</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-1469280180688000022015-06-18T07:30:00.000-07:002015-06-18T08:11:25.356-07:00Get Creative With Data Tables: Row Click Events<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxzsAEOBI9r4AfDvHoe-IdTv5d5z1tIKCBO1p6QfMasXszt8EK-U1IZo8VqW05l4juCQya-GHbTwdcImNIdAItgXOkgbTzPJDOFodvTZ1tl6XpoN_BTaMIco3Ea1SBXYU_hRWaI7Grg/s1600/row_click_events.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxzsAEOBI9r4AfDvHoe-IdTv5d5z1tIKCBO1p6QfMasXszt8EK-U1IZo8VqW05l4juCQya-GHbTwdcImNIdAItgXOkgbTzPJDOFodvTZ1tl6XpoN_BTaMIco3Ea1SBXYU_hRWaI7Grg/s1600/row_click_events.jpg" /></a></div>
<br />
<br />
<br />
<br />
<br />
<b>Introduction</b><br />
Datatables from <a href="http://datatables.net/" target="_blank">datatables.net</a> are so lovely, especially with the responsive extension that you can enable by including <a href="https://datatables.net/extensions/responsive/" target="_blank">dataTables.responsive.js</a> in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'.<br />
<br />
<b>Issue</b><br />
Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at <a href="http://asset.bz/" target="_blank">asset.bz</a> to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc.<br />
<br />
<b>Solution</b><br />
Apparently, the solution isn't far fetched. The sample code below would do the job nicely:<br />
<pre style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghsngcCH6DCpL-_Rm1qY-gXBfG3T4p-gENsqXO-hKWf0pKyaWDd-Lf70OA-1kt6oueTiDqt1qXk3mQqbXtLGSh-wCQCXgSY0UPsc0UBB4WrLN9JdoSuj8wFbH88lMh1XhytIAEBpwvAksC/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> // HTMLTableData is your array of records to be displayed in the data table
var HTMLTableData = [];
//our objective in the for-loop below is to include another property (DT_RowId)
//the datatables plugin will use this property as the 'id' property for each of our rows
for (var i = 0; i < HTMLTableData.length; i++) {
HTMLTableData[i].DT_RowId = HTMLTableData[i].Id;
}
var HTMLTableName = "my-table-id";
var cols = []; // in order to understand the usage of 'cols' please read this other post
DataTableObject = $('#' + HTMLTableName).DataTable({
data: HTMLTableData, columns: cols
});
$('#' + HTMLTableName + ' tbody').on('click', 'td', function () {
var tr = $(this).parents('tr');
var row = DataTableObject.row(tr);
DataTable_Record_Id = tr[0].id;
RowClickMethod(tr[0].id); //call the function you wish to trigger here.
});
var RowClickMethod = function(id){
//do some stuff
}
</code></pre></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-46371337935346184832015-06-16T11:32:00.000-07:002015-06-18T08:06:56.607-07:00Asset.bz Asset / Inventory Management Project<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VQbAeUNruVvMzbRAsbV8UawlCVN46t_V8fauud7CwRZrh9GoNIIpf9n8hSehcvlkpQMsMZDVVINZdF21KPwViGpiqYRmaJp2bZEc6Wojzp_5z5T507DUSD5DLSubiTLkDCrPpGIGSg/s1600/assetbz.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VQbAeUNruVvMzbRAsbV8UawlCVN46t_V8fauud7CwRZrh9GoNIIpf9n8hSehcvlkpQMsMZDVVINZdF21KPwViGpiqYRmaJp2bZEc6Wojzp_5z5T507DUSD5DLSubiTLkDCrPpGIGSg/s1600/assetbz.jpg" /></a></div>
<br />
<br />
I have found out through my own experiences and that of others, how difficult it is to get ‘sincere’ applause at the end of demo of any beta version software. Yes, you would always get some form of applause, but rarely the ‘sincere’ ones. <br />
<br />
Software demo for new products in my organization usually has in attendance several employees from different units and departments. Many attend on the basis of obligation while others are just too busy in their heads to give the session the attention it would require in order to appreciate the product being presented.<br />
<br />
I had to send out reminders to get invitees to leave their seats for the demo of a new product my team just developed. It’s a team of 2, and while I worked at the Front-end with design, branding and development along with the accompanying Mobile App, my partner was in charge of the web services and SQL Server database development. We would be anchoring the demo together, and I was to start the session.<br />
<br />
We were to receive an applause that resounded across the presentation room at the end of our demonstration. This ‘sincere’ applause along with an instinct made me know at once that there was something special about this new product. All attendees were excited at the possibilities introduced by the solution into conventional asset / inventory management. <br />
<br />
Found at <a href="http://asset.bz/" target="_blank">asset.bz</a> is an Inventory Management solution that has just been transferred to pilot phase. I was intensely challenged by this application during development. In my subsequent post, I will share the several challenges that we encountered and surmounted and also the unique features of this solution.<br />
<br />
Here is me signing off the beta version to the testers and going back to bury myself into the next iteration of the solution… </div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-19118719639531619732015-03-04T07:14:00.000-08:002015-03-04T09:14:36.498-08:00Halleluya by Daniel<div dir="ltr" style="text-align: left;" trbidi="on">
<audio autoplay="" controls="" crossorigin="anonymous">
<source src="http://184.107.228.154/PictureHost/Emmanuel/We_confess.mp3" type="audio/mp3"></source>
If you cannot see the audio controls, your browser does not support the audio element
</audio>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Song:</b></div>
<div class="separator" style="clear: both; text-align: center;">
Halleluyah</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Composer:</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/fadipe.daniel?fref=ts" target="_blank">Daniel Fadipe</a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Drums:</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/nelson.okonji.5?fref=ts" target="_blank">Chukwuka Okonji</a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Producer: </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/emmanuel.fadipe" target="_blank">Emmanuel Fadipe</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
I hope you enjoy this song and get blessed in the process. </div>
<div class="separator" style="clear: both; text-align: center;">
Production by me with help from Victory Chapel Choir</div>
</div>
</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-32219734296691633902015-03-04T05:42:00.000-08:002015-03-04T05:48:51.614-08:00Add Custom Controls To DataTable Rows<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8IsnTT6H6tymNsg_OLPAZpfwJsdfr3CRfBWbqXwMsWf_hItR3nmkOuAvEy31i0HvgVy3cKzomUA5evppWZxTAWI4zyUPaeYa_F9JIuSOdGJpV7sjUD4g8jAqov-x8TmSs3hsABGJuw/s1600/datatable_controls.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8IsnTT6H6tymNsg_OLPAZpfwJsdfr3CRfBWbqXwMsWf_hItR3nmkOuAvEy31i0HvgVy3cKzomUA5evppWZxTAWI4zyUPaeYa_F9JIuSOdGJpV7sjUD4g8jAqov-x8TmSs3hsABGJuw/s1600/datatable_controls.jpg" height="116" width="320" /></a></div>
<br />
<br />
<b>Background:</b><br />
<a href="http://www.datatables.net/" target="_blank">datatables.js</a> is a very awesome tool that enables data to be presented in tabular format (ASP.Net developers prefer to call this grid). Its currently the best free data-to-table tool available (my personal opinion). Since I ran into it, I immediately got stuck and cannot but use it in each of my projects.<br />
<br />
<b>Issue:</b><br />
There are several issues with datatables.js. Many of them however stem from knowledge gap, because the tool is quite robust, it would take a long time to exhaust the documentation and fully learn the plugin. In my own case, I wanted to add custom controls to each datatable row. These three controls would be for ordering the row and editing the record.<br />
<br />
<b>Solution:</b><br />
We would need images to use as these controls. I normally get images online sometimes. Although, I find it easier to create simple icons using CorelDraw. After fetching your data, simply loop through each item to add the html tag for your control image to the element. Finally, render the datatable using the control element as the last element to the right (or as desired).<br />
<br />
<b>Instance:</b><br />
<i>First loop through your data to add the controls:</i> <br />
<u>for (var i = 0; i < </u><u>ParentMenus.length; i++) {</u><br />
<u> var CurrentID = </u><u>ParentMenus[i].Id;</u><u> </u><br />
<u>ParentMenus[i].Delete = "<img src='images/close.png' ref='" + CurrentID + "'/>";</u><u> </u><br />
<u>ParentMenus[i].MoveUp = "<img src='images/up.png' ref='" + CurrentID + "'/>";</u><u> </u><br />
<u>ParentMenus[i].MoveDown = "<img src='images/down.png' ref='" + CurrentID + "' />";</u><u> ParentMenus[i].Controls = </u><u>ParentMenus[i].MoveDown + </u><u>ParentMenus[i].MoveUp + </u><u>ParentMenus[i].Delete;</u><br />
<u>}</u><br />
<br />
<i>Then initialize your datatable using .Controls member above as the controls column</i><br />
<u> Moduletable = $('#tblModules').DataTable({<br /> "ordering": false,<br /> dom: 'T<"clear">lfrtip', data: ParentMenus,<br /> columns: [{ </u><br />
<u> "class": 'details-control', "orderable": false, "data": null, "defaultContent": ''<br /> }, </u><br />
<u> { "data": "PageName" }, { "data": "PageDescription" }, { "data": "Controls" } ]<br /> });</u><br />
<br />
See a sample of what the code above generated in the picture at the top of this post. <u>{"data" : "Controls"}</u> above is responsible for including my images as part of the rendered data table.<br />
Happy gridding!</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-31598563503691245052015-03-04T05:00:00.000-08:002015-08-05T02:35:57.772-07:00Specify Name for Uploaded File At Upload Time Using DropZone.js<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cT-WQwt_7BXc_7BWlqY9Ue2DDvyreNpoVyhC9LnxjSXEDHICtiuf7A15C_S_c7HH_-X0xy0MJl7WbahDNWoL-X4jQHHJ6OlFepAXR-8gl9v7NT79ivB9Tu_Qjli4cJkIQNNIkcIZxw/s1600/dropzone.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cT-WQwt_7BXc_7BWlqY9Ue2DDvyreNpoVyhC9LnxjSXEDHICtiuf7A15C_S_c7HH_-X0xy0MJl7WbahDNWoL-X4jQHHJ6OlFepAXR-8gl9v7NT79ivB9Tu_Qjli4cJkIQNNIkcIZxw/s1600/dropzone.jpg" width="320" /></a></div>
<br />
<b><br /></b>
<b>Background:</b><br />
After <a href="http://sigladeveloper.blogspot.com/2015/03/post-data-to-aspnet-page-from-php-or.html" target="_blank">surmounting my last challenge with dropzone.js</a> and was able to upload my files. I was immediately faced with another one. The <a href="http://www.dropzonejs.com/" target="_blank">dropzone.js</a> implementation apparently doesn't include any method for computing a value to send to the server while the file is being uploaded. What this means is that any headers or form data used to initialize the dropzone will be used repeatedly each time a file is uploaded.<br />
<br />
<b>Issue:</b><br />
This meant that, for instance if I didn't want to upload a file using its name from the client, I may not be able to specify another name for the file as it is being uploaded. And that was exactly what I was faced with. Each time I created another record and uploaded a corresponding file with the dropzone, the file would overwrite my previous files, because I was apparently sending the same custom filename to the server to save my files with. My dropzone initialization code looked like this<br />
<u>var mydropzone = $(targetelement).dropzone({<br /> url: 'uploading_page.aspx', headers: { "folderpath": folderPathOnServer },</u><br />
<u> sending: function (file, xhr, formData) {<br /> filenameOnServer = $.session.get('userid') + '_' + (new Date()).getTime();<br /> formData.append("MyRealName", filenameOnServer);<br /> }, success: function (file, response) {</u><br />
<u> $(targetelement).attr("src", PictureRoot + folderRightPart + filenameOnServer;</u><br />
<u> }</u><br />
<u> });</u><br />
<br />
Take note of the variable <u>filenameOnServer</u>. My intent was to notify the server of the new filename each time I uploaded a file with this variable. The fact that I appended <u>(new Date()).getTime()</u> already gives away my expectation that this should be a unique value each time the upload was done using the drag-drop. Unfortunately, dropzone.js doesn't work that way. The plugin computes the <u>filenameOnServer </u>at initialization and uses the same value throughout every upload.<br />
<br />
I didnt want to tweak the plugin, so after reading through the entire documentation and ransacking the web with google's help to no avail, I had to implement a workaround, which is actually a simple one.<br />
<br />
<b>Solution:</b><br />
The unique file name should be generated on the server. And made available to the client in the Response. With PHP, use <u>echo json_encode($result)</u>, and in ASP.Net C# use <u>Response.Write("result");</u><br />
<br />
Notice that the success method in your dropzone initialization has two parameters; file and response. The response parameter will contain the response provided by the server <i>(in my own case, it was the filename computed at the server)</i> which you can work with.<br />
<br />
Simple right?</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-76600325255603477852015-03-04T04:00:00.000-08:002015-03-04T05:16:56.038-08:00Post Data to ASP.NET Page From PHP or Javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oCpdyLxA1_F9S7KsowRJPmOHREehKjxQtP7T5mRQy_kM19dBnLVIhD8Cl4tN2vCqgkWU2fBpzHy7Q-Kzrq_LdsXldHK3Hg5d8aInmUGkwhde-r3_6S73r_CKe_g3GWYdVANa3Mu8gQ/s1600/postasp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oCpdyLxA1_F9S7KsowRJPmOHREehKjxQtP7T5mRQy_kM19dBnLVIhD8Cl4tN2vCqgkWU2fBpzHy7Q-Kzrq_LdsXldHK3Hg5d8aInmUGkwhde-r3_6S73r_CKe_g3GWYdVANa3Mu8gQ/s1600/postasp.jpg" height="116" width="320" /></a></div>
<br />
<br />
<b>Background:</b><br />
For most PHP developers, the technique of posting data from one page to a different page is not a difficult thing. In fact, in PHP development, this technique is learnt by beginners. In ASP.Net however, it doesn't work the same way. The ASP.Net platform is designed to implicitly post data to itself and developers need not manually trap posted data themselves.<br />
<br />
<b>Issue:</b><br />
This simplistic development approach implemented by ASP.Net poses a problem where one needs to for one reason or the other, post to the ASP.Net page from another ASP.Net page, a PHP page, from JavaScript or even Python, ruby, and any other server side platform you can imagine. In my own case, I was using <a href="http://www.dropzonejs.com/" target="_blank">dropzone.js</a> to implement drag-and-drop file upload for an application. I would have to post to a server side platform using JavaScript. For some reasons, I didn't want to use PHP, even though PHP would work seamlessly. The platform available for me was ASP.Net, but remember; ASP.Net doesn't allow unsolicited posting of data to its pages! <i>or so I thought</i>.<br />
<br />
<b>Solution:</b><br />
ASP.Net actually allows posting of data like PHP does, and one could actually develop with ASP.Net as if it were PHP using <u><form action="somepage.aspx" runat="server" method="POST"></u>. I have the VisualStudio environment too thank for this breakthrough. After searching the web for a full day without much progress, I resorted to trial and error. The VisualStudio IDE gives lots of explanations for programming elements through its powerful intellisense. The Page.Request property exposes lots of useful members with which you may interact with the current request to your page.<br />
<br />
<b>Instances:</b><br />
In order to access request headers use: <u>Request.Headers["header_name"]</u><br />
In order to access files posted use: <u>Request.Files</u><br />
In order to access form data use: <u>Request.Form.Get("data_name")</u><br />
You may also return data to the calling platform using<u> Response.Write("some data")</u><br />
<br />
What a breakthrough!</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-47210632801448041552015-01-28T02:46:00.000-08:002015-08-05T02:36:25.899-07:00Retrieve Source Code from Compiled .NET Program<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheuslP1XHX8obBswDBCRAtU4KiIxZMJ4VHa5w0jlWBuSTv6O-a-DwrX8j-rWg82NWrLTHZotDPfQxu5BDRHsNBBMOHsDqyMBnh8lEraJWbHAghOuDYGCgnwON2hMkfbZ5TTP1PmQayag/s1600/mclellan-phone-exploded.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheuslP1XHX8obBswDBCRAtU4KiIxZMJ4VHa5w0jlWBuSTv6O-a-DwrX8j-rWg82NWrLTHZotDPfQxu5BDRHsNBBMOHsDqyMBnh8lEraJWbHAghOuDYGCgnwON2hMkfbZ5TTP1PmQayag/s1600/mclellan-phone-exploded.jpg" width="320" /></a></div>
<br />
<br />
<span style="color: red;"><b>Background</b></span><br />
I found myself in this mess. I wrote a lovely windows service to handle data replication between two SQL Servers. I know this isn't the best way to go about it, but the requirement came in late into the project and the database design wasn't going to support automatic replication provided by SQL Server, so I had to develop this windows service. Unfortunately, I lost the source code and backup in a robbery incident and I'm left with just the compiled version deployed with a client.<br />
<br />
<span style="color: red;"><b>Issue</b></span><br />
A bug showed up which needed to be fixed, but I didn't have the source anymore. I would have had to go through the stress of re-writing the entire code which took about a month to complete initially if I didn't run into this solution. I'm feeling great right now!<br />
<br />
<span style="color: red;"><b>Solution</b></span><br />
It happens that there are a couple of projects targeted at de-compiling .NET codes. I found two:<br />
<a href="http://www.red-gate.com/products/dotnet-development/reflector/" rel="nofollow" target="_blank">1 .NET Reflector </a><br />
2. <a href="http://www.telerik.com/products/decompiler.aspx" rel="nofollow" target="_blank">Just Decompile</a><br />
<br />
I tried the .NET reflector and it worked like magic!<br />
<br />
Give it a try too and let me hear your testimony. Cheers.</div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-37186564475431139192015-01-06T04:03:00.000-08:002015-08-05T02:36:42.209-07:00Enabling Write Access to A folder in IIS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDPmZzPY1PXK_CaLMcQ5V6kjH9UtHXcXKOPFFdhqf7-u1326sywzkfrlCCVarRcJCkt3EF3Jne9fVU3RtMI4oTZpOpZJTDzY7RhZXzP8H1MK9-yrnFUQ9Urgz62WoYahI8ONmbodMRw/s1600/iis.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDPmZzPY1PXK_CaLMcQ5V6kjH9UtHXcXKOPFFdhqf7-u1326sywzkfrlCCVarRcJCkt3EF3Jne9fVU3RtMI4oTZpOpZJTDzY7RhZXzP8H1MK9-yrnFUQ9Urgz62WoYahI8ONmbodMRw/s1600/iis.jpg" width="320" /></a></div>
<br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="color: red;"><b>Issue</b></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Sometimes in web development, we may want to grant <b>WRITE </b>access to a folder probably for file upload purposes or mostly in my own case, <b>PDF</b> file generation purposes. The challenge however, is that all folders are <b>read only</b> which means your application will always throw errors whenever you attempt a write operation.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="color: red;"><b>Solution</b></span></span><br />
<ol style="text-align: left;">
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Locate the folder in windows explorer</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Right click on the folder and select properties</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">In the securities tab, click edit, then click add in the new dialog box that shows up</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Type <b>IIS AppPool\ApplicationPoolName</b> (you need to replace ApplicationPoolName with the name of the application pool in IIS that your web app is running under)</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Click Check Names to resolve the name, then click Ok </span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Under permissions for ..., check Modify under allow. </span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Click Ok on all dialog boxes</span></li>
</ol>
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="color: red;"><b>Note</b></span></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Some people will grant Modify or Full Control right to <b>Everyone</b> for the folder, note that this posses a huge security risk and should never be your approach to resolving the issue</span></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-63128208999724897382014-11-12T06:28:00.001-08:002015-03-04T02:28:42.894-08:00Sweet Summernote<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnaxKbyzRX3xdBj2Iy9CydzxNxC2IfDDl-eF-qgWf-2ob8D3Kq5p6S-Dp9KG4Vcrxo2VV9l3iJqQsf7IFI2RY1exmPsaUiacMhL0U_aW26pEYRRh5TbPU8IQ0uKmakojblVcDTkfV1A/s1600/summernote.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnaxKbyzRX3xdBj2Iy9CydzxNxC2IfDDl-eF-qgWf-2ob8D3Kq5p6S-Dp9KG4Vcrxo2VV9l3iJqQsf7IFI2RY1exmPsaUiacMhL0U_aW26pEYRRh5TbPU8IQ0uKmakojblVcDTkfV1A/s1600/summernote.jpg" height="116" width="320" /></a></div>
<br />
<br />
<span style="color: red; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>Background</b></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If you ever wish to add WYSIWYG functionality to your web project, <a href="http://hackerwins.github.io/summernote/features.html" target="_blank">summernote.js</a> is probably your best bet! It will convert your textarea control to a fully functional WYSIWYG control with ability to gain access to the content of the control in HTML format.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="color: red; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>Implementation</b></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To change a simple textarea control to a WYSIWYG control,</span><br />
<span style="font-family: Courier New, Courier, monospace;"><b><span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">$(</span><span class="string" style="background-color: whitesmoke; box-sizing: border-box; color: #718c00; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">'#summernote'</span><span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">).summernote();</span></b></span><br />
<span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To fetch the HTML content of the control:</span><br />
<span style="font-family: Courier New, Courier, monospace;"><b><span class="keyword" style="background-color: whitesmoke; box-sizing: border-box; color: #8959a8; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">var</span><span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;"> sHTML = $(</span><span class="string" style="background-color: whitesmoke; box-sizing: border-box; color: #718c00; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">'.summernote'</span><span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;">).code();</span></b></span><br />
<span style="background-color: whitesmoke; color: #4d4d4c; font-size: 13px; line-height: 18.5714302062988px; white-space: pre-wrap;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Wishing you all the best as you try this out.</span></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-87716966471043332142014-11-06T05:58:00.001-08:002015-03-04T02:31:37.658-08:00Using AngularJs $index<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fg_HhwL75aQR3Oj5L8o680s8HmjtyTkZaUxyoSlCpCohPhOLkAYK8s70yHhmJqMdF6qDR1XbLtYPHr5LXdOfao0hqkzwZ_h0nqhgljx8aklz404R1Oh3NfLweOXv51LtQ2Hr6p-OSA/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fg_HhwL75aQR3Oj5L8o680s8HmjtyTkZaUxyoSlCpCohPhOLkAYK8s70yHhmJqMdF6qDR1XbLtYPHr5LXdOfao0hqkzwZ_h0nqhgljx8aklz404R1Oh3NfLweOXv51LtQ2Hr6p-OSA/s1600/index.jpg" height="116" width="320" /></a></div>
<br />
<br />
<span style="color: #38761d;"><b><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Background</span></b></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Today I had a set if divs I created using AngularJs ng-repeat. My challenge was that there was a button in each div that triggered a modal pop-up when clicked. The content of the modal was supposed to be updated from the corresponding element that generated the particular button that was clicked. Hmm...</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="color: #38761d;"><b><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Solution</span></b></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Taking advantage of the ng-click attribute and $index, I added this to the button element</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /><span style="font-family: "Courier New",Courier,monospace;">ng-click="SetSelected($index)"</span></span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">$index is a powerful reference that allows us to pass the index of the element that generated the current control to a function. That way, I was able to fetch the correct element from the original array of elements that generated the set of controls! </span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Isn't Angular sweet?</span></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-7714334443987703232014-10-22T04:26:00.000-07:002015-03-04T02:37:06.685-08:00Date Comparison: datejs Hang!<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q1zAMHbkjbdICemnQqp7VUcSLV_vdJ9vMnh-fYBjJpB73lfOpY_B77L5pXZRHBPqsZ82iH0y2IjHURU2-ExY_ds6Q6Vyce2kt570F2t8Kl6ydx6cKudcPE7Zl0imQsncXv8s5B270Q/s1600/date.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8q1zAMHbkjbdICemnQqp7VUcSLV_vdJ9vMnh-fYBjJpB73lfOpY_B77L5pXZRHBPqsZ82iH0y2IjHURU2-ExY_ds6Q6Vyce2kt570F2t8Kl6ydx6cKudcPE7Zl0imQsncXv8s5B270Q/s1600/date.jpg" height="116" width="320" /></a></div>
<br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><b>Background</b></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">I've always had issues working with diverse date formats using javascript till when recently I found this great resource at <a href="http://www.datejs.com/">www.datejs.com</a>. It was a welcome relief as it could parse almost all the date formats I wanted to parse. Today, however, I ran into a snag! The .isAfter() function stated in the datejs documentation wasn't just working for me. I kept getting error "method not found".</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><b>Solution</b></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">After lots of trial and research, I found out that the link posted on the datejs website most recent build is actually not the most recent build and several methods were not available in that. In case you have a similar issue, please download the most recent build from <a href="http://www.datejs.com/build/date.js">http://www.datejs.com/build/date.js</a> and get your headache alleviated totally! It worked for me.</span></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0tag:blogger.com,1999:blog-7638434255364972363.post-3468508342042190262014-10-21T05:10:00.001-07:002015-03-04T02:40:14.250-08:00Multiselect Magic<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw5WXUDvbx4mPxhNINIsH26cA5d7GqPi0Xgj4maQwJrf8C-c5eVXm2Xd6VdeaI8szQZTke2J4OjIGB_iggS2QIdEbBZv9_CW7bC-7U7CwYhEhaF1eCPylHYZhGlmXPqGTGXmvr-_idA/s1600/magic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw5WXUDvbx4mPxhNINIsH26cA5d7GqPi0Xgj4maQwJrf8C-c5eVXm2Xd6VdeaI8szQZTke2J4OjIGB_iggS2QIdEbBZv9_CW7bC-7U7CwYhEhaF1eCPylHYZhGlmXPqGTGXmvr-_idA/s1600/magic.jpg" height="116" width="320" /></a></div>
<br />
<br />
<b><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Background:</span></b><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">I had this clever multiselect control for listing items that the user could select many entries from at any given time. I even made it look cool by implementing the <a href="http://davidstutz.github.io/bootstrap-multiselect" target="_blank">Bootstrap Multiselect Plugin</a> by David Stutz. However, when it was time to fetch the values of selected elements, I thought of looping through the elements to pull their values into an array. This would be inefficient and consume a lot of overhead!</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<b><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Solution:</span></b><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Turns out simply calling the javascript val() function on a multiselect returns an array of all values selected! e.g</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="color: #38761d;"><span style="font-family: "Courier New",Courier,monospace;"><b>$('#selProgrammes').val()</b> </span></span>could return <span style="color: #999999;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #666666;"><b>["1", "2", "4", "6"]</b></span> </span></span>for example.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Isn't it cool!</span></div>
Emmanuelhttp://www.blogger.com/profile/07612012928643264718noreply@blogger.com0