locked
How to trigger client-side onblur event when leaving a div/gridview area RRS feed

  • Question

  • User128600801 posted

    Dear all,

    I come to you for guidance; using basic UpdatePanels and some javascript, courtesy of Samir Nigam, I was able to put together a control which visibility changes "as needed". Here's my dilemma, we need to make it invisible when the user leaves either the gridview itself or its containing div.

    I originally tried attaching the client-side code to call in the onblur event, giving both a set tabindex and calling .Focus(). But, when leaving the gridview/div by either using the mouse to click somewhere outside their client area or simply tab my way out, the onblur event does not seem to fire.

    Please, keep in mind that we are successfully using other clien-side events on said gridview's rows.

    <div id="divItems" runat="server" TabIndex="0" ...>
    
        <asp:GridView ID="GridResults" runat="server" TabIndex="0" ....>
            ...
    </asp:GridView> </div>

    On the server-side:

    GridResults.Attributes.Add("onblur", "ExternalClosure()");
    divItems.Attributes.Add("onblur", "ExternalClosure()");

    Javascript:

    function ExternalClosure() { alert('test, test'); }

    We basically need to mimic bootstrap's modal windows closing behavior (animation not needed) when the user clicks outside of it.

    Thank you all for your brain power and interest!!!

    Alex.

    Thursday, March 8, 2018 3:50 PM

Answers

  • User-474980206 posted

    the unblur() won't work. as it fires when the any child gets the focus, instead you want catch the click outside the div. you do this by capturing the click event at the document, and check if the target is outside the div.

    here is a sample implementation:

      https://github.com/TooTallNate/click-outside

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 8, 2018 4:28 PM

All replies

  • User-474980206 posted

    the unblur() won't work. as it fires when the any child gets the focus, instead you want catch the click outside the div. you do this by capturing the click event at the document, and check if the target is outside the div.

    here is a sample implementation:

      https://github.com/TooTallNate/click-outside

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 8, 2018 4:28 PM
  • User128600801 posted

    Hello Bruce,

    Thanks for pointing in the right direction.

    Cheers!

    Friday, March 9, 2018 2:48 PM