ansaurus

Question

jQuery ajax request not firing on subsequent events

Answer 1

A:

Is this the exact code that your executing? So the a.CompletedCheckBox will also have a class of CheckedCompletedCheckBox also?

That seems like it should work... but if your using other selectors in your actual code i could see how this could go wrong.

Do you have any sample markup?

youdontmeanmuch 2009-02-07 08:00:42

Answer 2

+2 A:

Just one thing, you can simplfy one aspect:

$(function() {
  $("a.CompletedCheckBox").click(function() {
    $(this).toggleClass("CheckedCompletedCheckBox");
    $.get("/Tasks/Complete/" + this.id, "", function() {});
  });
});

Your .get() call looks OK. Remember though that browsers will tend to limit the number of simultaneous Ajax requests (to 2 or less typically). Are you sure your call is returning? Have you considered using the .ajax() call instead and specifying a timeout and/or error handler so you can see what's going on?

EDIT: Tried the following code and it works perfectly. You've got something else going on.

<html>
<head>
  <title>Test Get</title>
  <style type="text/css">
    .CompletedCheckBox { background-color: yellow; display: block; }
    .CheckedCompletedCheckBox { border: 2px solid black; }
  </style>
</head>
<body>
</body>
<a id="abcd" class="CompletedCheckBox">Click me</a>
<script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
      $(function() {
       $("a.CompletedCheckBox").click(function() {
          $(this).toggleClass("CheckedCompletedCheckBox");
          $.get("/test2.php?id=" + this.id, "", function() {});
        });
      });
    });
</script>
</html>

and

<?php
error_log("User pressed link for id $id");
?>

Well, the id wasn't coming through but the error log was with each click.

cletus 2009-02-07 08:04:29

I am using Fiddler (http debugging proxy) to see requests made to the server, so I can see in real time what is returning, and what is not.

Kyle Trauberman 2009-02-07 08:14:34

I followed your suggestion to use .ajax instead, and the same issue occurs.

Kyle Trauberman 2009-02-07 08:29:40

Answer 3

+1 A:

I had no problems executing your code locally. Each GET would return, even after setting a Thread.Sleep on the server.

Does your "/Tasks/Complete/" url return anything? HTML, plain-text, json?

What browser are you using? Does this problem persist across all browsers? I would try using FireFox with the FireBug add-on to see in its Console what is returned.

Let us know what you find!

Jarrod Dixon 2009-02-07 08:26:52

I'm using IE7 on Windows XP SP3 (running in a VM). I had the same idea, and am downloading FireFox right now.

Kyle Trauberman 2009-02-07 08:31:01

FireFox works fine. Its curious that this doesn't work in IE7. If it makes any difference (I don't think it does), I'm loading jQuery from google.

Kyle Trauberman 2009-02-07 08:43:42

In my controller, I'm returning an EmptyResult. Could this be caused by nothing being returned?

Kyle Trauberman 2009-02-08 06:32:18

Answer 4

A:

Yes, post a demo please?

I tried using an excerpt of your code, but it works fine.

I suppose it could be that you are remove() -ing a.CompletedCheckBox from the DOM?

I encountered the issue in 1.2.6, where you remove (and add) some element, the event never fires again.

That's documented here:

http://docs.jquery.com/Manipulation/remove#expr

Since you're using 1.3.1, you can try using live().

Here's a demo:

http://waynekhan.com/sandbox/index.php/demo/get

The link in the red box will always work, because we don't call remove(). The link in the blue box works only once, because we call remove(). This could be your issue. The link in the green box works, because we call remove(), but we're using live(), not click().

Wayne Khan 2009-02-07 16:41:46

Answer 5

+3 A:

IE is likely caching the result of the $.get() request. Try adding a timestamp to the URL of the get request, as such:

var myDate = new Date();
var timestamp = myDate.getTime();
$.get("/Tasks/Complete/" + this.id + '?t=' + timestamp);

rmurphey 2009-02-09 06:40:23

Found this thread as was having the same issue. Thanks for the tip rmurphey, it fixed it for me. Insert angry rant about IE here...

CountZero 2009-08-25 16:24:56

Answer 6

A:

I knowt his is an old question now... but IE7 is overzealous with caching the HTTPXML object... so you have to either:

put some random data at the end of your url (as rmurphy said)
use the $.post() method instead, as IE doesnt cache POSTs
set your cache timeouts in the server response so that IE doesnt cache:

    Cache-Control = "no-cache"
    Pragma = "no-cache"
    Expires = "0"

Nick Franceschina 2009-07-09 01:15:18

Answer 7

A:

this worked for me: Response.Expires = -1;

Michal Utikal 2009-10-05 17:40:12

ansaurus

tags:

views:

answers:

jQuery ajax request not firing on subsequent events

related questions