The iron-ajax web component has a timeout property, but after reading through the components code on GitHub I am not sure how to handle it.
<iron-ajax id="ajax"
handle-as="json"
last-response="{{response}}"
method="get"
timeout="5000"
url="https://api.domain.com/">
</iron-ajax>
Does it fire an event?
Is it observable?
How can I run a function when a request reaches its timeout limit?
The timeout property on iron-ajax is the number of milliseconds a request can take before automatically being terminated. As this timeout is an error the iron-ajax element will fire an error event which you can use to call a function when triggered. For instance:
<iron-ajax id="ajax"
handle-as="json"
last-response="{{response}}"
method="get"
timeout="5000"
url="https://api.domain.com/"
on-error="_showError">
</iron-ajax>
...
class MyElement extends Polymer.Element {
static get is() { return 'my-ele'; }
...
_showError(event, request) {
// display error message
}
}
Related
I use reCaptcha+validation jQuery plugin:
<script>
$('#contact_us-form').validate({
submitHandler: function(form) {
grecaptcha.execute(); //How to run this syncly?
$(form).ajaxSubmit({ ... }); // This request without token
}
});
</script>
<form>
...
<div class='g-recaptcha' ... />
</form>
This code almost works. Almost because execute is run async and response is come after ajaxSubmit submits form data.
The work around is to assign callback property for g-recaptcha and move ajaxSubmit into that callback:
var my_callback = function() {
$(form).ajaxSubmit({ ... });
}
<div class='g-recaptcha' data-callback='my_callback'/>
But this looks hairly. Furthermore the form variable is not available from my_callback thus I can not reuse this call back between similar forms.
Is there a way to execute synchronously?
I am trying to send data from the front-end to the back-end.
In Polymer I have
<paper-radio-group selected="{{radioSelected}}">
<paper-radio-button name="one">one</paper-radio-button>
<paper-radio-button name="two">two</paper-radio-button>
</paper-radio-group>
in the JavaScript:
radioSelected: {
observer: '_onSourceChanged'
},
_onSourceChanged: function (newValue, oldValue) {
console.log('New value is ' + newValue);
}
How should I construct an ajax call to connect with the backend?
Note that only the newValue is needed for the backend.
You can use the iron-ajax component, is very easy to use.
https://www.webcomponents.org/element/PolymerElements/iron-ajax
This code goes in the html container.
<iron-ajax
id="myRequestId"
url="http://myurl.com"
method="POST"
content-type="application/x-www-form-urlencoded"></iron-ajax>
This goes in any script function where you want to fire the post request.
this.$.myRequestId.body = JSON.stringify(myBodyParams);
this.$.myRequestId.generateRequest();
This iron-ajax should make a request only if an url-parameter named itemId exists. And that parameter should also be added to the request:
<iron-ajax auto="false"
url="/api/item"
params='{"id":"{{app.itemId}}"}'
handle-as="json"
on-response="loadItem"
debounce-duration="1000">
</iron-ajax>
With this example the (wrong) generated url is:
http://localhost:8080/api/item?id=%7B%7Bapp.childId%7D%7D
The route to display the element is set up like this:
page("/polymer/item", function() {
app.route = "itemform";
});
page("/polymer/item/:itemId", function(data) {
app.route = "itemform";
app.params = data.params;
});
The first problem is that you have a fundamental issue with how you provide the itemId in the parameter.
It cannot be within the string of the 'params' attribute. The best way to resolve that is to use a function: (this assumes the itemId is a value within the "app" template)
<template is="dom-bind" id="app">
<iron-ajax id="itemAPI"
url="/api/item"
params='{{createIdParam(itemId)}}'
handle-as="json"
on-response="loadItem"
debounce-duration="1000">
</iron-ajax>
</template>
<script>
app.createIdParam = function(id) { return {id:id}; }
</script>
The next issue is that it seems you do not want the iron-ajax to auto-request when the URL is set. Since the string "false" is truthy (weird, sure but true) it will make the request. Simply do not include the auto parameter, then use the following code (using the ajax changes my example above) to initiate the ajax request.
if (app.itemId)
document.querySelector("#itemAPI").generateRequest();
Hope the answers more than your original question.
At the end of the day, I added the logic to make the request or not, to my routing setup.
There are two different routes anyway, one without param, and one with.
I just added the generateRequest() call to the route WITH parameter.
I am trying to get data via a php script that works in Polymer 0.5.
I just get null response and no errors in Polymer 1.0, below is the code.
I have tried modifying the PHP to echo anything but I get no response.
hresponse does fire but at that point only the request information is in ajax the response information is null.
I cannot find an example to see where I have gone wrong.
Thanks
<iron-ajax
id="ajax"
url=""
params=""
handle-as="json"
on-response="hresponse"
debounce-duration="300">
</iron-ajax>
and the script
setajax: function(){
this.$.ajax.url = "Scripts/getnotes.php";
this.$.ajax.params='{"SN":"VBA056"}';
this.$.ajax.generateRequest();
}
hresponse: function(e) {
console.log(e.detail.response);
console.log(this.$.ajax.lastResponse);
}
When you add the this.$.ajax.params= inside the script, it should be an object. When you look into the place inside iron-ajax.html where the request is generated, you will see why this is the case. You are currently adding it as a String. Try to set the line to this.$.ajax.params={"SN":"VBA056"} and it should work.
The following example works (assuming you are importing all the required elements):
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<iron-ajax
id="ajax"
url=""
handle-as="json"
on-response="hresponse"
debounce-duration="300">
</iron-ajax>
<button on-click="setajax">Click me</button>
</template>
<script>
Polymer({
is: "my-app",
setajax: function () {
this.$.ajax.url = "http://jsonplaceholder.typicode.com/posts";
this.$.ajax.params = {"userId":"1"};
this.$.ajax.generateRequest();
},
hresponse: function(request) {
console.log(request.detail.response);
console.log(this.$.ajax.lastResponse);
}
});
</script>
</dom-module>
</body>
My 1st time answering and a newbie to programming, so it is not perfectly correct. But it can help you
There is no property as on-response as per documentation provided in https://elements.polymer-project.org/elements/iron-ajax
Your iron-ajax has to be modified, i too am a newbie, so i wonder if it works, but worth a try.
<iron-ajax
auto
url=""
params=""
handleAs="json"
lastResponse="hresponse"
method='GET'>
</iron-ajax>
Also i wonder if your scripts work like that.
I've got a Classic ASP application that relies on session; if the user leaves a screen idle and then runs a form post or other operation, I'd like to know whether the session has expired.
Currently I'm checking session in each page to see if it's timed out, but is there a better, dynamic, JavaScripty approach that will do what banks do and time out sessions with a notification and redirect to login?
During your page's onload event, start a timer, and then redirect the page after N seconds.
For the timer, use the window.setTimeout function.
For the redirect, set the value of window.location.
Reusable Example:
<head>
<script type="text/javascript">
<!--
function redirect(url) {
window.location = url;
}
function beginSessionTimer() {
// 30000ms = 30s
window.setTimeout(redirect, 30000,
"http://www.yoursite.com/login.asp?session=clear");
}
//-->
</script>
</head>
<body onload='beginSessionTimer();'>
</body>
Quick-n-dirty Example w/ an inline function:
<body onload='window.setTimeout(function(){
window.location="http://www.yoursite.com/login.asp?session=clear";},
30000);'>
Note that if your page performs any AJAX calls, that keeps the session alive, so you'll want to reset the timer using the clearTimeout method (combined w/ a new call to setTimeout). For details on clearTimeout, click here for excellent documentation from Mozilla.)