Question

Suppose this is my html

<div id="menu">
    <div id="photo"></div>
    <hr/>
    <div id="info" class="menu">Info</div>
    <div id="msg" class="menu">Message</div>
    <div id="files" class="menu">Files</div>
    <hr/>
</div>

I want to assign $('.menu').ajaxStart() so that all the div with the class="menu" are assigned the ajaxStart() and eventually the ajaxStop() jQuery events’

My problem is that I want to show some kind of progress (text or progress gif) when the ajax event is running but not on all the div with class="menu" but on the particular id that i have clicked on. Lets say for instance I click on div with id=infothe progress should be shown only on that div.

How can i achieve this? Thanks in advance.

Example at JSFIDDLE

Answer 1

There’s no need to do this with the “ajax” events; just do it in the “click” handler.

$('#info').click(function(){
    var $clicked = $(this);
    $clicked.text('Requesting...');
    $.post('/echo/html/', {
        html: '<div id="username">lonewolfs</div><div id="firstname">Lone</div><div id="lastname">WOLFs</div><div id="sex">1</div><div id="dob">1982-10-20</div><div id="address">Bahamas</div><div id="city">XYZ</div><div id="state">StateXYZ</div><div id="country">USA</div><div id="phone">9999999999</div><div id="email">[e-mail]</div><div id="messagebody"></div>'
    }, function(data) {
        $('body').append($(data).filter('#email'));
        $clicked.text("Done...!");
    });
});

The “ajax” events can be useful for doing certain kinds of things, but in this case there’s really no point, and it’s just an added difficulty. The problem is that there’s absolutely no intrinsic relationship between the real “click” event and the synthetic “ajaxStart” and “ajaxStop” events, so there’s no way to know why the “ajaxStart” is happening. Since you’ve got a “click” handler anyway, and it does know the element involved, that’s the best place to do the work.