malsup / blockui

jQuery BlockUI Plugin
http://jquery.malsup.com/block/
1.69k stars 506 forks source link

Unable to run Asynchronously with other scripts #146

Closed seanvree closed 6 years ago

seanvree commented 6 years ago

I'm a bit of a noob, but I've tried this many ways and have been banging my head against the wall for the past week or so trying to find a solution.

I've got a search form that when submit is fired, I was hoping to block the browser screen WHILE the other two scripts completed. With my code below, all three scripts execute, but the blockUI fires LAST for some reason.

What am I doing wrong? Is this even possible?

HTML:

            <div id="search"  class="Column">
                <form id="searchForm" method="post" action="" onsubmit="executeAsynchronously([blockUI, highlight, count], 10); return false;">
                    <input name="text-search" id="text-search" type="text"   value=""       class="input"  placeholder="search">
                    <inpu  id="submit" type="submit" value="Submit" class="button"  />
                </form>
                <div class="count"></div>
            </div>

JS:


$(document).ajaxStop($.unblockUI);

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

function blockUI() {
    $.blockUI({
        css: {
            'border': 'none',
            'padding': '15px',
            'backgroundColor': '#000000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            'opacity': '0.8',
            'color': '#EEEBEC',
            'font-size': '32px',
        },
        message: 'Searching...',
        fadeIn: 200,
        fadeOut: 400,
    });
};

function highlight() {
    var text = document.getElementById("text-search").value;
    var query = new RegExp("(\\b" + text + "\\b)", "gim");
    var e = document.getElementById("body").innerHTML;
    var enew = e.replace(/(<span>|<\/span>)/igm, "");
    document.getElementById("body").innerHTML = enew;
    var newe = enew.replace(query, "<span>$1</span>");
    document.getElementById("body").innerHTML = newe;
    color = "#f6f";
};

function count() {
    var count = document.getElementsByClassName("body").length;
    document.getElementsByClassName("count")[0].innerHTML = count;
};  

Also posted here: https://zohodiscussions.com/jquery/topic/unable-to-run-blockui-asynchronously-with-other-scripts