0

I'm not very fond to Javascript. I do backend with python mostly. This time I had no choice but to do javascript :P

I'm having a problem with an XMMHttpRequest response. I have this HTML

        <div>
        <h3>Drop in orders</h3>
        <hr>
        <button onclick="triggerScenario(this);"  class="btn btn-default" id="z-drop-sev1">
            <img src={{ url_for('static', filename='images/250.jpeg' ) }} class="img-responsive" alt="logo">
        </button>
        <button onclick="triggerScenario(this);"  class="btn btn-default" id="6-drop-sev1">
            <img src={{ url_for('static', filename='images/250.jpeg' ) }} class="img-responsive" alt="logo">
        </button>
        <button onclick="triggerScenario(this);"  class="btn btn-default" id="z-6-drop-sev1">
            <img src={{ url_for('static', filename='images/250.jpeg' ) }} class="img-responsive" alt="logo">
        </button>
    </div>

When the user clicks one of this buttons, this function gets called: 

function triggerScenario(clickedButton) {
var jiraEndpoint = "/api/jira/create/"+clickedButton.id;
var xmattersEndpoint = "/api/dmx/trigger/";
var zitEndpoint = "/api/zit/"+clickedButton.id+"/";
var ticket;
var id;

function createTicket() {
    var httpRequest = new XMLHttpRequest();

    var data = "{"+
           "\"project\": {"+
           "\"id\": 10150"+
           "},"+
           "\"issuetype\": {"+
           "\"name\": \"Incident\""+
           "},"+
           "\"priority\": {"+
           "\"name\": \"high\""+
           "}"+
        "}"

    var jsonData = JSON.parse(data);
    httpRequest.open('POST',jiraEndpoint);
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                var response = JSON.parse(this.responseText);
                ticket = response.number;
                //Here I see the value I need
                console.log(ticket)
                httpRequest = null;
                return ticket;
            }
        }
    };
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.send(data);

};
ticket = createTicket();
//This gives me "undefined"
console.log("Ticket: "+ticket);
//sendZit(ticket);
//triggerCall();

}

The problem is that the value for "ticket" its always undefined. If I log the value inside the function, it shows me what I need. Can anyone with more JS knowledge explain me what is going on here? Thanks in advance!

Agustin
  • 41
  • 7
  • Don't try to construct JSON by hand like that. Create an object, and use `JSON.stringify()` to convert it to JSON. – Barmar Sep 19 '16 at 00:00
  • 1
    See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call – Barmar Sep 19 '16 at 00:01
  • Hi Barmar! Tanks for taking a minute to reply. I read that answer and realized that I do not need an Asyc call here. So I changed this line to to httpRequest.open('POST',jiraEndpoint,true); The problem is still there. Also, is "httpRequest.onreadystatechange = function()" not a way to add a callback function? – Agustin Sep 19 '16 at 00:12
  • 1
    Synchronous XMLHttpRequest is deprecated, you shouldn't use it. Learn to use async code properly. But even if you use it, returning from the callback function doesn't return from the main function. Put `return ticket` in the `createTicket` function after `httpRequest.send(data)`. – Barmar Sep 19 '16 at 00:18

0 Answers0