jqueryjquery-blockui

jQuery blockUI - 'message' property value not coming up in blocked divs with same class

jQuery blockUI

I have multiple divs with the same class (js-car), trying to implement blockUI, on click of 'Block' button I want to block all the divs with the same class (js-car), it kind of works, but the indicator is coming up only in the last div. How can I make it to show the indicator in all the divs?

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="/_ui/responsive/common/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/_ui/responsive/common/js/jquery.blockUI-2.66.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#blockButton').click(function() {
                $('div.js-car').block({ message: $("<img src='/_ui/responsive/common/images/spinner.gif'/>") });
            });

            $('#unblockButton').click(function() {
                $('div.js-car').unblock();
            });

        });
    </script>
</head>
<body>
    <button id="blockButton">Block</button>
    <button id="unblockButton">Unblock</button>

    <div class="js-car">
        <a href="#" class="test">Test link - click me!</a>
        <p>
        <select><option>Option 1</option><option>Option 2</option></select>
        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet
        <select><option>Option 1</option><option>Option 2</option></select>

        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        <a href="#" class="test">Test link - click me!</a>
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet<br>
        <textarea rows="2" cols="20">test textarea</textarea>
    </div>

    <div class="js-car">
        <a href="#" class="test">Test link - click me!</a>
        <p>
        <select><option>Option 1</option><option>Option 2</option></select>
        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet
        <select><option>Option 1</option><option>Option 2</option></select>

        lorem ipsum dolor sit amet
        consectetuer adipiscing elit
        sed lorem leo
        <a href="#" class="test">Test link - click me!</a>
        lorem leo consectetuer adipiscing elit
        sed lorem leo
        rhoncus sit amet<br>
        <textarea rows="2" cols="20">test textarea</textarea>
    </div>

</body>
</html>
Solution

  • Looks like there is no solution for this issue, https://github.com/malsup/blockui/issues/20

    I updated my code, to add the indicator/spinner like below,

            $(".blockUI.blockMsg.blockElement > img").remove();
        $(".blockUI.blockMsg.blockElement").append("<img 
             src='/_ui/responsive/common/images/spinner.gif'>");