JS-generated clicks don't work in Chrome

4 posts, 0 answers
  1. Alex Krusz
    Alex Krusz avatar
    3 posts
    Member since:
    Nov 2011

    Posted 06 Feb 2012 Link to this post

    I am creating a keyboard shortcuts for various actions on a page that uses the Telerik toolbar. In particular, I want Ctrl+S to save the inputted form info. There is already a Save button on our toolbar, so we want to just use a script to generate a click on that button rather than reconstruct the POST manually (which would be quite complicated). I am using John Resig's jQuery hotkey plugin, which is what is handling the bind statement. In all browsers, the selection of the Save button element or any of the related divs works.

    The click registers perfectly in Firefox and IE9, but in Chrome the click does not work at all. Why might this be? The actual code is within a product that I can't really replicate here, but I've made a dummy page to the same effect. Here are the relevant snippets:

    JS:
    (function($) {
        $(document).ready(function() {
            $(document).bind('keydown', 'ctrl+s', function() {
            $("div#RadToolBar .rtbOut").click();
                return false;
            });
        });
    })(jQuery);

    ASPX:
    <div class="save-button">
    <telerik:radtoolbar id="radToolBar" runat="server" cssclass="toolbar">
      <items>
        <telerik:radtoolbarbutton navigateurl="~/default.aspx" postback="false" text="Goto Default Page" causesvalidation="false"/>
      </items>
    </telerik:radtoolbar>
    </
    div>
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 09 Feb 2012 Link to this post

    Hi Alex,

    As it appears in WebKit browsers such as Chrome or Safari, the click method is not working as expected. In order to deal with this behavior my suggestion is to use the following approach :
    var $ = $telerik.$;
                    $(document).ready(function () {
                        $(document).keydown(function (e) {
                            if (e.ctrlKey && e.keyCode == '83') {
                                e.preventDefault();
     
                                if ($telerik.isChrome && $telerik.isSafari) {
     
                                    window.location = $("div#RadToolBar .rtbWrap").attr("href").val();
                                }
                                else {
     
                                    $("div#RadToolBar .rtbOut").click();
                                    return false;
                                }
     
                            }
                        });
                    });


    Greetings,
    Dimitar Terziev
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex Krusz
    Alex Krusz avatar
    3 posts
    Member since:
    Nov 2011

    Posted 13 Feb 2012 Link to this post

    Sorry about any ambiguity, but I have some JavaScript on the page that goes through the an event handler on the Telerik toolbar when the Save button is clicked. So, I need a way to fire off whatever code is attached to that event handler - not merely replace the URL with the href from the button.
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 16 Feb 2012 Link to this post

    Hello Alex,

    If you want to execute the code from the event handler function you have two options. The first one is to encapsulate this code in separate function and call it when following statement is valid:
    if ($telerik.isChrome && $telerik.isSafari) {
     //call function here
                                    window.location = $("div#RadToolBar .rtbWrap").attr("href").val();
                                }

    The second approach is to manually trigger the click event using the following code:
    var toolbar = $find("radToolBar");
    toolbar.get_items().getItem(0).click();
    This again should be executed only when the browser is either Chrome or Safari.

    Greetings,
    Dimitar Terziev
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top