How to send downlink to HTTP Integration from jQuery?

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");
      }
    });
    }
    });
  });

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:

1 Like

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");
      }
    });
    }
    });
  });

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.

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

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.

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

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");
      }
    });
    }
    });
  });

I’ve merged your new topic into this one. It was the 3rd topic you started about this, and you also posted it to an unrelated other topic and asked for help in a private message. Please stop doing that! Instead, next time when you have new details about the same problem then add those details to your existing posts, and respond to debug questions that people ask you. Thanks.

This new detail 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.

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?

Have you already read the other topic?

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.

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.

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.

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:

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

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