jQuery $.ajax() executed twice?

Question

Here is a button:

<input type="button" value="add to cart" id="addToCart" />

and a bound event:

$("#addToCart").bind('click',function(){
                $.ajax({
                    url: '/cartManager/add',
                    data:{
                        pictureId: currentImageId,
                        printSize: $("#size option:selected").val(),
                        paperType: $("#paperType option:selected").val(),
                        quantity: 1
                    },
                    success: function(){
                        $("#modal").html("<h1>ОК</h1><p>Closing in a sec</p>").delay(1000);
                        $("#modal").overlay().close();

                    }
                });
            return false;
            });

And everything works find apart one thing that kind of bothers, I see two requests in Chrome dev console for this:

add /cartManager:

Request URL:http://127.0.0.1:8000/cartManager/add?pictureId=4&printSize=2&paperType=1&quantity=1
Request Method:GET
Status Code:301 MOVED PERMANENTLY

add /cartManager/add?:

Request URL:http://127.0.0.1:8000/cartManager/add/?pictureId=4&printSize=2&paperType=1&quantity=1
Request Method:GET
Status Code:201 CREATED

Request headers for both are pretty much the same, the only difference in request headers:

first is cartManager/add?pictureId= and so on and the second one is cartManager/add/?pictureId - the '/' after /add

Is there something wrong with my javascript?

I don't understand why it would bother you, the situation in Libya bothers me. This is expected behavior. — Anders, Apr 04 '11 at 21:15
what happens if you add the final / to the url? url: '/cartManager/add/' — fredrik, Apr 04 '11 at 21:16

score 10 · Accepted Answer · answered Apr 04 '11 at 21:16

There's nothing wrong per-se, but you should add the trailing slash to /cartManager/add yourself.

What's happening is that the web server is sending a 301 redirect to the AJAX client with a new URL, so it issues a new request to the proper URL (i.e. with the trailing slash).

Capsule · Answer 2 · 2011-04-04T21:33:58.450

2

This is happening because of this: http://httpd.apache.org/docs/2.0/mod/mod_dir.html#directoryslash

Nohing to do with your javascript, this is pure Apache wizardry.

Of course, as pointed out in other answers, you should add a slash after "add" because "add" is obvisouly a folder, not a file.

edited Apr 04 '11 at 21:33

answered Apr 04 '11 at 21:27

Capsule

6,118
1
20
27

score 1 · Answer 3 · answered Apr 04 '11 at 21:15

1

Status Code:301 MOVED PERMANENTLY

No, your JavaScript is not causing this. It looks like your server is redirecting /cartManager/add to /cartManager/add/. Since the server wants a trailing slash, why not just add it and avoid the redirect?

answered Apr 04 '11 at 21:15

Isaac Truett

8,734
1
29
48

yup, silly me - should have thought about this in the first place. – abolotnov Apr 04 '11 at 22:49

score 1 · Answer 4 · answered Apr 04 '11 at 21:16

The header has the clues you need.

Your request to '/cartManager/add' is being forwarded to '/cartManager/add/' (notice the ending forward slash).

Replace your ajax call with

$.ajax({
                    url: '/cartManager/add/',
                    data:{
                        pictureId: currentImageId,
                        printSize: $("#size option:selected").val(),
                        paperType: $("#paperType option:selected").val(),
                        quantity: 1
                    },
                    success: function(){
                        $("#modal").html("<h1>ОК</h1><p>Closing in a sec</p>").delay(1000);
                        $("#modal").overlay().close();

                    }
                });

jQuery $.ajax() executed twice?

4 Answers4

Linked