How do I POST from javascript then update with the post response?

Question

I have a job which runs on iron.io that runs when a payload is POSTed to it.

This job then returns a text string.

I would like to have a text field where the user can type some text, POST it to that URL, and then the text area is updated with both the originally typed text and the response from the worker.

How do I begin to break down this problem?

It is kinda-sorta similar to using Jquery in Rails with a respond_to method (basically Ajax I think), but I'm not using Rails. I think this could all be done with the appropraite javascript on the front-end and I am using Ruby for the worker file.

I read through this post: How do I return the response from an asynchronous call? but I think I'm not clear specifically what to do, especially on the worker side.

Answer 1

but I'm not using Rails.

What are you using?

I'm not clear specifically what to do, especially on the worker side.

Something on the server side has to send a response containing the data when it receives a request. As far as I can tell, iron.io is a way to offload jobs that your server side application doesn't want to spend resources doing itself. So there must be a way for your server side application to ask an iron.io worker for its results. When your server side application gets the results, your application has to return a response.

How do I begin to break down this problem?

On the client side, it's pretty simple with jQuery. Presumably the user clicks a button when they are done typing in the text field?

1) Use jQuery to put an onclick event handler on the button:

$( "#button_id" ).click(function() {
  //Additional code goes here
});

2) Obtain the text of the text field, e.g.

var original_text = document.getElementById("texfield1").value;

3) Send an ajax request to the url.
4) In the success ajax function, add #1 to the string returned by the response.
5) Insert the combined text in the text field.

$.post( "http://www.somesite.com", function(response) {
    $( "#textfield1" ).val( original_text + response );
}

5) Possibly cancel the submit (if it's a submit button)

$( "#button_id" ).submit(function( event ) {

  //Additional code goes here

  event.preventDefault();
});

Answer 2

You cannot send post request to external URLs with java scripts. Browsers don't allow it due to security reasons (to prevent CSRF attacks).

Eg: if your site url is "www.yoursitename.com" then you can send ajax post requests to "yoursitename.com/XXX/YYY..." but you cannot send post request to "iron.io/XXX/YYY...". Browsers don't allow the second one.

You have to implement some back end code for this. Let the back end code to send post request and to forward the response received by "iron.io". Then your ajax call can be sent to the back end of your server (local). Receive response from your server and update the text. Your back end code works like a sort of connector here.