JavaScript AJAX POST, not so simple

Question

I will share my half written/half pseudo code in hopes that someone will help me fill in the pieces.

I have a div named results. When a click is made inside of the results div, I need to send a POST request to update a table row in my DB.

$(function() {
    $("body").click(function(e) {
        if (e.target.id == "results" || $(e.target).parents("#results").size()) { 
           // add timer clicks must be at least 15 seconds apart or do not POST
          // a click was made in the results div, record click to record in db
          ajax_post();
        } 
    });
})

This code appears to work, however, I am getting a warning alert *event.returnValue is deprecated. Please use the standard event.preventDefault() instead. *

Moving on, my ajax_post function seems to NOT be functioning.

function ajax_post(){
    var x = new XMLHttpRequest();
    var url = "tq/--record-events.inc.php";
    var session = //get session information from cookie
    var data = "ClickCount="+1+"&SessionId="+session;
    x.open("POST", url, true);
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    x.send(data);
}

Once I get the vars to POST to my php script - I can take it from there, just having a little bit of trouble getting there. I appreciate the help. Thank you.

Out of curiosity, why are you not using `jQuery.ajax`? And how exactly do you determine that the request doesn't work? What happens instead? — Felix Kling, Nov 20 '13 at 06:12
I'm new to developing. PHP>JS>jQuery. I find jQuery somewhat confusing. Nothing happens when I run the code. I have it modified here. On my end I have it set to `return_data = x.responseText` — MrPizzaFace, Nov 20 '13 at 06:18
I would still suggest that you stick to jquery. At this point things are more difficult with js than jquery. Specially when it comes to cross browser compatibility, neatness and length of code that you have to write. — Varun Jain, Nov 20 '13 at 06:21
Maybe you have to read this: [How to return the response from an AJAX call?](http://stackoverflow.com/q/14220321/218196). — Felix Kling, Nov 20 '13 at 06:37

Joshua Wilson · Answer 1 · 2013-11-20T06:41:32.167

0

Try something like this. You can read more about jQuery.ajax() here.

$(function() {
    $("#results").click(function(e) {
        // add timer clicks must be at least 15 seconds apart or do not POST
        // a click was made in the results div, record click to record in db


        // Assign handlers immediately after making the request,
        // and remember the jqXHR object for this request
        var jqxhr = $.ajax( "example.php" )
            url: 'tq/--record-events.inc.php',
            contentType: "application/json",
            dataType: "json",
            data: yourData,
            type: "POST"
        }).done(function(data, textStatus, jqXHR) {
            //Do your thing here.
        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert( "error" );
        }).always(function() {
            alert( "complete" );
        });
    });
})

edited Nov 20 '13 at 06:41

answered Nov 20 '13 at 06:29

Joshua Wilson

2,546
1
20
28

*"Try this ``"* postings are rarely good answers, because they don't explain anything. Regarding your specific answer, making yet another Ajax call via the undefined `x` variable looks wrong. Maybe you just forgot to remove that part? – Felix Kling Nov 20 '13 at 06:39
Admittedly I am new to posting on SO, thanks for the critique. I included his code there just as a pointer for him, but I see your point that if it doesn't actually work then don't show it. As for your comment on the "Try this code", what is a better way to answer it? Just point to the docs? Or just post generic code? Or something else? – Joshua Wilson Nov 20 '13 at 06:45
In general I would say the ideal answer would include an explanation why the existing "solution" doesn't work as expected/intended. Of course this only applies if the OP actually tried something on their. Then I'd present a solution and explain its advantages and disadvantages. Having said that, that's solemnly my personal opinion and it really isn't always applicable. I just think that posts which actually *explain* something are more useful the OP and anyone else who reads the post. Regarding this specific question, I'd find it hard to give an answer at all because the only information [...] – Felix Kling Nov 20 '13 at 07:04
[...] we have is that the Ajax call is not "working". We don't know if the request is made but fails on the server side, or if it only *seems* that it does "not work" because nothing is done with the response. Of course your code might solve the problem, but we would still not know what the issue actually was. – Felix Kling Nov 20 '13 at 07:05
You're welcome! I actually didn't want to sound that critical, it's rather an advice for the future :) Happy coding! – Felix Kling Nov 20 '13 at 07:09

JavaScript AJAX POST, not so simple

1 Answers1