Only a single request can be made with iron-request

I'm currently working with the Polymer 2 library and facing an issue when making multiple requests using iron-request. It seems that only the first request, which is a POST request, gets initiated successfully. Subsequent requests appear to be ignored, even if the data being sent to the server is different from the initial request.

To illustrate this problem, I have created a small example on Plunker: https://plnkr.co/edit/cozVKUdQ2q2SV46rcCTL?p=preview

In this example, I've set up an iron-request element and a button element to trigger the request like so:

<paper-button on-click="save" class="green">Send</paper-button>
...
<iron-request id="xhr"></iron-request>

The save function captures text input from a textarea and sends it to the server:

save() {
    var response = this.$.xhr.send({
      url: "https://httpbin.org/post",
      headers: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      body: {
        content: this.inputdata
      },
      method: "POST"
    });
    var poly = this;
    this.$.xhr.completes.then(function(data) {
      console.log("finished");
      poly.$.responsetext.innerHTML = data.response;
    })

The specific code causing the issue can be found in the "element1.html" file. If you attempt to send different text payloads, you'll notice that only the initial request goes through (as seen by the unchanged "content" field in the response).

Any insights into what might be causing this behavior? My current thought is that I may need to create new iron-request elements for each new request, but that doesn't seem like the most elegant solution.

Answer №1

It seems that the iron-request element is designed specifically for sending a single HTTP request. After examining its implementation, I discovered that the send method will simply return null and not take any action if the current status of the request is greater than 0, which typically happens after it has been used.

While creating a new iron-request element for each request is an option, as you mentioned, it may not be the most elegant solution. An alternative approach would be to utilize iron-ajax. Detailed instructions can be found on the documentation page.

Your existing <iron-request> code could be refactored like this:

<iron-ajax id="xhr" url="https://httpbin.org/post" content-type="application/x-www-form-urlencoded" method="POST" body="[[inputdata]]" on-response="onXhrSuccess"></iron-ajax>

In your save function,

save() {
    this.$.xhr.generateRequest();
}

onXhrSuccess(event, request) {
    console.log("finished");
    poly.$.responsetext.innerHTML = event.detail.response;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to accomplish a task prior to form submission without relying on preventDefault

How can I perform an action before form submission without using e.preventDefault();? I am faced with a situation where I have two form buttons and need to set a hidden field value before submitting the form. In my Symfony2 framework, when I submit the fo ...

I am experiencing an issue with FreeTextBox where a Javascript error is causing problems with the Post

I encountered an issue on my webpage where I have three FreeTextBox controls. Everything was working fine until I added a DropDownList control that needed to PostBack to the server. Surprisingly, the OnSelectedIndexChanged event did not trigger when using ...

We encountered a network issue when attempting to transmit your login details

Upon attempting to login to my cpanel, I encountered this error for the first time. Despite having a stable internet connection for all other browsing activities. Surprisingly, my FTP was successfully connected to the server but login still proved to be u ...

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

Ways to position a navigation item on the right side of a navigation bar

Seeking guidance on how to align my navigation items in a specific position. I would like my brand name to appear on the left side and the login button on the right end of the navbar. As a newcomer to bootstrap, I am in need of assistance with this issue. ...

Tips on how to stop jQuery DataTable tools from being redrawn following a page reload

While using jQuery DataTable, I have encountered an issue with the tools such as filter and checkbox. Every time I call table.ajax.reload(), all the tools are rendered again on the callback of the AJAX request, causing the checkbox values to not be retai ...

I need help with this Jquery code - trying to target an element with a specific attribute value. What am I missing here?

I am attempting to selectively add a border around the .L1Cell element where the attribute name parent is equal to Workstation. However, it appears to be applying the border to all .L1Cell elements. Here is the link to the JSFIDDLE $(document).ready(func ...

JavaScript Game Timer

I am working on a countdown timer where I have set the variable seconds to 10. If the seconds reach zero, I want to add 2 seconds to it and stop the program from looping. Can someone please assist me with this? var isWaiting = false; var isRunning = fal ...

Storing a function in local storage using Javascript

Is there a way to save this information in local storage, or is there an alternative method for storing it? $('#pass_to_score').on('click',function(){ var compressed = function(){ $('.whole_wrap_of_editcriteria').css(&ap ...

What is preventing my PHP script from utilizing the checkbox data to cycle through the switch statement?

I am working on a website that utilizes php for rendering modules on the page. Currently, the site displays all modules if the user is logged in and only a select few if not. I am trying to implement a feature where users can filter out modules using check ...

Leverage $httpBackend to simulate $http requests and modify the anticipated URL within Angular framework

My current task involves testing a service that utilizes $http var APIClient = function($http) { this.send = function(data) { $http({ method: data.method, url: data.url, headers: data.headers, ...

I am having trouble resolving 'otp-input-react' in my project directory at D:projectappsrc

I have been troubleshooting this issue but haven't been able to find a solution yet. I even tried uninstalling and reinstalling the package, but it still isn't working as expected. Here are some images for better clarity: https://i.stack.imgur.c ...

Strip away all HTML attributes within a string

I am in the process of developing an internal tool that allows a designer to input exported svg code into a text area and have the html code displayed in a syntax highlighter () When they paste their code like this <svg xmlns="http://www.w3.org/20 ...

Recurring problem with Jquery ajax: constant undefined result value

I am completely new to utilizing ajax and jquery's ajax wrapper function. My objective is to fetch json data from an API and then add the result to the html of a website that I am constructing. Here is the code snippet: $.ajax({ type : 'GET ...

Discovering the completion of a web service using Selenium Webdriver

When using Selenium WebDriver for automation, I have found a way to intelligently verify when a web page document finishes loading by utilizing IJavaScriptExecutor.ExecuteScript() with WebDriverWait(). I start by waiting for the document to indicate that ...

Is AJAX the key to securing Paypal Payflow Transparent Redirect with SecureToken?

Currently, I am developing a C# MVC application within the VS2012 Framework 4.5 to ensure PCI compliance using Payflow Pro from PayPal (https://pilot-payflowpro.paypal.com). We have been utilizing PayflowPro for an extended period, and this is the tool we ...

Nuxt template failing to render properly

I'm new to Nuxt.js and I'm struggling to render the template on my localhost. Is there an issue with my code? <template> <div> <h1>Hello, World!</h1> </div> </template> <script> export default { ...

Variety in Fashion

Recently, I came across a website where the html5 range input was styled with a customized handle. Is there a way to achieve this using CSS3 properties, or would it be better to create an image overlay and manage it with JavaScript? ...

Utilize AJAX in conjunction with PHP to implement form validation

Currently, I am creating a website utilizing php and mysql. The registration page has been successfully implemented in php. However, I am interested in enhancing the page's interactivity by incorporating ajax functionality. Specifically, I would like ...

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...