How To Fix Empty ContentEditable Not Allowing Click



TODO:

Have you ever had an empty content editable element, which means the only way to get focus to it was to tab to it?

 

SOLUTION:

Enclose your element in a <div class="editableCell">.  Then track the click on the div, setting focus to it's first child, which will be your empty content editable element.  See the JQuery code below.

$(document).on('click', '.editableCell', onClick);

//So we need this because when there is an empty contenteditable element it wont take a click.  So we need to get the parent (TD) then set focus to the SPAN which will allow data entry.
function onClick(e) {
     $(e.target).children('span')[0].focus();
}
 


NOTES:

You can change the 'span' to whatever your contenteditable element is.  In my case it was a span.

How To Validate A Page On The Client Using Javascript



TODO:

Have you ever wanted to validate a page on the client side?

 

SOLUTION:

if (Page_ClientValidate("vgForgotPassword")) {
//do something
}

 

NOTES:

If the validation group does not have a name use ""

 

Causes And Fixes For "Error: Sys.ArgumentNullException: Value cannot be null." In JQuery



TODO:

You make some changes the ASP.net controls on your form, and possible your JQuery.  You run your application and you end up with "Error: Sys.ArgumentNullException: Value cannot be null."  

 

SOLUTION:

95% of the time I have had this issue, the problem was that I removed a control, and its references in the .cs file, but forgot it in the JQuery.  So in the JQuery I was doing a .hide() on the removed control which causes the cryptic error above.  To debug I simply looked for each instance of $('#mycontrolxxxxxxx').hide(); and made sure that #mycontrolxxxxxxx actually still existed.  Sure enough, I forgot to remove a JQuery line.  Once I removed the rogue JQuery line, the issue went away. 

 

NOTES:

There are no notes on this topic.

How To Disable The Enter Key Using JQuery



TODO:

Have you ever wanted to disable the enter key for your entire form, including "modal" edit popup windows for the Telerik RadGrid?  If so, put this code in the document.ready function, and the Enter key will no longer submit your form data.

 

SOLUTION:

$(document).ready(function() {
        //disable the enter key, it causes too many issues....
        //Bind this keypress function to all of the input tags
        $('input').live('keypress', (function (evt) {
             //Deterime where our character code is coming from within the event
             var charCode = evt.charCode || evt.keyCode;
             if (charCode == 13) { //Enter key's keycode
                  return false;
             }
        }));

        //OR USE THE ONE BELOW.  ONE ABOVE WORKED BEST FOR ME
    function checkKeyPress(e) {
        if (e.keyCode == 13) {

            if (!e) var e = window.event;

            e.cancelBubble = true;
            e.returnValue = false;

            if (e.stopPropagation) {
                e.stopPropagation();
                e.preventDefault();
            }
        }
    }
    $("input").keydown(checkKeyPress);
})​

 

NOTES:

Method 1 worked for me, but I have seen method 2 used before also.

How To Fix The Problem Of Telerik RadAjaxLoadingPanel Only Loading On First Postback



TODO:

I recently had an issue, where the RadAjaxLoadingPanel would only load on the first button click.  This was frustrating, and like many things Telerik, there are 10 answers and 0.5 of them work.  To fix this, I hooked into the button click event in JQuery, and then showed the loading panel manually from there.


SOLUTION:

<telerik:RadCodeBlock ID="rcbInitHandler"runat="server">
     <script type="text/javascript">
            //global variables
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            
            
            //add the init activity
            Sys.Application.add_init(appl_init);

            //Do this on init
            function appl_init() {
                var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
                pgRegMgr.add_endRequest(EndHandler);
                pgRegMgr.add_beginRequest(BeginHandler);
            }

            //Called before async postback
            function BeginHandler() {
                document.body.style.cursor = 'wait';
            }

            //Called after async postback
            function EndHandler() {
                if (currentLoadingPanel != null && currentUpdatedControl != null)
                    currentLoadingPanel.hide(currentUpdatedControl);
                currentUpdatedControl = null;
                currentLoadingPanel = null;
                document.body.style.cursor ='default';
            }

            //Show the loading panel
            function ShowLoadingPanel() {
                currentLoadingPanel = $find('<%=rdlpLoadingPanel.ClientID%>');
                currentUpdatedControl ='<%=pnlSomePanel.ClientID%>';
                currentLoadingPanel.show(currentUpdatedControl);
            }

            $(document).ready(function () {
                 //Register buttons so we get pop-up.  we could have done all buttons, but we do not want to get the grid button
                 $('#<%=btnLoad.ClientID%>').live("click",function () {
                     ShowLoadingPanel();
                 });
            });
     </script>
</telerik:RadCodeBlock>


NOTES:

You will need a Loading Panel called rdlLoadingPanel, a panel called pnlSomePanel, and a button called btnLoad.  The rest is pretty self explanatory.

 

 

 

 

 

How To Get The Selected Value Of a RadioButtonList In JQuery



TODO:

Have you ever wanted to get the selected value of a RadioButtonList using JQuery?  You can do it via CssClass, but in this example, I want to target a particular control.

 

SOLUTION:

//handle nothing being checked
if ($("#<%= rblMyRadioList.ClientID %> input:checked").val() == null) {
     return;
}

var selectedValue = $("#<%= rblMyRadioList.ClientID %> input:checked").val().toUpperCase();

 

NOTES:

There are no notes on this topic.

How To Convert A Variable To Lower Case In JQuery



TODO:

Have you ever wanted to check a var against a string and ensure case is not an issue?

 

SOLUTION:

var myVar = $('.myCheckboxClass').find(":checked").val().toLowerCase();

 

NOTES:

This script will find my checkbox by class name, as well as checked, and give me the value in lower case.