Passing a Variable from a LUA File to HTML

FiveM Resource Development Discussion
1

So, as the title states, I’m looking to use my LUA Variable in my HTML. Any help would be greatly appreciated, I’m sure it’s a simple fix but I have no idea lol. Cheers!

main.lua:

  RegisterNetEvent('nui:on')
  AddEventHandler('nui:on', function()
    SendNUIMessage({
      type = "ui",
      display = true,
      test = "test"
    })
  end)

listener.js:

$(function(){
	window.onload = (e) => {
        /* 'links' the js with the Nui message from main.lua */
		window.addEventListener('message', (event) => {
            //document.querySelector("#logo").innerHTML = " "
			var test = document.getElementById(event.data.test).innerHTML;
			var item = event.data;
			if (item !== undefined && item.type === "ui") {
                /* if the display is true, it will show */
				if (item.display === true) {
                    $("#container").show();
                     /* if the display is false, it will hide */
				} else{
                    $("#container").hide();
                }
			}
		});
	};
});

index.html:

<html>
	<head>
		<link rel="stylesheet" href="reset.css" type="text/css">
		<link rel="stylesheet" href="style.css" type="text/css">
		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
		<script src="./listener.js" type="text/javascript"></script>
		<script src="../config.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="container">
				<div>
					<p id="test"></p>
				</div>
		</div>
	</body>
</html>
2

Hey ! :slightly_smiling_face:
Based on your initial code and what you are looking to do I wrote the following :

main.lua :

RegisterNetEvent('nui:on')
  AddEventHandler('nui:on', function()
  
    SendNUIMessage({
      type = "ui";
      display = true;
      test = "test";
    })
	
  end)
  
  Citizen.CreateThread(function()
  while true do
  
	Citizen.Wait(5000)
	
	TriggerEvent('nui:on')
	
	print("Triggered")
	
  end

end)

script.js :

window.addEventListener('message', function (event) {
    let data = event.data
	
	$('#container').hide();
	
	var type = data.type;
	var display = data.display;
	var test = data.test;
		
	if (data !== undefined && type === "ui")
	{
		if (display == true)
			$('#container').show();
		else
			$('#container').hide();
	}
	
	//$('#testDiv').html(test);
		

});

ui.html :

<html>

	<head>
		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
		
	</head>
	
	<body style="width: 500px;height: 500px;">

		<!-- Fichier script principal -->
		<script type="text/javascript" src="script.js"></script>

		<div id="container" style="background-color: black;color: white;">
			<center><div id="testDiv">HAPPOU!!!</div></center>
		</div>
		
	</body>

</html>

Result :
screen23

It should work, I tried with display = true (screen above) and display = false both of them worked.

Peace !

4

Hey, thank you so much! All I wanted was a little bit of help but you wrote a whole script for me, thank you so much! I truly appreciate it, life saver. Have been trying to do this for absolutely ages. Once again, thank you. I truly appreciate it :grin:

5

No prob :wink: