CODEWITHSUNDEEP
jquerysafari
Andrew
Andrew

Reputation: 137

document.ActiveElement not returning the active element in Safari

In the web site I am writing there is the need for some confirmation text to be shown before something happens. The solution I am using shows a modal window on the button click and when the window is closed the Jquery looks at which button was clicked.

So I have the following for a logout confirmation

$(function () {
    $('#logOut').on('click', function () {
        url = $(this).data('request-url');
        $('#modalLogout').modal('show');
    });

    $('#modalLogout').on('hide.bs.modal', function () {
        var activeElement = $(document.activeElement);

        if (activeElement.is('[data-toggle], [data-dismiss]')) {
            if (activeElement[0].id === "LogoutOk") {
                window.location.href = url;
            }
        }
    });
});

and the modal window

<div id="modalLogout" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <p>Do you want to log out?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">Cancel</button>
            <button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
        </div>
    </div>
</div>
</div>

In windows I have tested the above in IE, Edge, Firefox and Chrome and it all works as I would expect it to - when the modal window closes the user is logged out only if the OK button was pressed, clicking anywhere else will leave you logged in.

On a Mac using Safari, clicking OK will do nothing. Looking at the console, the problem appears to be the $(document.activeElement). In a windows browser this will return the button that was clicked, in Safari I get the the whole web page starting with the <body>.

Reading around the net there seems to be a (small) amount of discussion on the subject of activeElement in Safari, but not as much as I would expect if a lot of people are doing something similar. None of the solutions I have looked at are applicable in my case.

Is there a way to get the clicked button in Safari, or is there a better way to achieve what I am after that will work in all browsers?

Upvotes: 6

Views: 9785

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

From mdn: Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them.

Hence, you can change your event handler from:

$('#modalLogout').on('hide.bs.modal', function () {
    var activeElement = $(document.activeElement);

to the delegated one:

$('#modalLogout').on('click', '#LogoutOk', function (e) {
    var activeElement = $(e.target);


$('#logOut').on('click', function () {
    url = $(this).data('request-url');
    $('#modalLogout').modal('show');
});

$('#modalLogout').on('click', '#LogoutOk', function (e) {
      console.log('LogoutOk: ' + url);
      window.location.href = url;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" id="logOut" data-request-url="http://www.google.it">
    Launch demo modal
</button>
<div id="modalLogout" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <p>Do you want to log out?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">Cancel</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 9

Related Questions