Jump to content

HTML + MTA a Little problem ;3

iPrestege

By iPrestege
in Scripting

Recommended Posts

iPrestege Boss Hawg

iPrestege

Posted
Posted

Hi all i'm having a problem to use html in mta ;s so i'm trying to make a login panel via html and css and here's my html to call a trigger to mta client to call the server part ;p

  

<head>
  <meta charset="UTF-8">
  <title>MTA Arabs Login</title>
  		<script>
			function aCall(command){
				var login = document.getElementById("login").value
				var password = document.getElementById("password").value
				mta.triggerEvent("aOnCallMtaEvent", login, password, command)
			}
		</script>
  
  <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:600'>

      <link rel="stylesheet" href="css/style.css">

  
</head>


		<div class="login-form">
			<div class="sign-in-htm">
				<div class="group">
					<label for="user" class="label">اسم المستخدم</label>
					<input id="user" type="text" class="input" id="login">
				</div>
				<div class="group">
					<label for="pass" class="label">كلمة المرور</label>
					<input id="pass" type="password" class="input" data-type="password" id="password">
				</div>
				<div class="group">
					<!--<input id="check" type="checkbox" class="check" checked>-->
					<!--<label for="check"><span class="icon"></span> Keep me Signed in</label>-->
				</div>
				<div class="group">
					<input type="submit" class="button" value="تسجيل الدخول" onclick=aCall("login")>
				</div>

 

 

 

And on the client :

  

function aHTML ( login,password,command )
	if (command == "login") then
		triggerServerEvent("aOnRequestLogin", resourceRoot, login, password)
	elseif (command == "register") then
		triggerServerEvent("aOnRequestRegister", resourceRoot, login, password)
	end
end
addEvent("aOnCallMtaEvent", true)
addEventHandler("aOnCallMtaEvent", root, aHTML)

 

 

 

and in the meta.xml :

  

<export function="aHTML" http="true" />

 

 

 

But the function never get triggered so i'm not sure what's the problem also i'm new in html and css ;s

 

 

Regards!

pa3ck Banger

pa3ck

Posted
Posted (edited)

Because in JavaScript, you have to put ";" after the lines, but you clearly didn't. What I suggest you is, test everything in your browser using Google Chrome Dev tools and the console should point out errors like that. Also, what LoPollo said, pay attention to the default HTML layout, <html><head></head><body></body></html> etc...

 

EDIT: I don't know if you know it already, but you also have to include all the files in the meta.xml, including JS files and CSS.

Edited by pa3ck
  • Like 1
iPrestege Boss Hawg

iPrestege

Posted
  • Author
Posted

Actually it does but i haven't finished the hole script i mean the register part is not done yet but here's the full html : 

  

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>MTA Arabs Login</title>
  		<script>
			function aCall(command){
				var login = document.getElementById("login").value
				var password = document.getElementById("password").value
				mta.triggerEvent("aOnCallMtaEvent", login, password, command)
			}
		</script>
  
  <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:600'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="login-wrap">
	<div class="login-html">
		<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">تسجيل الدخول</label>
		<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">تسجيل جديد</label>
		<div class="login-form">
			<div class="sign-in-htm">
				<div class="group">
					<label for="user" class="label">اسم المستخدم</label>
					<input id="user" type="text" class="input" id="login">
				</div>
				<div class="group">
					<label for="pass" class="label">كلمة المرور</label>
					<input id="pass" type="password" class="input" data-type="password" id="password">
				</div>
				<div class="group">
					<!--<input id="check" type="checkbox" class="check" checked>-->
					<!--<label for="check"><span class="icon"></span> Keep me Signed in</label>-->
				</div>
				<div class="group">
					<input type="submit" class="button" value="تسجيل الدخول" onclick=aCall("login")>
				</div>
				<div class="hr"></div>
				<div class="foot-lnk">
					<!--<a href="#forgot">Forgot Password?</a>-->
				</div>
			</div>
			<div class="sign-up-htm">
				<div class="group">
					<label for="user" class="label">اسم المستخدم</label>
					<input id="user" type="text" class="input">
				</div>
				<div class="group">
					<label for="pass" class="label">كلمة المرور</label>
					<input id="pass" type="password" class="input" data-type="password">
				</div>
				<div class="group">
					<label for="pass" class="label">اعادهـ كتابة كلمة المرور</label>
					<input id="pass" type="password" class="input" data-type="password">
				</div>
				<div class="group">
					<label for="pass" class="label">بريدكـ الالكتروني</label>
					<input id="pass" type="text" class="input">
				</div>
				<div class="group">
					<input type="submit" class="button" value="تسجيل حساب جديد" onclick=aCall("register")>
				</div>
				<div class="hr"></div>
				<div class="foot-lnk">
					<label for="tab-1">لديكـ حساب مسبقاً؟</a>
				</div>
			</div>
		</div>
	</div>
</div>
  
  
</body>
</html>

 

pa3ck Banger

pa3ck

Posted
Posted

Read what I said about JavaScript, HTML doesn't really care about the tags, it won't throw errors or anything, that couldn't be the problem.

  • Like 1
LoPollo Fool

LoPollo

Posted
Posted

I (over)simplified your code @iPrestege, and this is working: 

<html>
	<head>
		<meta charset="UTF-8">
		<title>MTA Arabs Login</title>
		<script>
			function aCall(command){
				var login = "logVal";
				var password = "passVal";
				mta.triggerEvent("aOnCallMtaEvent", login, password, command);
			}
		</script>
		<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:600'>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="login-form">
			<div class="group">
				<input type="submit" class="button" value="Press me, i'm a button" onclick=aCall("login")>
			</div>
		</div>
	</body>
</html>
function aHTML ( login,password,command )
	outputChatBox( login.." "..password.." "..command )
end
addEvent("aOnCallMtaEvent", true)
addEventHandler("aOnCallMtaEvent", root, aHTML)

local screenWidth, screenHeight = guiGetScreenSize()

local page = "http://mta/"..getResourceName( resource ).."/index.html"
local initBrowser = guiCreateBrowser(screenWidth/4, screenHeight/4, screenWidth/2, screenHeight/2, true, false, false)
local theBrowser = guiGetBrowser(initBrowser)

addEventHandler("onClientBrowserCreated", theBrowser, 
	function()
		loadBrowserURL(source, page)
		showCursor(true)		
	end
)

When i press the button i get the 3 values i requested. Now i'm going to add your other code till problem happens

  • Like 1
iPrestege Boss Hawg

iPrestege

Posted
  • Author
Posted

@pa3ck @LoPollo Thanks for all your help guys :P i really appreciate that!

 

And the problem was in here :

 

  

<div class="sign-in-htm">
	<div class="group">
		<label for="user" class="label">اسم المستخدم</label>
		<input id="user" type="text" class="input" id="login">
	</div>
	<div class="group">
		<label for="pass" class="label">كلمة المرور</label>
		<input id="pass" type="password" class="input" data-type="password" id="password">
</div>

it should be :

  

<div class="sign-in-htm">
	<div class="group">
		<label for="user" class="label">اسم المستخدم</label>
		<input id="aLogin" type="text" class="input">
	</div>
	<div class="group">
		<label for="pass" class="label">كلمة المرور</label>
		<input id="aPass" type="password" class="input" data-type="password" >
	</div>

I dont know how did i do that but maybe i'm sleepy :S now it works and i'm going to complete my project tomorrow thanks to you guys again! 

  • Like 1
LoPollo Fool

LoPollo

Posted
Posted (edited)

My PC freezed so i wasted a lot of time, but the error occurred when i replaced the constant strings ("logVal" and "passVal") with the js: document.getElementById("login").value (added also the divs)

 

EDIT: so you solved the issue :) double id... didn't noticed but i was near >:( so i had no fun resolving this. i hate you. lol xD

Edited by LoPollo
  • Like 2

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...