Response.send open in a new page

Hello,

I’m a new to IMP and I’m trying to setup a web page to turn on an LED when I submit a post, all works great, but when the code resp.send(200, “OK”); in the agent side runs, the “OK” response is displayed in a new blank page. I tried the target attribute for the form and keeps doing it. Does anybody know how can I make the OK response to be displayed in the same page where I have the form? Do I need to handle it in a php file?

Thank you

Webpage:
`


<form action=“https://agent.electricimp.com/abc123xyz” method=“post”>



`

Agent:
http.onrequest(function(req, resp){ server.log("Got a request"); if (req.method == "POST"){ local body = http.urldecode(req.body) server.log(body.data); } resp.send(200, "OK"); });

Edit: Wrapped your code in a < code > </ code > tag.

@juanh64 - What you are trying to do is called ajax. Ajax is a method in which you submit a form, or otherwise make a web request to a server (in this case your agent), and only reload part of the page. I don’t think we have any documentation about AJAX right now, so here we go (also worth noting that we have a task in our todo list to make a good ajax primer for Electric Imp)!

(If you just want the solution… skip to the VERY END, which has modified agent + HTML code for you to use).

The first thing you’ll need to do is add a new element in your HTML for the response to be displayed in. Add the following after your form:

<span id="response"></span>

I like to use a Javascript framework called jQuery, since it’s free, and simplifies pretty much everything about Javascript and working with the DOM (the elements on your webpage). To include jQuery, we need to add the following line to your HTML’s head:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>

Next, we’re going to rejigger your HTML to make it a bit easier to work with. We’re going to remove the form, and change the “submit” element to a “button” element. At this point, your HTML should look like this (don’t worry, we’re almost done):

`






Submit





`

You’ll notice we did a couple extra things in here as well: We added an “id” attribute to the text input, this will make it easier for us to find it with jQuery. We wrapped the input form, and the span in separate “p” tags, this will just give them a bit more space on the page. And finally, along with changing the submit element to a button element, we added an ‘onclick’ event - this function will be fired whenever the button is clicked.

So the last thing we need to do is create a our “sendToAgent” javascript function. This is where the jQuery comes in handy. We’re going to add the following right below the script tag for jQuery (in line comments explain what’s going on):

<script> function sendToAgent() { // grab the data var data = $("#data")[0].value; // make an ajax request $.ajax({ // where we're sending the data to url: "https://agent.electricimp.com/abc123...", // the data we're sending data: "data="+data, // what method we're using method: 'POST', success: function(response) { // if the request was successful, change the response span to say success $("#response").html("Success - sent data to agent"); }, error: function (request, status, error) { // if the request failed, change the response span to say what went wrong logError('Whoops!', request.responseText, false); $("#response").html("ERROR - " + request.responseText); } }); } </script>

Finally (I promise), we need to add an extra header to the agent’s http response to let your webpage know that AJAX requests to the agent are ok:

http.onrequest(function(req, resp){ server.log("Got a request"); if (req.method == "POST"){ local body = http.urldecode(req.body) server.log(body.data); } resp.header("Access-Control-Allow-Origin", "*"); resp.send(200, "OK"); });

So with ALL of these changes your http.onrequest() function should like above, and your HTML should look like the following:

`







Submit





`

If you don’t want to display the “response”, you can use PHP CURL to post values to the agent (thus going to the Imp).

I always use PHP CURL because I don’t want people seeing my Imp URL in the HTML source code. If you look at your webpage and view HTML, you’ll be able to see your IMP URL. That’s a big problem.

In the example below, you POST variables to the PHP script, which sends data to the agent.

I usually use javascripting (JQuery) to POST values to the PHP as beardedinventor mentioned.

Instead of this …
url: “https://agent.electricimp.com/abc123def456

You would do this …
url: “send.php”

This is the PHP script called “send.php”:

`

<?php // get POST values ... and you can post more than 1 variable if you wish. if($_POST['data']){ $v1=$_POST['data']; } $url = 'https://agent.electricimp.com/g4NceFna6Y9w/'; $fields = array( 'data'=>$v1 ); foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; } rtrim($fields_string,'&'); $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_POST,count($fields)); curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string); curl_setopt($ch, CURLOPT_RETURNTRANSFER, false); $result = curl_exec($ch); curl_close($ch); // if you expect this script to send something back to JQuery, do this ... // echo "SENT"; ?>

`

Thank you very much bearded inventor and mlseim for your detail response, and for sharing the code. It all makes a lot of sense, I will give it a try.
Cheers
J

thank your for this post! just 1 line made my ajax response from the agent to my website work!: resp.header(“Access-Control-Allow-Origin”, “*”);