Using nodeMCU along with ajax means that instead of refreshing just a single element, the entire web page

I'm in need of assistance with reloading two elements on my webpage. I am working with small electronics and the NodeMCU as its brain. I require two outputs (connected to relays) and two inputs.

For the inputs, I would like them to update periodically without manually refreshing the webpage. To achieve this, I am using ajax. I have come across some helpful information at:

Most aspects are functioning perfectly (outputs and inputs). The only issue is that after a timeout, the entire webpage reloads and appears twice in the web browser.

Apologies for providing my code as an image below. When I try to insert it as text, certain parts may be recognized as HTML tags and not displayed properly. I have added the code to my webpage:

If anyone could offer advice on what might be wrong with my code (below), I would greatly appreciate it.

Thank you in advance to everyone who can help. https://i.sstatic.net/W1JB7.png

My code:

javascriptajaxnodemcu

Answer №1

Thanks to my friend, I was able to find a solution!

The problem arose because I mistakenly sent the entire page instead of just the requested data.

To prevent this issue in the future, I have added an 'if' statement at the beginning of the webpage creation process to determine whether only data or the whole page should be sent:

https://i.sstatic.net/CulBv.png

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

How to select specific folders for packaging with asar within an Electron app

I'm currently working on an Electron application and experimenting with using asar to package the node_modules and sources directories, while excluding other directories. However, I've run into an issue where when building the application with a ...

javascriptnode.jselectronelectron-forgeasar

Tips for adjusting the height of a div using the slideToggle function for expanding and collapsing content

Is there a way to modify my code in order to adjust the height of a <div> using slideToggle()? The current implementation works almost correctly, with one minor issue. When I click on one "read_more" and then click on another, it does not behave as e ...

javascriptjqueryshow-hideslidetoggle

Using PHPMailer and AJAX to attach a file to an email

I successfully implemented a contact form on my website that allows users to send emails without refreshing the page, thanks to Ajax. Now, I want to add a feature where users can attach files to their emails, but I'm struggling with processing this d ...

phpjqueryajaxphpmailer

Deactivate input areas while choosing an option from a dropdown menu in HTML

I've been working on creating a form and have everything set up so far. However, I'm looking to disable certain fields when selecting an option from a dropdown list. For instance, if the "within company" option is selected for my transaction typ ...

javascripthtmlangularjsionic-framework

What could be causing this addEventListener to fail when I am assigning elements to a class?

I've encountered an issue with my code where I have two text inputs and two date inputs. I tried to select all of them using QuerySelectorAll with a class, added a click listener that should change the textContent of a div element to "", but it's ...

javascripthtmlcssfunction

Vitejs is currently loading the entire bundle size instead of just the specific selected files

While working with Vue 3 and Vite, I came across an issue that seems quite strange. The Oh Vue Icons library is loading a massive 108 MB of bundle size, which significantly slows down the loading time even in ViteJS. Here's how my setup looks like: im ...

javascriptvue.jsvuejs3vite

Handling exceptions in the event that the backend URL resource cannot be accessed

I'm facing an issue with my Vue.js single file component where I am trying to catch exceptions when the URL requested by axios.post is unreachable. I have encapsulated the entire code in a try block, but for some reason, the alert in the catch block i ...

javascriptvue.jsexception

What is the process of displaying JSON headers using JavaScript?

Although it may seem like a simple question, I am new to JSON. Can someone explain how to display a heading in the console? This is the code I have: var jsonstr = '{"profile":{"name" : "raj","age":"35&qu ...

javascriptnode.jsarraysjsonprinting

Implement a customized toString method for components in ReactJS

Looking to modify the toString method of a class component in reactjs? Check out the code snippet below class C1 extends React.Component{ render(){ return ( <div> {C2.toString()} </div> ) } } class C2 extend ...

javascripthtmlreactjsweb

Using Angular to bind the ngModel to a variable's object property

In my application, I am working with a user object that looks like this: let user = {name: "John", dob:"1995-10-15", metadata: {}} The metadata property of the user object is initially empty. I want to add a new property to the metadata object based on u ...

javascriptangulartypescriptobjectngmodel

I am unable to halt the relentless stream of asynchronous events

Struggling to retrieve an array using a loop in the asynchronous environment of nodejs. Check out my code below: getDevices(userIDs, function(result) { if (result) { sendNotification(messageUser, messageText, result); res.send("Success"); } else { ...

javascriptandroidarraysnode.jsmongodb

Retrieving HTML using jQuery Ajax POST

While attempting to utilize a jQuery Ajax POST request to fetch an HTML select menu from a PHP script, I encountered a perplexing issue. $.ajax({ type: "POST", url: "books/editions", data: dataString, cache: false, success: function(me ...

phpjqueryajax

When using the `array.join` method with nested arrays, it does not automatically include spaces in the output

function convertArrayToString(arr) { // Your solution goes here. let str = arr.join(", "); return str; } const nestedValues = [5, 6, [7], ["8", ["9", ["10" ]]]]; const convertedString = convertArrayToString(nestedValues); console.log(convertedString ...

javascriptarrays

"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically. let adContainer = $ ...

javascripthtmljquery

Avoid duplication of elements in Angular applications

Currently, I have a component that loads animated divs based on a datasource. *Note: In the example, I've used a lot of <any> because I haven't finalized the model yet. apiService.ts dataArray: Observable<Array<any>>; constru ...

javascripthtmlarraysangularobservable

Having trouble accessing PDF files on Electron framework

Despite following the advice provided in similar questions' answers, such as including webPreferences: { plugins: true } in the options when creating a BrowserWindow instance, I am still encountering issues. Every attempt to open or view a PDF ...

javascriptnode.jspdfelectronchromium

Optimal code structuring for a javascript plugin

Hey there, I came across some intriguing posts on this topic, but I believe it's a very personal question that requires a tailored answer. So, I'm reaching out to ask you: what is the most effective way to organize my code for a JavaScript plugin ...

javascriptdesign-patternsarchitecture

Performing the task of removing a complete script using D3 or JavaScript

Here is the current setup I have in my code: The index.html file contains <div id="div1"></div> and I dynamically load a file into it (when a socket arrives) using this script: <script> var socket = io.connect('http://127.0. ...

javascriptd3.js

Javascript increasing the variable

Whenever I interact with the code below, it initially displays locationsgohere as empty. However, upon a second click, the data appears as expected. For example, if I input London, UK in the textarea with the ID #id, the corresponding output should be var ...

javascriptfor-loop

How to calculate a date x days before a given date using javascript

In my Angular application, I am dealing with a date value that is stored in local storage. My current code snippet retrieves the date like this: $scope.selectedDate = localStorage.getItem('selDate'); The returned date from this code is '1 ...

javascriptangularjsdate