Javascript - Remove URL Parameter with relevant value without redirecting / reloading

If you think you don't need to show the URL parameters all the time but need to keep then by the time the page is loaded, this is the better way.

 var strKey = "strName";  
   var flKeyFound = false;  
   var url = "";  
   var query = window.location.search.substring(1);  
   var vars = query.split('&');  
   for (var i = 0; i < vars.length; i++) {  
     var pair = vars[i].split('=');  
     if (decodeURIComponent(pair[0]) != strKey) {  
       url = url + decodeURIComponent(pair[0]) + "=" + decodeURIComponent(pair[1]) + "&";  
     }  
   }  
   url = window.location.href.split('?')[0] + "?" + url.substring(0, url.length - 1);  
      if (history.pushState) {      
       window.history.pushState({ path: url }, '', url);  
     }  

Paste this peace of JavaScript code will remove the parameter ("strName") and it's value from the query string once the page is loaded.

Make sure you execute this code after the page load is finished.

strName is the key here. Change it to any name as needed.

Read more about History API on JavaScript here.
Happy coding...

Calendar for Bootstrap 3 - Easy way

Straight to Calendar control in Bootstrap 3, You need to reference additional bootstrap calendar js file.

 <link href="scripts/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" />  
 <script src="scripts/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>  
 <script src="scripts/bootstrap-datepicker/locales/bootstrap-datepicker.fr.min.js"></script>  

For localization, the file "bootstrap-datepicker.fr.min.js" is added.

You can download these files from "https://github.com/eternicode/bootstrap-datepicker"

And lets add a textbox for the datepicker to bind with,

 <asp:TextBox ID="txtdtBorn" runat="server" CssClass="date-picker form-control txt-common-style" ClientIDMode="Static"></asp:TextBox>  

And then in the page js file, inside the document ready; add the following,

   $("#txtdtBorn").datepicker({  
     format: 'yyyy-mm-dd',  
     autoclose: true,  
     todayHighlight: true,  
     calendarWeeks: false,  
     clearBtn: false,  
     immediateUpdates: true,  
     keyboardNavigation: true,  
     language: 'fr'      
   });  

And the ultimate result looks like below;

And it is french too. :)

Happy coding...

Make your mandatory input controls more visible to users

It is true that we can use many plugins or validators to make validation easy. But today we will see how we can notify user for mandatory fields. We need jquery to do so. Look at the below code.

 .required{  
   border:1px solid #ff3300 !important;  
   color:#ff3300 !important;  
 }  

We write our validator as below;

 if ($('#txtlbfirstName').val() == '') {  
     $("#txtlbfirstName").addClass('required');      
     flValidated = false;  
   }  

And we remove the class when user start typing.

 $('#txtlbfirstName').keyup(function () {  
     var val = this.value;  
     if(val.length>0)  
       $('#txtlbfirstName').removeClass('required');  
   });  

So the ultimate result looks like;

It looks nice and Happy coding.. :)

Classic ASP - Using Arrays as in Lists in C#

We develop applications using different technologies. Some are new and some are not that new. In 90's asp was very famous before .Net comes out from Microsoft.

But still you find certain applications run in classic ASP & sometimes need fixes too.

Today we talk about how an Array of objects can be returned from a method so that it can be used anywhere in the application. As an example, look at the below code.

 this.PersonArray= new Array()  
 function SelPerson(idCompany) {    
   try {  
     this.PersonArray=new Array()  
     var l = this.PersonArray.length  
     var rst = new dalPerson().SelPerson(idCompany)  
     if (rst && rst.State && !rst.EOF)   
     {  
       while (!rst.EOF)   
       {  
         l = this.PersonArray.length  
         this.PersonArray[l] = new Object()  
         this.PersonArray[l].idPerson= rst.Fields("idPerson").Value  
         this.PersonArray[l].firstName= rst.Fields("firstName").Value  
         this.PersonArray[l].lastName= rst.Fields("lastName").Value  
         rst.moveNext()  
       }  
       rst.Close(); rst = null;  
     } else return false      
   } catch (e) { Response.Write("SelPerson: " + e.description); return false; }  
 }  

SelPerson is a method that fills the global "PersonArray" that can be accessible from anywhere where the class is referenced.

This method uses data access object "dalPerson" and its "SelPerson" method that returns a RecordSet. Looping through, we add the values to PersonArray and then close the recordset.

Wherever this method is used, can iterate through the array and get the work done as below;

 for (var n = 0; n < objPerson.PersonArray.length; n++) {  
   //var idPerson = objPerson.PersonArray[n].idPerson   
 }  

So don't bring your Recordset to the page and let them to be used only inside your DAL or at least on BLL.

Love the code. Not the technology.

Happy coding :)

Show tooltip in your dropkick dropdowns

Dropkick is a good css library that can be used to make all dropdowns look and feel better for end users.

Normally dropkick 1.0 doesn't provide any property / function for adding a tooltip to each option for its select / dropdown menu. When the option gets longer, it is always better to have a title for each item.

To do so, we need to change the a bit of the dropkick js file and also to add a title attribute for the option in the select control.

Add a title to each item of your drop down control.

  dropdownlist.Items[i].Attributes.Add("title", dropdownlist.Items[i].Text);  

And change the dropdown.js file as below; [Search and replace the lines with below codes]

 // HTML template for dropdown options  
   optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}" title="{{ title }}">{{ text }}</a></li>',  

 oTemplate = oTemplate.replace('{{ title }}', view.options[i].title);  

And it will show you the tooltip as below;

The HTML generated for dropkick will have the title as;

 <li class="">  
 <a title="My record about title" data-dk-dropdown-value="26924">My record about title </a>  
 </li>  

If you apply a bootstrap, you will find even more cooler tooltips with dropkick...

Happy Coding...!

11- 02- 2016 - Rally against ETCA - Dr Anuruddha Padeniya

Add a Plus Mark on a HTML table TD

As I am involved with developing a scheduler for a web application, I thought of publishing an interesting part like below;

So here you see a plus mark on each top left corner inside the TD tag.

Let's see how we do this with simple CSS and HTML.

Copy the following css into your file.

 .note {  
   font-size: 10px;  
   left: -8px;  
   position: relative;  
   top: -8px;  
 }  
 .note::after {  
   border-bottom: 20px solid transparent;  
   border-right: 20px solid transparent;  
   border-top: 20px solid #337ab7;  
   content: "";  
   display: block;  
   height: 0;  
   left: 0;  
   position: absolute;  
   top: 0;  
   width: 0;  
 }  

On each TD you can add the following;

 <td>  
   <div class="note"><i data-target="#appModel" data-toggle="modal" class="fa fa-plus fa-margine"></i></div>  
 </td>  

The font awesome is used for the plus mark.

Enjoy coding :)