• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

I Am Using Ajax to Pop Up a Data Loading Message and Only Works on First Click?

I am using Ajax to bring up a popup message on a table with links to do multiple data loads.  The Ajax Load message is only working correctly on the first mouse click.

Do you know why?

My code is shown below:

function loaderImage() {
    $("#loaderImage").addClass('loaderImage');

    $("#loaderImage").bind("ajaxSend", function () {
        $(this).fadeIn();  // fadeIn(100) or show()
    }).bind("ajaxStop", function () {
        $(this).hide();
        $(this).removeClass('loaderImage');
    }).bind("ajaxError", function () {
        $(this).hide();
        $(this).removeClass('loaderImage');
    });

    // Showing the Load Image on File Load
    $('#loaderImage').show();
}

.loaderImage
{
    display: none;
    position: fixed;
    top: 30%;
    left: 38%;
    margin-left: -50px; /* half width of the loader gif */
    margin-top: -50px; /* half height of the loader gif */
    text-align:center;
    z-index:9999;
    overflow: auto;
    width: 397px; /* width of the loader gif  32px */
    height: 92px; /*hight of the loader gif +2px to fix IE8 issue 32px  */
    background: url(../../Images/VehicleDataLoad.gif); 
}

 @foreach (var item in Model.PendingQueries)
            {
                <tr>
                    <td id="parm_@item.ID" onclick="loaderImage();">
                            @if (item.ViewResults)
                            {   
                                @Html.ActionLink(item.Parameters, "ViewResults", new { id = item.ID })
                            }
                            else
                            {
                                @Html.DisplayFor(itemModel => item.Parameters)
                            }
                    </td>
                    <td id="status_@item.ID">@Html.DisplayFor(itemModel => item.Status)</td>
                </tr>
            }
        </tbody>

<!-- Vehicle Loader Image -->
<div id="loaderImage" class="loaderImage"></div>

Open in new window

0
danielolorenz
Asked:
danielolorenz
2 Solutions
 
Kyle AbrahamsSenior .Net DeveloperCommented:
Don't remove the class just  show / hide it.
0
 
Michel PlungjanIT ExpertCommented:
Documentation states

As of jQuery 1.8, the .ajaxSend() method should only be attached to document.

and fadeIn is showing the image so

$(function() {
    $(document).ajaxSend(function () {
      $("#loaderImage").fadeIn();  // fadeIn(100) or show()
    }).ajaxStop(function () {
      $("#loaderImage").hide();
    }).ajaxError(function () {
      $("#loaderImage").hide();
    });
});

<div id="loaderImage" class="loaderImage"></div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Tackle projects and never again get stuck behind a technical roadblock.
Join Now