Reputation: 18861

What's wrong with this jQuery AJAX callback?

I am creating front-end to mobile webapp, but I don't want to use backend language yet.

It will be restful
I am mocking JSONs. When I want to check if person is valid, I will use address like "check/123"
I have created folders at my filesystem that mock restful links and files that mock JSON response. So I have directory called "check" and inside file "123" with following contents:

{"exists": "yes"}

Now, here's my whole page so you can reproduce the problem, which is that it always alerts error:

<!DOCTYPE html>
<html>
<head>
    <!-- meta info -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <!-- .js files -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
</head>

<body>
    <div data-role="content"> 
        <form id="form_check_person">
            <div data-role="fieldcontain">
                <input type="text" id="person_id" name="person_id" value="" />
            </div>
            <div data-role="fieldcontain">
                <input type="submit" value="Check me" />
            </div>
        </form>
        <script type="text/javascript">
            $("#form_check_person").submit(function() { 
                $.ajax({ 
                    url: "check/" + $("person_id"),
                    type: "GET",
                    dataType: "json",

                    success: function() {
                        alert('success');
                    },

                    error: function() {
                        alert('error');
                    }
                });
            });
        </script> 
    </div>
</body>
</html>

edit:

I've add .val() to #{'#person_id'} and still getting error :/

Upvotes: 0

Answers (4)

Greg Pettit

Reputation: 10830

Error function is always called due to an error in the request itself (for example a client-side 404 page not found or server-side 503 service unavailable).

I suspect a dodgy URL.

Try building the URL variable outside of the Ajax call ( var theLink = "check/" + $("#person_id").val() ). Check it in debugger or with console.log to confirm it. Check that the URL is actually available. Then in your Ajax call pass "theLink" to the url parameter.

Still not working? Some follow-up questions:

Does #person_id have a value attribute, or is an element that you must use .html() or .text() instead of .val() to get your "value"?

The name "person_id" in general sounds like a reusable element to me. Ie. without seeing the rest of your application, I can imagine that there are multiple people. That being the case, are you sure that an ID is being properly used? Should it be a class instead? In general, are you selecting the expected element?

Is the directory "check" one level deep from the current page, or does it need to originate at root?

Also, is the JSON being sent with appropriate encoding? What does the response look like?

What does the JavaScript console report? If no errors, what does the "response" to the GET look like? Is there a JSON tab available (which would confirm it has been accepted as JSON).

There are so many variables at stake... a live example would be wonderful. ;-)

Upvotes: 1