The following script does not continuously update based on frequency; instead, it only updates once initially.
new Ajax.PeriodicalUpdater('message_field', "http://localhost:8888/lsl_application/php/update_message_field.php?"+param, {
method: "GET",
frequency: 2,
decay: 1,
onSuccess: onSuccess_forPeriodic,
onFailure: function(xhrResponse){
alert("Failed to update!"+xhrResponse.statusText);
}
});
Hey there! Based on your inquiry, I've created a sample application below. It seems like your web service/API is experiencing some delays in processing your request.
Feel free to try running the example below for a possible solution to your question:
My Client Code, Index.php, pings every second.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="prototype.js"></script>
<script type="text/javascript">
new Ajax.PeriodicalUpdater('message_field', "time.php", {
method: "GET",
frequency: 1,
//asynchronous: false,
onSuccess: function(s){
document.getElementById("t").innerText = s.responseText;
},
onFailure: function(xhrResponse){
alert("Failed to update!"+xhrResponse.statusText);
}
});
</script>
</head>
<body>
<h1 id="t"></h1>
</body>
</html>
Server Code, time.php, contains Web Service/API logic.
<?php
sleep(5);
echo date('h:i:s A');
?>
Note: Be sure to monitor your browser's Network tab. The code currently sets the frequency to 1 but the response comes in every 5 seconds.
The frequency, as defined in the documentation located at , refers to the time interval between the completion of one request and the start of the next request.
To illustrate, consider the following scenario:
function poll()
{
//function body
}
setInterval(poll,2000);
However, the behavior of Ajax.PeriodicalUpdater differs slightly:
function poll()
{
//function body
setTimeout(poll,2000);
}
poll();
This design choice aims to prevent overwhelming the backend code with frequent requests every 2 seconds, especially when the backend process may take longer than that to execute. Such an approach helps avoid request stacking and delays caused by rapid fire requests.
It is worth considering that you might be misusing Ajax.PeriodicalUpdater, which essentially acts as a wrapper for Ajax.Updater responsible for handling content updates. Without more context on your implementation, it seems like the provided code snippet should update the element with the ID message_field based on the response from your URL request. This update occurs during the onComplete event, following the onSuccess event. If the URL response remains static, unlike the case demonstrated in Jenish Zinzuvadiya's answer, then you are likely to observe such behavior.
I trust this clarification was helpful to you.
Hey there! I'm currently working on customizing the color of a button based on its type within a modal. The button can be categorized as either "Success" or "Danger": import React from "react"; import styled from "styled-components" ...
After browsing various discussions, it's evident that I can utilize Ajax/JQuery to call a PHP function. However, the specifics of this process still elude me. Imagine I have a function called foo() in foo.php that simply attaches 'bar' to a ...
I have a special service that stores specific objects to be shared among different controllers. Here is an example of the code I am using: $rootScope.$on('controller.event', function(event, arg){ self.backendConnectorService.getBac ...
How can you effectively pass a react component's props to options after performing a mutation using apollo-client? I am currently utilizing react in conjunction with apollo-client. Within a specific component, I am executing a delete mutation and the ...
I am facing an issue with two js files, one.js and two.js. Both of these files make ajax requests to the same Java servlet class(AppController.java). Here is the code from one.js: function addOne(){ var formData = $('#form1').serialize(); ...
I have a question regarding setting a default value for a prop using a getter. props: { userID: { type: String, default: '' } } The default value I want to set is obtained through: computed: { ...mapGetters('Auth&a ...
After receiving a response from the server via a REST request in HTML format, I have saved it in a data:[] variable. When I log this data on the console, it appears as raw HTML code. This reply is currently stored as a String, and my challenge now is to co ...
Struggling to fetch specific mysql rows with a limit using backend programming. This snippet is from my API's index.js file. app.get("/", (req, res) => { return res.send("test"); }); app.get("/Questions", async (req, res) => { const questio ...
I'm currently using the react ag-grid library and I've attempted to use the cellRenderer function, but unfortunately, it's not working as expected. columnDefinationWaterUsage: [ { headerName: "", cellRenderer: count ...
I've encountered an issue while developing the signup page on my local server using Bootstrap 4. The CSS is not getting applied properly when I run it locally, although it displays correctly in the browser. Can someone explain why this is happening? ...
As a newcomer to Node.js, I am feeling a bit overwhelmed after reviewing some code examples below. I simply want to add some APIs to an existing project, but for some reason, I keep getting a 404 error. Here is the content of app.js: var createError = req ...
Encountered a strange minor bug while working on my project. The issue is related to the functionality of clicking on the .nav li element to close the navbar. Surprisingly, this behavior works flawlessly when implemented in pure HTML, CSS, and JS, but fail ...
For my latest project, I am focused on creating a seamless full-page transition using AJAX calls. The challenge I'm facing is removing content from the DOM when loading in a new page. Despite adding a unique class or ID to the element, the .remove() f ...
One of my directives enables the drag-and-drop functionality for DOM elements with the following JavaScript: JS: angular.module('animationApp').directive('myDraggable', ['$document', function($document){return{link: function ...
Whenever you are on the helm state and adjust the warp factor before pressing the engage button, it triggers the function engage which sends out the necessary data. Upon receiving this data, the server checks if the inertial dampeners are active or not, th ...
I'm encountering an issue when trying to update key values within an object. It seems to be adding duplicate values or combining all values together instead of assigning each name a specific language slug. I can't figure out where I'm going ...
Can someone guide me on creating a 3D model of a cylinder with a slice cut out using three.js? Something similar to this: Image Your input is highly valued. Thank you. ...
I am currently transitioning a DJANGO API to Node.js and have been tasked with ensuring that routes support the .json extension at the end. For instance, sending a GET request to /users/:id/.json should return a JSON object representing the user. The cha ...
I have a javascript object that is structured in the following format. My goal is to combine the Name and Status values for each block and then store them in an array. { "datatype": "local", "data": [ { "Name": "John", ...
Is there a way to efficiently send Nested JSON data from the view to the model? Most solutions I've found don't account for variable keys within the object. Here's an example of the JSON object: "Login": { "userId": "harshal.bulsara", ...