Thursday, March 17, 2016

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...

Tuesday, March 15, 2016

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...

Friday, March 11, 2016

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.. :)

Wednesday, March 2, 2016

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 :)