Handle back button using Javascript

Some times developers need to handle/disable the back button functionality. In situations like after payment screen or after logout, users going back using back button is a weird thing for any developer.

To handle this situation, add the following JavaScript code in your navigated page.

<script type = "text/javascript" >
        history.pushState(null, null, 'page_name');
        window.addEventListener('popstate', function(event) {
            history.pushState(null, null, 'page_name');
        });
</script>

Replace the "page_name" with your navigated page name.

Ex: If you are navigating from first.html to second.html. Add the above snippet in second.html page and replace "page_name" with "second.html".

That's it. 

Enjoy coding.

How to stop double click on form submission

It's a common and weird problem for many web application developers. How to stop double click and let users know the process is started.

Add the following properties to the asp button control. That's it.

OnClientClick="this.disabled = true; this.value = 'Submitting...';__doPostBack('btnConfirm','')" 

UseSubmitBehavior="false"

Happy coding!!!

JQuery and UpdatePanel issue in ASP.Net

This is a regular issue for all developers who are using UpdatePanel in their code. If you are the one using JQuery functionality inside an update panel then first time the client side script works. But If any async postback happened, then after that JQuery will not work. This is because UpdatePanel do partial postbacks, so it will not reload the JQuery script to execute. So when you try to execute the script after postback it will give you 'undefined' error.

To solve this you need to call the same functionality in the endRequest.

How to do it.

     var initialise = function () {
           $(function () {
               doSomething();
           });

           if (typeof (Sys) !== 'undefined') {
               Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args)             {
                   if (args.get_error() == undefined) {
                       var responseText = args.get_response().get_responseData();
                       doSomething();
                   }
               });
           }

           return _this;
       };

I am calling my doSomething method in the initialise and in Sys.WebForms.PageRequestManager.getInstance().add_endRequest as well. So for partial postbacks the script will load again.

Hope this helps...... Happy coding :)

WCF service binding changes for HTTPS - 404 error

If you are the one who is using WCF services referring from same project evrything works fine until the security feature applied. With HTTPS domain probably all of your service requests fail with 404 error.

If that is the case then create a new binding like below

<binding name="webBinding">

       <security mode="Transport">

       </security>

     </binding>

And add the bindingConfiguration to your service end point.

bindingConfiguration="webBinding"

This will solve the issue.

Happy deployment :)

AutoComplete extender implementation from client side

AutoComplete extender is one of the way to implement the Auto complete feature to a textbox.

With the below approaches you can get the idea, how can we implement the autocomplete extender differently and different scenarios and functionalities related to the Extender.

The default way of implementation:

<asp:AutoCompleteExtender
                            ID="AutoCompleteExtender1"
                            TargetControlID="uxTxtAddress"
                            runat="server"
                            BehaviorID="AutoCompleteEx"
                            ServiceMethod="GetAddressList"
                            CompletionInterval="1000"
                            MinimumPrefixLength="6"
                            EnableCaching="true"
                            UseContextKey="True"
                            OnClientItemSelected="getSelected">
                        </asp:AutoCompleteExtender>

Alternative way to implement from dynamically from client side using jQuery/javascript:

$create(Sys.Extended.UI.AutoCompleteBehavior, { "delimiterCharacters": "", "id": "AutoCompleteEx", "minimumPrefixLength": 6, "serviceMethod": "GetAddressList", "servicePath": "/checkout/payment.aspx", "useContextKey": true }, { "itemSelected": getSelected }, null, $get(jQuery("[id$=uxTxtAddress]").attr("id")));

Call this function in document.ready function.

Here we need to pass textbox id, client side selected event and server side service method.

Dispose the behaviour from client-side:

//"AutoCompleteEx" is the behaviour id

if ($find("AutoCompleteEx") != null) {
        $find("AutoCompleteEx").dispose();
    }

Server method:

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetAddressList(string prefixText, int count, string contextKey)
    {
        return AddressUtility.GetAddressesFromService(prefixText);
    }

Client method after selecting the item from the list:

function getSelected(sender, e) {

    alert(e.get_value());//Gets the value of the selected item
}

A way to stop the default Enter button while selecting an item: 

Call the "trapEnter(e)" function from onkeypress event of the textbox.

function trapEnter(e) {
    e = e || window.event;
    var code = e.keyCode || e.which;
    if (code == 13) {
        cancelEvent(e);
        return false;
    } else {
        return true;
    }
}
 
function cancelEvent(e) {
    e = e ? e : window.event;
    if (e.stopPropagation)
        e.stopPropagation();
    if (e.preventDefault)
        e.preventDefault();
    e.cancelBubble = true;
    e.cancel = true;
    e.returnValue = false;
    return false;
}