How to return a string in Ajax success function

Question

I want to return a string after my ajax code is executed. This is how my code looks like in my html:

<script>
    (function($){
        $('#form').submit(function(event){
            var formData = new FormData($("#form")[0]);
            event.preventDefault();
            $.ajax({
                url: "/transform",
                type: "POST",
                data: formData,
                success: function(data){
                    data
                },
            });     
        });
    });(jQuery);
</script>

Basically what I want is to desplay the string that the method/transform will return once it finished, something like "Done!", I want to see this message in localhost:5000, not in the console.

To execute my code I access to localhost:5000, however, when the message returned by /transform is displayed the url is localhost:5000/transform what makes me think ajax is not working.

For what I have read, by using Ajax my code is being executed asynchronously, therefore it can't automatically access to the return of /transform. I have read about callbacks but still I don't get how can I use it, I am very new to this (I started yesterday and it is my first time using both html and js).

I also checked this question and answer How do I return the response from an asynchronous call? but still I can't see how can insert in my code the callback they are talking about.

Is there a way to do it?

This is the html I am using:

<html>
<body>
    {% block content %}{% endblock %}
    <div class="container">
    <div class="col-md-6 center">
        <div class="panel panel-default">
                <div class="panel-body">
                <form accept-charset="UTF-8" role="form" action="/transform" method="post" enctype="multipart/form-data" id="form" >        
                    <div class="panel-heading">

                        <h3 class="panel-title" style="text-align:center">Select a file</h3>
                    </div>
                    <fieldset>
                        <div class="form-group">
                        <input class="form-control" type="file" name="data_file" />
                    </div>
                    <input class="btn btn-lg btn-success btn-block" type="submit" name="submit" id="submit" value="Submit" placeholder="submit"/>
                </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

You can just replace `data` inside the `success` callback with `console.log(data)` if you just want to see the response in the console. Also the `;` before `(jQuery)` will cause a syntax error, so you should remove that. — Robin Zigmond, Nov 07 '18 at 17:54
I want to see it in the browser, so ``console.log(data)`` won't work for me. — Marisa, Nov 07 '18 at 17:55
You'll have to update the DOM to do this inside your success function, e.g. `$('h1').text(data.valueYouWantToAdd)` or something like this. We'd have to see your HTML to help with the selector. Plus, it would be helpful if you also mentioned where you and what you would like displayed. — Tim Rooke, Nov 07 '18 at 17:57
@Marisa You see console.log output in your dev tools in the browser (F12 in most browser) - really handy for debugging. You'll also see if your pages reloads there, in the network tab (if you are using chrome) — Fitzi, Nov 07 '18 at 17:59
@Marisa As an example you could have: ```success: function(data) { $('.panel-title').text('This is a string!'); }```. This would select the element with a class of `panel-title` in your HTML and set its text value to `'This is a string!'`, but you could pass it any string, — Tim Rooke, Nov 07 '18 at 18:07
@TimRooke isn't there a way to access the data given by ``/transform`` (a string) and write this string, instead of writing a specific one? — Marisa, Nov 07 '18 at 18:09
@Marisa Try: `success: function(data) { $('.panel-title').text(JSON.stringify(data)); }` — Tim Rooke, Nov 07 '18 at 18:10

score 0 · Answer 1 · answered Nov 07 '18 at 18:15

0

First of all, like Robin Zigmond commented, you have an syntax error in your script, which prevents it from working. So your concerns if your script is beeing executed were right. The last line of your script should look like this

})(jQuery);

(semicolon removed between closing and opening paranthesis)

You'll note such things in your developer console (F12 in most browser), as I already mentioned in the comments. You will also see console.log output there, which is really handy for debugging javascript.

Secondly, in order to display your response, you can do something like this

success: function(data) { 
    $('#form').prepend( "<p>" + data + "</p>" );
}

answered Nov 07 '18 at 18:15

Fitzi

1,641
11
17

if I delete the ``;`` the submit bottom is not redirecting me to the transform method. I have no clue why. – Marisa Nov 07 '18 at 18:19
@Marisa That's because you added event.preventDefault(), which prevents the form from actually beeing submitted (causing the browser to reload). – Fitzi Nov 07 '18 at 18:22
I am working now, but shouldn't I close the connection of the event? – Marisa Nov 07 '18 at 18:29
@Marisa I'm not sure which connection you mean. If you refer to the connection of the request, then you don't need to worry about anything as your browser manages the actuall connection for you. – Fitzi Nov 07 '18 at 18:33
I tried to do it as you suggest but still I am seeing in the webpage the url (``localhost:5000/transform``) instead of just ``localhost:5000`` with the message that transform is returning. – Marisa Nov 07 '18 at 18:34
No, everything is executed correctly and the program does what it is expected to do with the exception of that... – Marisa Nov 07 '18 at 18:36
where did you put your javascript? At the bottom of your page or in your header? – Fitzi Nov 07 '18 at 18:37
At the bottom, after
and
– Marisa Nov 07 '18 at 18:38
That's definitely an invalid position as nothing is allowed outside the html tags. Try placing it BEFORE your closing body-tag. I don't think that's the problem though. Can you put your entire solution in a jsFiddle, as its really hard to guess the problem – Fitzi Nov 07 '18 at 18:39
So should it be at the bottom before the – Marisa Nov 07 '18 at 18:39
Sorry, I edited my last commet. (Hit the enter key a little to early) Please refer to my previous comment. – Fitzi Nov 07 '18 at 18:41
Can you set up a jsFiddle ( https://jsfiddle.net ) of your current work? – Fitzi Nov 08 '18 at 11:41

score 0 · Answer 2 · answered Nov 07 '18 at 18:15

Depending on what your goals are this is probably not what you want for your long term solution, but given that you're just starting out I think it will be good to see how this works.

Assuming you are getting data back without any issues you can display it in the DOM using jQuery as the go-between. For example, you can add <div id="confirmationMessage"></div> wherever you would like to show the message in your HTML. You can then use jQuery to put the text into the DOM as follows:

success: function(data) { 
    $('#confirmationMessage').text(data)
}

How to return a string in Ajax success function

2 Answers2