Solved

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

Posted on 2014-10-02
2
235 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

726 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