NUI Panel switch

FiveM Resource Development & Modding Discussion
1

Hello!

I am an old mta script developer who just got back into the world of scripting lately with fivem. I am working on a basic login/register system with NUI but I have ran into some troubles.

I have 2 div’s in the html file and I just want to switch between them, but the 2. panel won’t dissapper if I use the “back” button, if I use the commands everything works fine. Also on startup, itt does it’s work fine. I find this pretty strange since the code is the same at the commands(“asd”, “asd2”, etc…) as at the NuiCallBacks.

client side:

local display = 0
local resourceStarted = false

function SetDisplay(int)
    display = int
    if(int > 0) then
        SetNuiFocus(true, true)
    end
    chat("ClientSetDisplay: "..display)
    SendNUIMessage({
        type = "ui",
        status = display
    })
    if(int == 0) then
        SetNuiFocus(false, false)
    end
    return true
end

RegisterNUICallback("SetDisplay", function(source)
    SetDisplay(source.display)
end)

RegisterNUICallback("sendChat", function(data)
    chat("JSCHAT: ".. data.text)
end)

Citizen.CreateThread(function()
    while display > 0 do
        Citizen.Wait(0)
        DisableControlAction(0, 1, display)
        DisableControlAction(0, 2, display) 
        DisableControlAction(0, 142, display) 
        DisableControlAction(0, 18, display)
        DisableControlAction(0, 322, display) 
        DisableControlAction(0, 106, display) 
    end
end)

function chat(str, color)
    TriggerEvent(
        'chat:addMessage',
        {
            color = color,
            multiline = true,
            args = {str}
        }
    )
end

RegisterNUICallback("startup", function(data)
    if resourceStarted == false then
        chat("Starting up client side")
        SetDisplay(0)
        resourceStarted = true
    else
        return
    end
end)

RegisterCommand("asd", function(source)
    SetDisplay(1)
end)

RegisterCommand("asd2", function(source)
    if SetDisplay(0) then
        SetDisplay(2)
    end
end)

RegisterCommand("asd3", function(source)
    if SetDisplay(0) then
        SetDisplay(1)
    end
end)

RegisterCommand("asd4", function(source)
    if SetDisplay(0) then
        SetDisplay(0)
    end
end)

RegisterNUICallback("killPanels", function(data)
    chat("killing")
    if SetDisplay(0) then
        SetDisplay(0)
    end
end)

RegisterNUICallback("SetDisplay2", function(source)
    chat("displayClientSide2")
    if SetDisplay(0) then
        SetDisplay(2)
    end
end)

RegisterNUICallback("SetDisplay1", function(source)
    chat("displayClientSide1")
    if SetDisplay(0) then
        SetDisplay(1)
    end
end)

js:

$(function () {
    function display(int) {
        $.post("http://ml_test2/sendChat", JSON.stringify({
            text: "int:" + int
        }));
        if(int === 0){
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing0"
            }));
            $("#container").hide();
            $("#registerContainer").hide();

            return true;
        }else if (int === 1){
            $("#registerContainer").hide();
            $("#container").show();
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing1"
            }));
            return false;
        }else if(int === 2){
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing2"
            }));
            $("#container").hide();
            $("#registerContainer").show();
            return false;
        }
    }

    window.addEventListener('message', function(source) {
        var item = source.data;
        if (item.type === "ui") {
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "DISPLAYING:" + item.status
            }));
            display(item.status)
        }
    })

    $("#register").click(function () {
        $.post("http://ml_test2/SetDisplay2", JSON.stringify({}));
    })

     $("#back").click(function () {
        $.post("http://ml_test2/SetDisplay1", JSON.stringify({}));
    })

    $.post('http://ml_test2/startup', JSON.stringify({}));
})

image
image1915×938 294 KB

image
image1896×927 219 KB

Thank you in adnvance for everyone’s reply and time, take care:)

2

I also had a similar problem using jQuery, at least for me the solution was to use the important classes of display:none or display:block instead .hide() .show()

I hope I have helped something.

3

Hey Alex,

First of all thank you for your effort, appreciate it:)

Secondly, I have tried what you suggested, but the problem still stayed unsolved.

I have changed the register button to close everything regarding how you suggested, but the 2. panel still stays there for some reason. It feels to me a bit that it deletes it and replaces it, but I have gone throught the code sevaral times and there is nothing which can add it back. Also fore some strange reason the div which is 2th in the html code is the one which stays there, if I change the order to registration div after that login div, the login one wont close…

The changed part:

$("#register").click(function () {
        $("#container").css('display', 'none');
        $("#registerContainer").css('display', 'none');
        $.post("http://ml_test2/sendChat", JSON.stringify({
            text: "__CLOSING__"
        }));
    })

the whole js:

$(function () {
    var local_player = 0;
    function display(int) {
        $.post("http://ml_test2/sendChat", JSON.stringify({
            text: "int:" + int
        }));

        if(int == 0){
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing0"
            }));
            $("#container").css('display', 'none');
            $("#registerContainer").css('display', 'none');

            return;
        }else if (int === 1){
            $("#container").show();
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing1"
            }));
            return;
        }else if(int === 2){
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "Showing2"
            }));
            $("#registerContainer").show();
            return;
        }
    }

    window.addEventListener('message', function(source) {
        var item = source.data;
        local_player = source;
        if (item.type === "ui") {
            $.post("http://ml_test2/sendChat", JSON.stringify({
                text: "DISPLAYING:" + item.status
            }));
            display(item.status)
        }
    })

    $("#register").click(function () {
        $("#container").css('display', 'none');
        $("#registerContainer").css('display', 'none');
        $.post("http://ml_test2/sendChat", JSON.stringify({
            text: "__CLOSING__"
        }));
    })

     $("#back").click(function () {
        $.post("http://ml_test2/SetDisplay1", JSON.stringify({
            source: local_player
        }));
    })

    $.post('http://ml_test2/startup', JSON.stringify({}));
})

image
image1909×919 224 KB

Thanks again for the effort:)