[Resolve] IdCard Js/Css/Html/Lua

FiveM Resource Development & Modding Discussion
1

Hey there, it’s me again, I’ll print all my code for my problem, but first, I’ll explain to you. I only got on the right-top screen "Prénom "- “Nom” - “Id”, not the Lua var that I pass to Js. I’m begining in Js, so please, be indulgant if it’s a lil’ mistake :slight_smile:

Lua

RegisterNetEvent("Iphone:rgetidui")  -- IL FAUT PRENDRE LE LAST ET LE FIRST NAME
AddEventHandler("Iphone:rgetidui", function(firstname, lastename, matricule)
	
	----------PARTIE UI -----------
	guiEnabled = not guiEnabled
	Citizen.Trace("ON EST BIEN DANS RGETIDUI")
	if guiEnabled then
	    	SendNUIMessage({
		type = "enableui",
		tlastname = lastename,
		tfirstname = firstname,
		tid = matricule
	    })
	else
		SendNUIMessage({
			type = "disableui"
		})
	end
end)

Js

$(document).ready(function (){

        function openMain() {
             $(".container").css("display", "block");
        }

        function closeMain() {
              $(".container").css("display", "none");
        }

        window.addEventListener("message", function(event){
              if (event.data.type == "enableui") {
                        $(".tlastname").text(event.data.tlastname); -- EDIT
                        $(".tfirstname").text(event.data.tfirstname);
                        $(".tid").text(event.data.tid);
                        openMain();
                        
                }
               else if (event.data.type == "disableui") {
                        closeMain();
                }
        })
});

Html :

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="scripts.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
    <div class="container">
      <img src="card.png" >
        <div class="card">
            <div class="txtfix">
                <p class="lastname">Nom :</p>
                <p class="firstname">Prénom :</p>
                <p class="id">ID :</p>
            </div>
            <div class="txtdyna">
                <p class="tlastname">LasteName</p>
                <p class="tfirstname">FirstName</p>
                <p class="tid">Matricule</p>
            </div>
        </div>
    </div>
</body>

Css :

.container {
    width: 350px;
    height: 210px;
    background: url(card.png) no-repeat center;
    font-family: sans-serif;
    font-size: 15px;
}

.container .card {
    position: relative;
    top: 95px;
    left: 50px;
}

.container .card p {
    font-weight: bold;
}

.container .card .txtfix {
    position: absolute;
    top: -16px;
    left: 0;
}

.container .card .txtdyna {
    text-transform: uppercase;
    position: absolute;
    top: -16px;
    left: 85px;
}

As I said, it’s only printing on the right-top side the txtfix class… What a shame !
I’m learning js, be indulgant please :stuck_out_tongue:
If you got docs about exange js/lua, i take with pleasure :slight_smile: I already saw the tutorial on the fourm

Have a nice day
Thanks in advance

2 Likes
2

Try printing the values out to console before passing them to the SendNUIMessage function to make sure you’re passing non-null values.

Also, try using the JQuery text() function instead of the html() function.E.g.

$(".tlastname").text(event.data.tlastname);

You can also see if the javascript code is changing the values of the tags by setting the default text to something rather than being blank. E.g.

<p class="tlastname">This should change</p>
3

First of, thanks for answered me :slight_smile:

The Css isn’t working I think :confused:
And still a problem with values

4

Hey ! very nice, you release this :slight_smile: ? i’m french too you can mp me if you want :stuck_out_tongue: have a good day !

5

Yes, it does look like the CSS isn’t being loaded… Have you saved the file as “style.css” and have you put that in the resource file?

If so, you could try and embed the CSS into the HTML so you know it’s definitely being loaded.

You can do this by adding a <style> tag to your <head>. It would look something like

<head>
   <!-- Everything else here -->
   <style>
    /* CSS Goes here */
   </style>
</head>
6

It’s working !

But… Even if I printed the values (they are good in LUA) it’s not replaced in Js visibly…
And I can’t open/close the menu

New code :

RegisterNetEvent("Iphone:rgetidui")  -- IL FAUT PRENDRE LE LAST ET LE FIRST NAME
AddEventHandler("Iphone:rgetidui", function(firstname, lastename, matricule)
	
	----------PARTIE UI -----------
	guiEnabled = not guiEnabled
	Citizen.Trace("ON EST BIEN DANS RGETIDUI")
	if guiEnabled then
		Citizen.Trace("ENABLE ! firstname = " ..tostring(firstname) .. "last name : " ..tostring(lastename) .. "Matricule :  "..tostring(matricule))
	    	SendNUIMessage({
		type = "enableui",
		tlastname = lastename,
		tfirstname = firstname,
		tid = matricule
	    })
		Citizen.Trace("test : enable")	
	else
		Citizen.Trace("DISABLE ! firstname = " ..tostring(firstname) .. "last name : " ..tostring(lastename) .. "Matricule :  "..tostring(matricule))
		SendNUIMessage({
			type = "disableui"
		})
		Citizen.Trace("test : disable")
		
	end
end)

$(document).ready(function (){

        function openMain() {
             $(".container").css("display", "block");
        }

        function closeMain() {
              $(".container").css("display", "none");
        }

        window.addEventListener("message", function(event){
              if (event.data.type == "enableui") {
                        $(".tlastname").text(event.data.tlastname);
                        $(".tfirstname").text(event.data.tfirstname);
                        $(".tid").text(event.data.tid);
                        openMain();
                        
                }
               else if (event.data.type == "disableui") {
                        closeMain();
                }
        })
});

<head>
	<meta charset="UTF-8">
	<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="scripts.js" type="text/javascript"></script>
	<style type="text/css">
		.container {
			width: 350px;
			height: 210px;
			background: url(card.png) no-repeat center;
			font-family: sans-serif;
			font-size: 15px;
			display: none;
		}
		.container .card {
			position: relative;
			top: 95px;
			left: 50px;
		}
		.container .card p {
			font-weight: bold;
		}
		.container .card .txtfix {
			position: absolute;
			top: -16px;
			left: 0;
		}
		.container .card .txtdyna {
			text-transform: uppercase;
			position: absolute;
			top: -16px;
			left: 85px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="card">
			<div class="txtfix">
				<p class="lastname">Nom :</p>
				<p class="firstname">Prénom :</p>
				<p class="id">ID :</p>
			</div>
			<div class="txtdyna">
				<p class="tlastname">LastName</p>
				<p class="tfirstname">FirstName</p>
				<p class="tid">Matricule</p>
			</div>
		</div>
	</div>
</body>
7

Honestly, it sounds like your script file isn’t being loaded as well (same issue as with the CSS file).

Just to double check, try adding your Javascript code in a <script> tag. It would look something like

<body>
    <!-- Other html here -->
  
   <script>
       // Javascript code here
   </script>
</body>
8

It’s all working !
All the scripts wasn’t call ! You all right @Havoc :wink:

9

Great, can you release it ? :stuck_out_tongue:

10

Release ? Its about 50 lines ^^’
PM me if you want it, but I’ll not release a shit like that

11

Well to me , it doesn’t look like a shit but it’s only a personnal opinion xD . Pretty sure multiple people would be happy if you release that .

12

ohhhhhh yes, me too ahah

13

Release please good job guy :slight_smile:

14

Yes, awesome job. If you release I will convert to English for you, if you like.
But either way would be awesome.
I have been looking for a Identity script but this would be a cool start.

15

I want to precise that it’s not only my job :slight_smile:

16

what script is this?

17

This isn’t all about “script”
I know you guys usually fork the entier script working but… You know, we can script ourselves here! ^^

18

i cant thats why i ask
but hey looks good so far

19

How can I idet the id script that I only can show my id card an other player when I have the id card as a item in my inventory ?

1 Like