Solved

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

Posted on 2014-10-02
2
231 Views
Last Modified: 2014-10-10
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
Comment
Question by:danielolorenz
2 Comments
 
LVL 40

Accepted Solution

by:
Kyle Abrahams earned 250 total points
ID: 40357237
Don't remove the class just  show / hide it.
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 40359074
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question