Solved

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

Posted on 2014-10-02
2
239 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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

696 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