Hi, is it possible to create a system with buttons in the html to toggle the ui_page ('client/html/index.html')
what exactly are you asking?
you want to dynamically alter the ui_page? I don’t think that’s possible. But why would you want to do that?
My window.addEventListener is not working on app.js file please help.
hi eveybody;
It comes with the ui ‘/on’ command but it doesn’t go from the screen.where am I doing wrong?
I’ve added the codes below.
HTML
<!DOCTYPE html>
<html>
<html style="overflow-y: hidden;"></html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="index.css">
<script src=https://code.jquery.com/jquery-3.2.1.min.js></script>
<script src=nui://game/ui/jquery.js type=text/javascript></script>
</head>
<body>
<div id="container">
<div id="header">
<h3>subtitles <i class="far fa-edit"></i></h3>
</div>
<div id="menu">
<div id="div1"><i class="fas fa-caret-right"></i> 1 </div>
<div id="div2"><i class="fas fa-caret-right"></i> 2 </div>
<div id="div3"><i class="fas fa-caret-right"></i> 3 </div>
<div id="div4"><i class="fas fa-caret-right"></i> 4 </div>
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
JS
$(function() {
function display(bool) {
if (bool) {
$("#container").show();
} else {
$("#container").hide();
}
}
display(false)
window.addEventListener('message', function(event) {
var item = event.data;
if (item.type === "ui") {
if (item.status == true) {
display(true)
} else {
display(false)
}
}
})
document.onkeyup = function (data)
{
if (data.which == 27)
{
$.post('http://gui2/exit', JSON.stringify({}));
console.log('ESC Key pressed');
}
};
$("#div1").click(function(event)
{
$.post('http://gui2/exit');
console.log('Mouse Clicked.');
})
})
LUA
local display = false
RegisterCommand("on", function(source, args)
SetDisplay(true)
end)
RegisterCommand("off", function(source, args)
SetDisplay(false)
end)
RegisterNUICallback("exit", function(data,cb)
SetDisplay(false)
cb("ok")
print("CAME")
end)
RegisterNUICallback("main", function(data,cb)
SetDisplay(true)
cb("ok")
print("SHOWED.")
end)
function SetDisplay(bool)
display = bool
SetNuiFocus(bool, bool)
SendNUIMessage({
type = "ui",
status = bool,
})
end
Citizen.CreateThread(function()
while display do
Citizen.Wait(0)
-- https://runtime.fivem.net/doc/natives/#_0xFE99B66D079CF6BC
--[[
inputGroup -- integer ,
control --integer ,
disable -- boolean
]]
DisableControlAction(0, 1, display) -- LookLeftRight
DisableControlAction(0, 2, display) -- LookUpDown
DisableControlAction(0, 142, display) -- MeleeAttackAlternate
DisableControlAction(0, 18, display) -- Enter
DisableControlAction(0, 322, display) -- ESC
DisableControlAction(0, 106, display) -- VehicleMouseControlOverride
end
end)
Appreciate the tutorial my man 
So imma be honest I don’t do NUI but I did notice an issue with your LUA code. In your thread you have it going
while display do
...
end
And when you start off with
local display = false
That thread is going to run through the function and just finish it up because the loop didn’t run, in this case you might want to do a:
while true do
Instead.
Don’t do this as you’ll permanently disable the mentioned controls!
The issue marked is correct however the proposed solution is not the way to go. You got two options instead:
Cutting off the unimportant part, the rest is still necessary but won’t be changed.
You’ll want to relate the coded thread to the SetDisplay-function. You can do that by either moving the thread into the SetDisplay-function or by wrapping the thread into its own function.
Moving:
local display = false
function SetDisplay(bool)
display = bool
SetNuiFocus(bool, bool)
SendNUIMessage({
type = "ui",
status = bool,
})
if display == true then -- also possible: if display then
Citizen.CreateThread(function()
while display do
Citizen.Wait(0)
DisableControlAction(0, 1, display) -- LookLeftRight
DisableControlAction(0, 2, display) -- LookUpDown
DisableControlAction(0, 142, display) -- MeleeAttackAlternate
DisableControlAction(0, 18, display) -- Enter
DisableControlAction(0, 322, display) -- ESC
DisableControlAction(0, 106, display) -- VehicleMouseControlOverride
end
end)
end
end
Wrapping:
local display = false
function SetDisplay(bool)
display = bool
SetNuiFocus(bool, bool)
SendNUIMessage({
type = "ui",
status = bool,
})
TriggerEvent('DisplaySetTrue')
end
AddEventHandler('DisplaySetTrue', function()
Citizen.CreateThread(function()
while display do
Citizen.Wait(0)
-- https://runtime.fivem.net/doc/natives/#_0xFE99B66D079CF6BC
--[[
inputGroup -- integer ,
control --integer ,
disable -- boolean
]]
DisableControlAction(0, 1, display) -- LookLeftRight
DisableControlAction(0, 2, display) -- LookUpDown
DisableControlAction(0, 142, display) -- MeleeAttackAlternate
DisableControlAction(0, 18, display) -- Enter
DisableControlAction(0, 322, display) -- ESC
DisableControlAction(0, 106, display) -- VehicleMouseControlOverride
end
end)
end)
This way the Thread only gets started when display is true and stays on as long as necessary.
I appreciate you writing some actual code for this(hard to code on the phone), this code is much more optimized than a simple “while true do”.
Incorrect, but it is possible in the future 
useful content
I know this is years old but I think it is still relevant to respond to this. You do not need to use php as you will be posting to an nui callback in lua using the native. This takes the place of php so you will just handle the data using lua. If you want to call data to the webpage you will need an nui message to send that data. Php would be useless here unless you wanted to bypass sending nui messages which you would have to do anyway.
1 Like
Super Turorial!
Du macht immer echt gute Arbeit.
Wenn Jemand mal Schiffeverseken im Browser spielen will:
[Schiffeversenken - Das bekannte Strategiespiel (meg-chat.de)](Schiffeversenken - Das bekannte Strategiespiel)
1 Like