What is the best way to utilize a JavaScript variable within LuCI Lua markup?

I am in the process of developing an HTML file specifically designed for integration with the OpenWrt LuCI web interface. By referencing this helpful resource: , I have embarked on utilizing the Lua Markup language to execute a Lua function known as runDiag. The specific challenge I am facing involves passing the javascript variable, option, to the runDiag function. Despite my efforts to tweak the markup within the displayDiag function, I have encountered difficulties in achieving the desired outcome.

Is there anyone willing to provide assistance and guidance?

For illustration purposes, here is a sample snippet:

<%-
    function runDiag(option)
        return option
    end
-%>

<script>
    function displayDiag() {
        var option = document.getElementById('iface').value;
        document.getElementById('diag_text').innerHTML = '<%- write (runDiag(option)) -%>';
    }
</script>

Answer №1

Unfortunately, the Lua template runs on the server while the JavaScript code executes on the client side (i.e. web browser). This means they are unable to communicate with each other.

The Lua code simply generates HTML content to be sent to the client without any knowledge of JavaScript. In this case, the reference to option is a non-existent Lua variable, resulting in a value of nil.

Conversely, the JavaScript code remains unaware of the server-side Lua operations and only receives the output generated by the server. Therefore, it will only execute the following line:

document.getElementById('diag_text').innerHTML = 'nil';

If you wish to establish communication between the client and server, you will need to utilize AJAX or another suitable protocol.

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

Adjusting the date backward by one month results in a difference of 30 days, transitioning from July 31st to August

I'm feeling a bit overwhelmed by the code below. var forDt = new Date("2017-07-31"+ "T09:00:00.000"); var workDt = new Date(); workDt.setDate(forDt.getDate() - 1); date_prev = workDt.toISOString().slice(0, 10); Today is August 1st. I cli ...

Automatically triggering a button click within an iframe upon loading

I have set up an iframe with a website inside that contains a button which I would like to automatically click when the iframe is loaded. The HTML code for this button is as follows: <div class="buttonnext action-button-container"> ...

What is the best way to save a webpage when a user clicks a button before leaving the page with Javascript

I've exhausted all my options in trying to find a way to trigger a button that saves the page upon exit, but it never seems to work. I need the event to occur even if the button is not visible at the time of the page exit. The new security protocols o ...

Is there a way to customize the directory that BABYLON.SceneLoader scans for textures?

Is there a way for me to specify the folder where BABYLON.SceneLoader should look for textures when loading a babylon blender file? Here is an example: BABYLON.SceneLoader.Load("","public/js/corredor.babylon", this.engine, function (newScene) { /*... ...

The jquery function is not operating as anticipated

I wrote the following code to toggle a class for a div. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <div class="members-section " id="a ...

Employing chained async/await function executions

I am currently troubleshooting a straightforward code. The problem lies within an async function I've created: async function updateResult(event){ let result = db.fetchResult(event.ProcessId); return result; } This function is being called from ...

Show the id value of the event triggered by eventclick

I am currently attempting to retrieve the id of the event so that I can remove it from the database. My approach involves using eventClick, where a dialog pops up when the user clicks an event prompting them to remove it. In order to proceed with this oper ...

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Is there a way to adjust the data-offset-top for mobile view? Additionally, I am having trouble hiding the menu when clicking on a link. I have tried some code from stackoverflow without success. Can someone please assist with this issue: <nav class= ...

The process of parsing HashMap failed due to an unexpected encounter with an Array, when an Object

Currently, I am in the experimental phase of creating an action at Hasura using a Node.js code snippet hosted on glitch.com. The code snippet is as follows: const execute = async (gql_query, variables) => { const fetchResponse = await fetch( "http ...

I am experiencing issues with my React implementation of the bootstrap carousel

My carousel seems to be having some issues and I'm not sure what's causing it. Can someone provide guidance on how to resolve this problem? Here is the link to my code on Codesandbox: https://codesandbox.io/s/nice-heyrovsky-8yucf?file=/src/Prompt ...

Achieve overlapping divs using the Grid Layout

My objective is to have the div overlap the next row(s) without pushing them down when it increases in size. I attempted to use position: absolute; but this caused issues with the Grid Layout structure. Preserving the shape of the grid is crucial to me ...

Is it possible to access a sub property using a dot string in Vue 3?

Given a Vue 3 proxy object structure as shown below: <script> export default { name: "test", data() { return { users: [{ "id": 1, "name": "Leanne Graham", " ...

Using jQuery to include Chinese characters in a request header

When making a jQuery post request, I need to set client information in the header. This is how my call looks: jQuery.ajax({ url : myURL, type : "POST", beforeSend : function(request){ request.setRequestHeader('someInfo', clie ...

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...

Passport appears to be experiencing amnesia when it comes to remembering the user

After extensive research online, I have yet to find a solution to my issue. Therefore, I am reaching out here for assistance. I am currently working on implementing sessions with Passport. The registration and login functionalities are functioning properl ...

Creating a series of tiny vertical markings along the horizontal line using the input range

I have a range input and I am looking to add small vertical lines at intervals of 10 on the horizontal line representing each default step. The range of my input is from 0 to 40 and I would like to have small vertical lines at 10, 20, and 30. I need to ac ...

Using jQuery Modal Dialog with ASP.NET MVC 2

In my ASP.NET Mvc 2 application, I have a grid of user info. When a user is clicked, a jQuery Modal dialog opens allowing me to edit and save the user's information successfully. I am now looking for assistance on implementing validation on this moda ...

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

Round Slider maintains the image quality by preserving the pixel count even as the slider value decreases below

My slider code is functioning well, except for the issue of blurred pixels appearing unnecessarily when the value goes below 64. Is there a way to eliminate these faded dots? $("#handle2").roundSlider({ sliderType: "min-range", radius: "100%", ...

What is the significance of `()=>` in JavaScript when using Selenium?

What is the significance of () => in the following sentence? ()=>{Object.defineProperties(navigator,{webdriver:{get:()=>false}})} I have only seen this syntax in JavaScript and it seems to be used for configuring page evaluation with Selenium. T ...