How to display overlay when Search button is clicked on?

Question

I would like to be able to display an overlay when the search button is clicked.

I am new to Jquery/JavaScript and based on what I am learning on stack-overflow and google, I was able to come up with the following code:

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": "0px",
        "left": "0px",
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.6)",
        "z-index": "10000",
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "40px",
        "font-weight": "bold",
        "cursor": "wait",
    }).appendTo(".btn");
}

function removeOverlay() {
    $("#overlay").remove();
}

function closeOverlay{
 if($(".btn").data('clicked')){
  displayOverlay("Loading...");
 }
 else{
  $("#overlay").remove();
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div class="panel panel-default">
 <div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
  <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
   <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>

   <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>

   <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
            <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>

   <div class="form-group">
             <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
        <option disabled="disabled" selected="selected" value="">City</option> 
        <option value=""></option>
        <cfoutput query="cityFind">
                           <option value=#city#>#city#</option>
      </cfoutput> 
       </select>
                      
            <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
            </div>

   <div class="row">
    <div class="col-xs-6 no-right-padding paddingLanguage">
     <div class="form-group widthLanguage">
              
                      
                    <select name="language" class="form-control" ng-model="searchParam.Language">
         <option disabled="disabled" selected="selected" value="">Language</option>
                        <option value=""></option>
      <cfoutput query="Languages">
        <option value=#Language#>#Language#</option>
      </cfoutput> 
       </select>
                      
                      
                      
       <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
         <option disabled="disabled" selected="selected" value="">Language</option>
         <option ng-repeat="l in Languages">{{l.Lang}}</option>
          </select>--->
     </div>
    </div>

    <div class="col-xs-6 no-left-padding">
     <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
                    <option disabled="disabled" selected="selected" value="">Gender</option>
                    <option value=""></option>
                    <option>Male</option><option>Female</option> </select></div>
    </div>
   </div>
   
   <hr class="hrDoctor" />
   <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
   
   <div class="row">
    <div class="col-xs-7 no-right-padding">
     <div class="form-group">
      <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>

       <div class="input-group-addon">mi</div>
      </div>
     </div>
    </div>

    <div class="col-xs-5 no-left-padding widthZip">
     <div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
    </div>
   </div>

   <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
   <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset"  onClick="window.location.reload()"/></div>--->
  </form>
 <!---</div><!---Progress bar--->--->
 </div>
</div>

However, the overlay does not appear when the search button is clicked on.

UPDATE

The following is when the body is called and the overlay appears when the page is visited which is not desired.

$(function () {
    $("body").click(function () {
        if ($("#overlay").length > 0) {
            removeOverlay();
        } else {
            displayOverlay("Loading...");
        }
    });
});

This is the line where I am calling the setTimeout() function:

<div class="form-group"><input class="btn btn-warning btn-block ignore" ng-click="gotoElement('SearchResultsAnchor');" onclick="setTimeout(overlayDisplayButton,3000)" type="submit" value="Search" /></div>

I currently updated what I did and this is what I am using to display the overlay:

    function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": "0px",
        "left": "0px",
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.6)",
        "z-index": "10000",
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "40px",
        "font-weight": "bold",
        "cursor": "wait",
        "overflow-y":"hidden"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

$(function overlayDisplayButton() {
    $(".btn").click(function () {
        if ($("#overlay").length > 0) {
            removeOverlay();
        } else {
            displayOverlay("Loading...");
        }
        displayOverlay("Loading...");
    });
});
</script>

Small Change on what I did

    $(function overlayDisplayButton() {
    $("#submit").click(function () {
        if ($("#overlay").length > 0) {
            removeOverlay();
        } else {
           displayOverlay("Loading...")
        }
    });

});

and I still don't understand how to do the callback when the data is retrieved and displays on the screen so that the overlay goes away

Any help would appreciated. Thanks

@epascarello Yes. If that is the case, is the way I am doing it wrong? — Roberto Flores, Aug 19 '16 at 18:22
inputs do not have children, so you should not be appending it to the input — epascarello, Aug 19 '16 at 18:25
@epascarello okay. originally it was appending to the body which works but again I want to be able to click on the search button and have the overlay to display when it is clicked on — Roberto Flores, Aug 19 '16 at 18:27
So what can't you bind it to the body when the button is clicked? — epascarello, Aug 19 '16 at 18:29
@epascarello the problem with that, at least what I am seeing, it automatically appears on the page when I go to the page. I would like the overlay to appear only when the search button is clicked on and disappear when the form finishes retrieving the results — Roberto Flores, Aug 19 '16 at 18:30
So why is it being called on the page load? It should be called onclick. — epascarello, Aug 19 '16 at 18:32
@epascarello Again, I am new to jquery/javasript and followed examples online. How would I modify the code so it would be called onclick — Roberto Flores, Aug 19 '16 at 18:35
$("body").click(function () { <-- is binding click on body, so bind to the button? — epascarello, Aug 19 '16 at 18:37
@epascarello Okay, well above, I show when I am using the click function and like I mentioned, it would appear when when the page is loaded. Not only that, if you click anywhere on the page, it would generate the overlay again — Roberto Flores, Aug 19 '16 at 18:40
@epascarello I figured out the issue and now it work but now next step is to figure out how to use callback. Thank you for your help — Roberto Flores, Aug 19 '16 at 18:42
@epascarello Is this the correct way to use setTimeout(): onclick="setTimeout(overlayDisplayButton,3000)" — Roberto Flores, Aug 19 '16 at 18:57
no, because it is setTime**o**ut(...), and that should work. If it does not, than you need to cancel the click. — epascarello, Aug 19 '16 at 18:58
@epascarello I have updated my post and you can see what I did with the script and the form — Roberto Flores, Aug 19 '16 at 19:09
@epascarello I do not see why there would be an issue with ng-click with an onclick? — Roberto Flores, Aug 19 '16 at 19:28
Why is the logic not in angular? Seems like it should be a component with a flag you flip to show and hide. — epascarello, Aug 19 '16 at 19:30
Again, I am new. If you can help me with the logic to be in angular, it would be greatly appreciated — Roberto Flores, Aug 19 '16 at 19:58

javaMoca · Answer 1 · 2016-08-19T20:44:42.313

0

You can create an html user interaction blocking layer more easily with just a combo of a div and css and js. You just show or hide a div with this class. I don't see any reason to use a table. You just have that div sitting at the bottom of your page, with nothing in it. The css floats it above everything else and it expands to cover everything. The css height 100% still needs a little help from the js because it won't auto adjust when the window changes sizes I recall.

css:

div.BlockUserInteractionWithPage {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2000;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    background-color: #ffffff;
    opacity: 0.0;
    filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */
    height: 100%;
    width: 100%;    
}

js:

show

var pageLength = document.body.clientHeight;        
var blockingLayerObject = $("#blockingLayer")[0];
blockingLayerObject.style.height=pageLength;
$(blockingLayerObject ).show();

hiding is easy of course, once it is hidden it is no longer blocking

html:

<div id="blockingLayer" class="BlockUserInteractionWithPage" style="display:none;"></div>

edited Aug 19 '16 at 20:44

answered Aug 19 '16 at 20:34

javaMoca

175
7

@ javaMoca so I was making it more complicated using the table approach. Okay. I will try to modify what I did to reflect what your code is showing – Roberto Flores Aug 19 '16 at 20:44
You're welcome. Feel free to officially approve my answer if you like it. :) By the way I have used this technique for years and it works really good. If it doesn't work for you it is because I made a mistake in pasting it from my currently working code. – javaMoca Aug 19 '16 at 20:47
@ javaMoca: I tried your way but nothing pops up on my end. I will post up what I did – Roberto Flores Aug 19 '16 at 20:49
It is invisible. If you want to make it visible you have to adjust the opacity. – javaMoca Aug 19 '16 at 20:50
For example make the opacity one and it will block your view of everything. – javaMoca Aug 19 '16 at 20:58
Btw, I recommend using a browser that will show you any js errors. I use firefox with firebug installed. It will show you if your js breaks. That way you will know if what you are trying is simply not working because of bad syntax. – javaMoca Aug 19 '16 at 20:59
@ javaMoca Thanks and I have tried your method and still does not work. I just stayed with my method of displaying the overlay and I have a question. Based on what I have, how would i use the setTimeout() function or callback function? I would prefer callback function so when the data is retrieved and ready to be displayed, the overlay goes away – Roberto Flores Aug 22 '16 at 15:19
Definitely you don't want to use a timeout because it would be completely random. Here is a stack overflow post on using a callback http://stackoverflow.com/questions/14754619/jquery-ajax-success-callback-function-definition – javaMoca Aug 22 '16 at 18:41
@ javaMoca: I have tried this approach and it does not work. I have tried to debug it and it does show there is a ajax call but the overlay keeps running in a loop for some reason – Roberto Flores Aug 22 '16 at 18:56
@ javaMoca: I have tried the following: $(document).ajaxComplete(function(){ console.log('Hello!'); }}; in the ready function and it does not display the message in the console. So not sure what is going to be honest – Roberto Flores Aug 22 '16 at 19:22
@ javaMOca, nothing really has changed, I was trying to test if it would be recongize but it doesnt. The code I showed you is all I did before I even went further and it was not coming up – Roberto Flores Aug 22 '16 at 20:37
Okay. Looking over your code again. Here is what I recommend. Get rid of the body onclick. Get rid of the timeout. Just have the onclick on your show overlay button. If you want to see you overlay in action, comment out the code that turns it back off and see if its working. Also, you have both an ng-click and an onclick in the same tag. Only use one. – javaMoca Aug 22 '16 at 20:45
Okay, I will see and the reason I had the onclick is so that when the user clicks on the button, the overlay displays. – Roberto Flores Aug 22 '16 at 20:47
@ javaMoca, it works but as mentioned, it keeps on going forever........ So I gave it a unique id and yet it continues to do the same thing. I will show what I did – Roberto Flores Aug 24 '16 at 21:32

How to display overlay when Search button is clicked on?

1 Answers1