CODEWITHSUNDEEP
javascriptjqueryevents
Phillip Senn
Phillip Senn

Reputation: 47595

Blur executing before click

I have two events: 1) Blur and Click. The blur event removes everything if the user leaves the input element empty, and the click event will show a dialog box. 

$(document).on('click','.glyphicon-filter',glyphiconFilterClicked);
function glyphiconFilterClicked() {
    debugger; // show dialog box goes here
}

$(document).on('blur','input',filterBlurred);
function filterBlurred() {
    if ($(this).val() === '') {
        $(this).closest('tr').find('th').html(' ');
    }
}

Q: How can I say "On input blur, don't empty the parent th element if the reason is because the user just clicked on class="glyphicon-filter"?

Upvotes: 1

Views: 216

Answers (2)

Greg Burghardt
Greg Burghardt

Reputation: 18783

You won't be able to connect the two events. You could use setTimeout (...) in the blur event handler to wait, say 100 ms. Then in the click handler set a flag to true that the callback in setTimeout will check before wiping the value of the form field.

Edit: Some working code that I think works as you intend...

<!DOCTYPE HTML>
<html>
<head>
    <title>Filter Blur Demo</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <th>Apples</th>
                <td><input type="text"> <button class="glyphicon-filter">Filter...</button>
                    (defaults)</td>
            </tr>
            <tr>
                <th>Oranges</th>
                <td><input type="text" data-filter-icon-timeout="2000"> <button class="glyphicon-filter">Filter...</button>
                    (custom timeout)</td>
            </tr>
            <tr>
                <th>Bananas</th>
                <td><input type="text" data-filter-icon-selector="a"> <a href="#" class="glyphicon-filter">Filter...</a>
                    (custom filter icon selector)</td>
            </tr>
        </tbody>
    </table>
    <ol>
        <li>
            <label>Peaches</label>
            <input type="text"
                data-filter-icon-container="li"
                data-filter-icon-timeout="250"
                data-filter-icon-selector="a"
                data-filter-cleared-out-selector="label"
                data-filter-cleared-out-value="n/a">
            <a href="#" class="glyphicon-filter">Filter...</a>
            (everything but the kitchen sink)
        </li>
    </ol>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function filterBlurred(event) {
            //console.info("blur");
            var input = event.target,
                filterIconSelector = input.getAttribute("data-filter-icon-selector") || ".glyphicon-filter",
                containerSelector  = input.getAttribute("data-filter-icon-container") || "tr",
                clearedOutSelector = input.getAttribute("data-filter-cleared-out-selector") || "th",
                clearedOutValue    = input.getAttribute("data-filter-cleared-out-value") || "&nbsp;",
                timeout            = Number(input.getAttribute("data-filter-timeout")) || 250,
                $row               = $(input).closest(containerSelector),
                $icon              = $row.find(filterIconSelector),
                clearInput = function() {
                    if (!input.value) {
                        if ($icon.attr("data-filter-icon-clicked") !== "yes") {
                            $row.find(clearedOutSelector).html(clearedOutValue);
                        }

                        $icon.attr("data-filter-icon-clicked", "");
                    }
                };

            setTimeout(clearInput, isNaN(timeout) ? 250 : timeout);
        }

        function glyphiconFilterClicked(event) {
            event.target.setAttribute("data-filter-icon-clicked", "yes");
            //console.info("click", event.target);
            event.preventDefault();
            // do other stuff
        }

        $(document)
            .on("blur", "input", filterBlurred)
            .on("click", ".glyphicon-filter", glyphiconFilterClicked);

    </script>
</body>
</html>

You should be able to copy and paste into an HTML file, save it, and then load it in a browser. It is working for me in Firefox.

In this case, the "flag" is an HTML5 data-* attribute on the icon element. This makes things very customizable and reusable.

Upvotes: 1

Aysennoussi
Aysennoussi

Reputation: 3860

I didn't understand the question very well, but here is what I get, If the user blurs an input other than the one having class="glyphicon-filter" don't empty the element right ? If so just make it as follow: 

$(document).on('blur','input.glyphicon-filter',filterBlurred);
function filterBlurred() {
    if ($(this).val() === '') {
        $(this).closest('tr').find('th').html('&nbsp;');
    }
}

Upvotes: 1

Related Questions