How to send downlink to HTTP Integration from jQuery?

gcobani2019 · December 12, 2019, 12:18pm

Hi Team

I have a channel on my thingspeak 'button-state, i created native plugin to this channel. I want to find a way where i can use Jquery button to communicate with my thingsnetwork. I have the following i attempted, but i am getting 404 NOT found if i do POST method.

<!-----Toggle switch button On/Off.  --->
<div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
    <button type="button" class="btn btn-danger locked_active">OFF</button>
    <button type="button" class="btn btn-success unlocked_inactive">ON</button>
  </div> 
  <div class="alert alert-danger" id="switch_status">Switched off.</div>
</div>

 $(document).ready(function() {
    $('#toggle_event_editing button').click(function(){
      if($(this).hasClass('locked_active')) {
      $('#switch_status').html('Switched off');
        $.ajax({
          url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph<redacted>VyA0',
          type:'POST',
          data:{
          format:'text',
            device_id:'mkr1300',
            payload_raw:'AAA'
          },
         success:function(response){
         alert(response);
          },
         error:function() {
           $('#error').text("There was an error while processing your request. Please try again");
          }
        });
}else{
    $('#switch_status').html('Switched on.');
    $.ajax({
      url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph<redacted>VyA0',
      type:'POST',
      data:{
        format:'text',
        device_id:'mkr1300',
        payload_raw:'AAE'
      },
      success:function(response) {
      alert(response);
      },
      error:function() {
      $('#error').text("There was an error while processing your request.Please try again");
      }
    });
    }
    });
  });

arjanvanb · December 13, 2019, 11:07am

A 404 Not Found is typically returned when the URL is wrong, or when the given resource is not found in some database. For the HTTP Integration, the URL you’re using seems okay, so you’d need to check and double-check the application ID, the process ID and the device ID.

Now, looking at your payload, it says:

That attribute name device_id is wrong; that should read dev_id. It seems you already corrected that, given the following from another ~~closed~~ deleted topic:

But did you indeed change that in your jQuery code as well?

Also, are you sure that the process ID that you entered in the HTTP Integration (and which is part of the URL) matches the device ID (as part of the POST message)? The integration works for all devices in the application, so using a process ID that matches a single device’s name might not make a lot of sense, and surely is confusing.

And some asides:

Beware that you cannot send too many downlinks per day; see Fair Use Policy explained
Beware that you should not expose your ?key=... in a public website (but I guess you’ll use this on some website that only you can access).

gcobani2019 · December 13, 2019, 12:53pm

Hi arjanvanb

Here is my logic for my Jquery code to send a request to my things network.

<!-----Toggle switch button On/Off.
     --->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-danger" id="switch_status">Switched off.</div>
  </div>
 <br/> 

$(document).ready(function() {
    $('#toggle_event_editing button').click(function(){
      if($(this).hasClass('locked_active')) {
      $('#switch_status').html('Switched off');
        var makers = [{"dev_id":"mkr1300", "payload_raw":"AAA"}];
        $.ajax({
          url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph<redacted>yA0',
          type:'POST',
          data:JSON.stringify({Makers:makers}),
          contentType: "application/json; charset=utf-8",
          dataType:"json",
         success:function(response){
         alert(response);
          },
         error:function() {
           $('#error').text("There was an error while processing your request. Please try again");
          }
        }); 
        
    }else{
    $('#switch_status').html('Switched on.');
      var makers = [{"dev_id":"mkr1300", "payload_raw": "AAE"}];
    $.ajax({
      url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6<redacted>A0',
      type:'POST',
      data:JSON.stringify({Makers:makers}),
      contentType:"application/json; charset=utf-8",
      dataType:"json",
      success:function(response) {
      alert(response);
      },
      error:function() {
      $('#error').text("There was an error while processing your request.Please try again");
      }
    });
    }
    });
  });

arjanvanb · December 13, 2019, 3:13pm

Please see How do I format my forum post? [HowTo]

Also, please provide references or explanations on the changes you made. Without knowing why you did it, data:JSON.stringify({Makers:makers}) makes no sense: where is Makers in {Makers:makers} coming from? And: what is the result of your new code? And above all: why don’t you respond to the questions I asked in my earlier answer?

I’d say that your first example was better, except for the errors that I pointed out in my first answer.

gcobani2019 · December 16, 2019, 2:01pm

The processID i believe is different that my device ID. this is download link. I hope i am answering your question.

arjanvanb · December 16, 2019, 2:46pm

Errr, it took you 3 days to answer “i believe”…? Investigate, please! If it’s different, then the URL in your jQuery code is wrong. In that code, the process ID in the URL is the same as the dev_id in the JSON data, so you need to make sure they match what you see in TTN Console.

Well, no:

Success; I’m going to ignore this very topic but maybe someone else wants to help you if you provide much more details.

gcobani2019 · December 16, 2019, 5:37pm

Hi

i am getting now 404 Not found. Here is revised code below for my Jquery code.

$(document).ready(function() {
$(’#toggle_event_editing button’).click(function(){
if($(this).hasClass(‘locked_active’)) {
$(’#switch_status’).html(‘Switched off’);
$.ajax({
url:‘https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6lBffU7wI9cLY5ljIhIb_I7sqH5EVvo5zs9uVyA0’,
type:‘POST’,
data:{
payload_raw: ‘AAA’,
dev_id:‘mkr1300’
},
success:function(response){
alert(response);
},
error:function() {
$(’#error’).text(“There was an error while processing your request. Please try again”);
}
});

What this code, i want to send a message to things network using ajax request, URL i have i got it from thingsnetwork after configured the application for lorawan device

gcobani2019 · December 17, 2019, 6:09am

Hi Team

I have tried to investigate and ways of fixing this error, basically i want to send message back to my things network tnn console, using Post method on my Jquery rest. Here is my error.

Access to XMLHttpRequest at ‘https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6lBffU7wI9cLY5ljIhIb_I7sqH5EVvo5zs9uVyA0’ from origin ‘https://thingspeak.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

jquery.js:9664 POST https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6lBffU7wI9cLY5ljIhIb_I7sqH5EVvo5zs9uVyA0 404 (Not Found)

 $(document).ready(function() {
    $('#toggle_event_editing ').click(function(){
      if($(this).hasClass('locked_active')) {
      $('#switch_status').html('Switched off');
        $.ajax({
          url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6lBffU7wI9cLY5ljIhIb_I7sqH5EVvo5zs9uVyA0',
          type:'POST',
          data:{
            payload_raw: 'AAA',
            dev_id:'mkr1300'
          },
         success:function(response){
         alert(response);
          },
         error:function() {
           $('#error').text("There was an error while processing your request. Please try again");
          }
        }); 

    }else{
    $('#switch_status').html('Switched on.');
    $.ajax({
      url:'https://integrations.thethingsnetwork.org/ttn-eu/api/v2/down/acts083_test/mkr1300?key=ttn-account-v2.7Ph6lBffU7wI9cLY5ljIhIb_I7sqH5EVvo5zs9uVyA0',
      type:'POST',
      data:{
        payload_raw:'AAE',
        dev_id:'mkr1300'
      },
      success:function(response) {
      alert(response);
      },
      error:function() {
      $('#error').text("There was an error while processing your request.Please try again");
      }
    });
    }
    });
  });

arjanvanb · December 17, 2019, 8:06am

This means you’re out of luck; it cannot be done. Your browser is requiring CORS security but TTN does not offer that.

See Integrations - Data Storage / API generates a CORS error when accessed from script running in my browser for the same problem with a different integration. In one of the answers you’ll read that TTN is not going to change this behaviour.

gcobani2019 · December 17, 2019, 8:16am

Hi arjanvanb

Thanks for raising this with me, which means i have to find a way around this on the things network console to allow such request to pass without security from the browser. As mentioned TTN does not offer such. There is nothing i can do on the client side?

arjanvanb · December 17, 2019, 8:17am

Have you already read the other topic?

gcobani2019 · December 17, 2019, 8:19am

Yes i did, but the major issue i had amongst, was this new one i just proposed today. I have amended my Jquery code and end up seeing the issue from the client side.

arjanvanb · December 17, 2019, 8:25am

I meant the topic (and the specific answer) I linked to in my last answer, Integrations - Data Storage / API generates a CORS error when accessed from script running in my browser.

That includes:

Whatever solution, it’s not specific to LoRaWAN or TTN.

gcobani2019 · December 17, 2019, 8:27am

Hi Mate

For the second topic proposed to use either AWS or Azure, we not unfortunately using those cloud mechanism for our proof of concept, we will consider them when we use major projects. For now using proof of concept to our client. I dont know as i am restricted.

arjanvanb · December 17, 2019, 8:49am

Anything that runs on some server will do. Even some PHP script can translate a GET into the proper POST including the secrets for the integration, and such server-side PHP script will not enforce CORS. Of course, anyone who would know the URL could invoke that, unless you come up with some security.

If you really cannot set up a server of your own (but then I wonder what value you have for your client), then something like this might help:

HTTP Integration: pass only payload_fields

If you don’t mind passing your data through on online service, you can use https://putsreq.com

And write 3 lines of code:
var parsedBody = JSON.parse(request.body);
request.body = parsedBody.payload_fields;
request.forwardTo = 'YOURURI';

(I’m not sure that allows for changing the HTTP method, using something like request.request_method = 'POST'. See its examples.)

gcobani2019 · December 17, 2019, 9:55am

Hi Mate

Correct me something, if i had to try to use putsreq as my own server to test my Jquery. First DSN is from the site itself. While if i am passing my post method using my own. I am getting 500 status message. “Internal Server Error” XMLHttRequest is not defined" https://putsreq.com/agT2991XWmifYEvy20Uy/inspect