How can I trigger a loading overlay when I call admin-ajax.php?

I have 100% front-end web app, that calls an ajax modal via admin-ajax.php. The modal can take a bit to load in the form, though, so I'd like to put in a loading overlay while it pulls the data in. How can I do this? I was surprised to find so little info on this when I did a Google search. I'm not a master JS/PHP guy, unfortunately.

Link set up like this: "/wp-admin/admin-ajax.php?action=formcall&form_id=additem"

Thanks

  • Ash
    • WordPress Hacker

    Hello @Bryan

    I hope you are well today.

    I assume you have the data loaded so I am not diving into the full code but showing you some pseduo code.

    First add a div in somewhere (may be at the bottom) like this:

    <div class="ajax_loading"></div>

    Then add this in css:

    .ajax_loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(PATH/TO/Loading/Image) center center no-repeat;
    display: none;
    }

    Then in your js code:

    $('#test').click(function() {
      $('.ajax_loading').show();
      $.post({
        ...
        ...
        ...
        success: function(response)  {
          $('.ajax_loading').hide();
          // Write your code
        }
    
      });
    });

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.