Ajax not being called

Question

I wrote a little form in HTML with three textboxes. The idea is to create a "Contact me" form that is going to use the information submitted, by NodeMailer. However, my ajax function is not being called. To be more specific, the info is not being sent to "/time" where the NodeMailer is. Any "pointers" Thanks in advance! Heres my JS file:

$(document).ready(function(){
    $("#send").click(function(e){ 

        var name = $('input#name').val();
        var email = $('input#email').val();
        var message = $('textarea#message').val();

        $.ajax({
            url: "/time",
            type: "POST",
            dataType: 'json',
            data: {
                name: name,
                email: email,
                message: message
            },
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            }
        })

    }); 

});

Is your click handler called? Please do some basic debugging. — Bergi, Feb 20 '15 at 00:38
any error in your browser console? add an alert/logging statement in the click handler to see whether that is getting called — Arun P Johny, Feb 20 '15 at 00:39
I'd suggest you look in the network tab of your browser and see exactly what request is being sent. If you see the appropriate request being sent there, then you need to do some elemental debugging on your server to see what is arriving there and why your server isn't directing that request to your code. Your client code looks fine for sending a request unless there is some script error stopping it from executing. If no client-side errors, then you will need to look server-side and you disclose none of that to use so we can't help with that. — jfriend00, Feb 20 '15 at 00:47
Have you checked the Network tab of DevTools, like jfriend00 suggested? — Barmar, Feb 20 '15 at 01:36
In the Network tab, when you select the AJAX call, there should be sub-tab labeled `Response`. — Barmar, Feb 20 '15 at 01:54
@Barmar First of all, I had so many bugs here and there that I have been fixing thanks to the Chrome Dev tool. Honestly, I've never used it before. And I think I've found the error; "Name: time, Method: POST, status: 404, type: text/html, initiator: jquery-1.11.0.min.js:4" — Santiago, Feb 20 '15 at 02:46
So there's no script named `/time`. You need to fix the URL to point the the correct script name. — Barmar, Feb 20 '15 at 02:53
@Barmar That seems to be the problem! However, I am trying to call the app.get from the app.js so that Nodemailer can send the email.... so in app.js/time i have : app.get('/time', function (req, res) { console.log(req.body.email); }); — Santiago, Feb 20 '15 at 13:56
Since you have `/` at the beginning of the URL, it's an absolute path, not a relative path. So it's looking or `/time`, not `/app.js/time`. If you change it to a relative path, remember that it's interpreted relative to the location of the HTML page that's executing it, not the `.js` file that the script was loaded from. — Barmar, Feb 20 '15 at 13:59
@Barmar Right! that is why I have "url: "/time"" in the $.ajax. Do you mean that I should put "url: "http://localhost:3000/time"" in order for it to work in my local host? — Santiago, Feb 20 '15 at 14:17

score 0 · Accepted Answer · answered Feb 20 '15 at 00:38

0

Try a specific filename instead of a folder. ie;

url: "/time/index.html",

Include any errors from the Dev Console (F12 in Browser) to helps us help you.

answered Feb 20 '15 at 00:38

TommyRay

131
8

How is this any more than just a wild guess? – jfriend00 Feb 20 '15 at 00:53
GET http://localhost:3000/stylesheets/grayscale.css this is the only error I get. @TommyRay – Santiago Feb 20 '15 at 01:21

score 0 · Answer 2 · answered Feb 20 '15 at 00:40

0

You are missing a couple of things here -

1) Add a contentType: "application/json" to the ajax options.

2) Stringify your JSON:

  data: JSON.stringify({
            name: name,
            email: email,
            message: message
        }),

Also, just double check if parameters of your /time method are name, email and message respectively.

answered Feb 20 '15 at 00:40

Sam

4,302
12
40
74

jQuery will stringify the data for you automatically. You don't have to do that manually. And, why do you think `contentType` needs to be set? – jfriend00 Feb 20 '15 at 00:44
@jfriend00 jQuery will use `x-www-form-urlencoded` format, not JSON, for the parameters. – Barmar Feb 20 '15 at 00:47
@Barmar - Yeah, but the OP isn't claiming that the request arrives, but the data is in the wrong format. The OP is claiming that the request doesn't arrive on the server, so the main issue here is likely something else besides this. Unless there's an error server-side that the OP isn't telling us about. Overall, just way too little information about the problem or debugging steps taken to do much with this question. – jfriend00 Feb 20 '15 at 00:48
@Sam What makes you think the server expects the data in JSON format? x-www-form-urlencoded is the normal format for POST data. – Barmar Feb 20 '15 at 00:49
As there is very little information to work with, most certainly the request sent is not matching with the method signature. Most of the time this is the case. Can answer better if OP could shed more light. – Sam Feb 20 '15 at 01:07
app.get('/time', function (req, res) { console.log(req.body.email); }); – Santiago Feb 20 '15 at 01:22

Ajax not being called

2 Answers2

Linked