Jump to content
Sign in to follow this  
diokhan

modal login IE

Recommended Posts

diokhan

boas,

eu tenho um sistema de login que no FFox funciona normalmente, mas no IE não funciona, é um modal login, eu tenho dois projectos e uso o mesmo sistema de login em ambos, num funciona bem tanto no FFox como no IE, e o outro só funciona no FFox, ja tive a comparar os ficheiros e tão iguais, com as devidas alterações de projecto para projecto. A única diferença é que num tenho o menu com as opções dentro de um DIV e no outro não.

Eu deixo aqui o código caso alguém me possa ajudar 🤔

<?php
echo'
<div class="menu">
<ul>';

if (!isset($_SESSION['USER'])){
/* Menu do index, sem o login efectuado */
echo'
		<li><a href="restrito.php?opcao=index" target="_self">Home</a></li>
		<li><a href="#" id="login_link" target="_self">Login</a></li>
		<li><a href="restrito.php?opcao=register" target="_self">Register</a></li>';

}elseif($_SESSION['ACCESS_LEVEL']==1){

/* Menu do index, com o login efectuado */
echo'
		<li><a href="restrito.php?opcao=index" target="_self">Home</a></li>
		<li><a href="restrito.php?opcao=project" target="_self">Project</a></li>
		<li><a href="restrito.php?opcao=newproject" target="_self">New Project</a></li>
		<li><a href="restrito.php?opcao=client" target="_self">Client</a></li>
		<li><a href="restrito.php?opcao=newclient" target="_self">New Cliente</a></li>
		<li><a href="restrito.php?opcao=admin" target="_self">Admin</a>
			<ul>
				<li><a href=restrito.php?opcao=admin&op=users target="_self">Users</a></li>
				<li><a href=restrito.php?opcao=admin&op=changepass target="_self">Change Password</a></li>
			</ul>
		</li>
		<li><a href="restrito.php?opcao=logout" target="_self">Logout - ['.$_SESSION["NAME_USER"].']</a></li>';

}elseif ($_SESSION['ACCESS_LEVEL']==2){
echo'
		<li><a href="restrito.php?opcao=index" target="_self">Home</a></li>
		<li><a href="restrito.php?opcao=project" target="_self">Project</a></li>
		<li><a href="restrito.php?opcao=newproject" target="_self">New Project</a></li>
		<li><a href="restrito.php?opcao=client" target="_self">Client</a></li>
		<li><a href="restrito.php?opcao=newclient" target="_self">New Cliente</a></li>
		<li><a href="restrito.php?opcao=admin" target="_self">Admin</a>
			<ul>
				<li><a href=restrito.php?opcao=admin&op=newuser target="_self">New User</a></li>
				<li><a href=restrito.php?opcao=admin&op=users target="_self">Users</a></li>
				<li><a href=restrito.php?opcao=admin&op=changepass target="_self">Change Password</a></li>
			</ul>
		</li>
		<li><a href="restrito.php?opcao=logout" target="_self">Logout - ['.$_SESSION["NAME_USER"].']</a></li>';
}
echo '</ul>
</div>';

?>

<div id="login_form" style='display:none'>
<div id="status" align="left">
	<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1> 
		<div id="login_response"><!-- spanner --></div>
	</center>
	<form id="login" action="javascript:alert('Success!');">
		<input type="hidden" name="action" value="user_login">
		<input type="hidden" name="module" value="login">
		<label>User</label><input type="text" name="user"><br />  
		<label>Password</label><input type="password" name="pass"><br />  
		<label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" />
		<div id="ajax_loading">
			<img align="absmiddle" src="images/spinner.gif"> Processing...
		</div>
	</form>
</div>
</div>
</body>
</html>

o html é aberto no topo da pagina, mas como achei que não é necessário não copiei


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

Sabes, o IE é muito esquisito com o HTML... Muito mais rígido... qualquer coisinha errada e não faz o que devia.

Experimenta (para já) corrigir o html, nos li's secundários. Por exemplo, onde tens:

                        <li><a href="restrito.php?opcao=admin" target="_self">Admin</a>
                                <ul>
                                        <li><a href=restrito.php?opcao=admin&op=newuser target="_self">New User</a></li>
                                        <li><a href=restrito.php?opcao=admin&op=users target="_self">Users</a></li>
                                        <li><a href=restrito.php?opcao=admin&op=changepass target="_self">Change Password</a></li>
                                </ul>
                        </li>

Deverias ter:

                        <li><a href="restrito.php?opcao=admin" target="_self">Admin</a>
                                <ul>
                                        <li><a href="restrito.php?opcao=admin&op=newuser" target="_self">New User</a></li>
                                        <li><a href="restrito.php?opcao=admin&op=users" target="_self">Users</a></li>
                                        <li><a href="restrito.php?opcao=admin&op=changepass" target="_self">Change Password</a></li>
                                </ul>
                        </li>

Além dessas linhas, tens as outras anteriores que também lhes faltam as aspas.

Corrige isso para já e testa... Depois passamos para novos 'debugs' :P

Share this post


Link to post
Share on other sites
diokhan

ok eu vou já corrigir isto. obrigado :thumbsup:

PS: coloquei aspas em todo o lado que faltava, o problema não é das aspas, no FFox dá sem problemas, no IE é que não funciona, o mais engraçado é que uso o mesmo sistema em dois projectos mas em apenas um esta a funcionar como deve ser :P


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
diokhan

eu tambem fiz uma cena, abri o DIV antes do PHP, e fechei só no fim, antes de fechar o BODY, para ver se conseguia englobar tudo numa só DIV. mas sem sucesso, no FFox continua a funcionar mas no IE nada 🤔


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

E usas alguma framework de Javascript para conseguir fazer a modal? JQuery talvez?

Se não usares, coloca aqui o código Javascript para vermos o que se passa :P

Share this post


Link to post
Share on other sites
diokhan

ya uso jquery..eu coloco aqui o código todo

este é o do-login.php, que vai validar o login:

<?php
$config = array();

$config['user'] = $_POST['user'];
$config['pass'] = $_POST['pass'];

// Show all errors except the notice ones
error_reporting(E_ALL ^ E_NOTICE);

// Initialize session
session_id();
session_start();
header('Cache-control: private'); // IE 6 FIX

if($_POST['action'] == 'user_login')
{
$post_user = $_POST['user'];
$post_pass = $_POST['pass'];

// check username and password

//if($post_user == $config['user'] && $post_pass == $config['pass'])

if (empty($post_user) || (empty($post_pass)))
{
	$auth_error = '<div id="notification_error">The login info is not correct.</div>';
    	echo $auth_error;
    	
}elseif($post_user !== $config['user'] && $post_pass !== $config['pass']){

	$auth_error = '<div id="notification_error">The login info is not correct.</div>';
    	echo $auth_error;

}elseif($post_user == $config['user'] && $post_pass == $config['pass']){

	// No error? Register the session & redirect the user to his/her 'Control Panel'
	require_once('validacao.php');
	echo 'OK'; // this response is checked in 'process-login.js'
}else{
    	
	$auth_error = '<div id="notification_error">The login info is not correct.</div>';
   		echo $auth_error;

}
}
?>

este é o código  que faz aparecer a caixa de login, init.js:

// Preload Images
img1 = new Image(16, 16);  
img1.src="images/spinner.gif";

img2 = new Image(220, 19);  
img2.src="images/ajax-loader.gif";

// When DOM is ready
$(document).ready(
function(){

// Launch MODAL BOX if the Login Link is clicked
$("#login_link").click
(
	function()
		{
			$('#login_form').modal();
		}
);

// When the form is submitted
$("#status > form").submit(
function()
{  
	// Hide 'Submit' Button
	$('#submit').hide();

	// Show Gif Spinning Rotator
	$('#ajax_loading').show();

	// 'this' refers to the current submitted form  
	var str = $(this).serialize();  

	// -- Start AJAX Call --

	$.ajax(
	{  
	    type: "POST",
	    url: "../ProjectManager/login/do-login.php",  // Send the login info to this page
	    data: str,  
	    success: function(msg)
	    {
			$("#status").ajaxComplete(
				function(event, request, settings)
				{  
					// Show 'Submit' Button
					$('#submit').show();

					// Hide Gif Spinning Rotator
					$('#ajax_loading').hide();  

					 if(msg == 'OK') // LOGIN OK?
					 {  
						 var login_response = '<div id="logged_in">' +
							 '<div style="width: 350px; float: left; margin-left: 70px;">' + 
							 '<div style="width: 40px; float: left;">' +
							 '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
							 '</div>' +
							 '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
							 "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";  

						$('a.modalCloseImg').hide();  

						$('#simplemodal-container').css("width","500px");
						$('#simplemodal-container').css("height","120px");

						 $(this).html(login_response); // Refers to 'status'

						// After 3 seconds redirect the 
						setTimeout('go_to_private_page()', 3000); 
					 }  
					 else // ERROR?
					 {  
						 var login_response = msg;
						 $('#login_response').html(login_response);
					 }  
      
				});  
		   }  
	}); // -- End AJAX Call --
	return false;
}); // end submit event
});

function go_to_private_page()
{
	window.location = 'index.php';
}

e o codigo onde valido é este, validacao.php:

<?php

session_start();
require_once ('../../ProjectManager/functions.php');

$login = new login;

$login->SetUsername($user);
$login->SetPassword($pass);
//$login->CheckLogin();

if($login->CheckLogin())
{
//header('Location: ../../ProjectManager/index.php');
}
else
{
$auth_error = '<div id="notification_error">The login info is not correct.</div>';
   	echo $auth_error;
//header('Location: ../../ProjectManager/index.php');
}

?>

esta é a classe que uso para verificar na base de dados se o user existe mesmo:

function CheckLogin()
	{
		try {
		    $stmt = $this->dbh->prepare("SELECT NAME, ACCESS_LEVEL
						FROM user WHERE USER = :user AND PASSWORD = :password AND ACTIVE = 1");
			$stmt->bindParam(':user', $this->Username);
			$stmt->bindParam(':password', $this->Password);
			$stmt->execute();
		} catch (PDOException $e) {
		    echo 'Query error: ' . $e->getMessage();
		}

		if($stmt->rowCount() > 0 )
		{	
			$result = $stmt->fetch(PDO::FETCH_BOTH);
			$_SESSION['USER'] = $this->Username;
			$_SESSION['NAME_USER'] = $result[0];
			$_SESSION['ACCESS_LEVEL'] = $result[1];

			return true;
		}
		else
		{
			return false;
		}

	}

o código do menu onde clico para chamar isto tudo é o que já coloquei anteriormente

PS: sei que no ficheiro do-login.php ha uma "contradição" por assim dizer, mas consegui resolver no validacao.php essa contradição :P

PS2: uma coisa extraordinária que eu descobri. no IE se eu colocar em VISTA DE COMPATIBILIDADE já aparece o modal do login, mas, perco os CSS, o menu fica-me desconfigurado, fica em lista normal sem os efeitos que la tenho no css 🤔


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

Não terá algo a ver com o atributo target="_self" ?

O que é que difere entre os 2 projectos?

E já agora, experimenta colocar este código dentro da $(function(){});

        $("#login_link").click
        (
                function()
                        {
                                $('#login_form').modal();
                        }
        );

Share this post


Link to post
Share on other sites
diokhan

este que tenho no pc da empresa é IE8, mas penso que o problema não seja da versão do IS, porque num projecto o mesmo sistema de login funciona e neste não, penso que não alterei nada para não funcionar neste :P


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
diokhan

o que difere de um projecto para o outro é a forma como é apresentada o menu,  este esta dentro de um DIV, e o outro não, fora isso é o mesmo sistema de login, só altera alguns dados por causa das opções base de dados e assim, vou experimentar fazer o que disseste e já digo algo se funciona ou não :P

Não terá algo a ver com o atributo target="_self" ?

O que é que difere entre os 2 projectos?

E já agora, experimenta colocar este código dentro da $(function(){});

        $("#login_link").click
        (
                function()
                        {
                                $('#login_form').modal();
                        }
        );

queres que eu coloque este código onde? é que eu já o tenho, é que eu não tenho nenhuma $(function(){});, tenho é

function(){

// Launch MODAL BOX if the Login Link is clicked
$("#login_link").click
(
	function()
		{
			$('#login_form').modal();
		}
);

é isto que querias ou isto é diferente?

e quanto ao target="_self" também não é que eu tirei e continuou na mesma, funciona no FFox e no IE nem ver


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
diokhan

este é o outro projecto, só isto que é diferente do outro que estou a ter problemas, porque os outros ficheiros são iguais, só diferem em alguns pontos que é campos base de dados e assim, penso que talvez se colocar este aqui também podem ajudar-me a perceber o porque de funcionar num lado e não funciona no outro :P

<?php 

if (!isset($_SESSION['USER'])){
/* Menu do index, sem o login efectuado */
echo'
	<ul id="menu3">
		<li><a href="restrito.php?opcao=index" target="_self">Home</a></li>
		<li><a href="restrito.php?opcao=services" target="_self">Services</a></li>
		<li><a href="#" target="_self">Products</a></li>
		<li><a href="restrito.php?opcao=contact" target="_self">Contact Us</a></li>
		<li><a href="#" id="login_link" target="_self">Login</a></li>
		<li><a href="restrito.php?opcao=register" target="_self">Register</a></li>
	</ul>
	';

}else{
/* Menu do index, com o login efectuado */
echo'
	<ul id="menu3">
		<li><a href="restrito.php?opcao=index" target="_self">Home</a></li>
		<li><a href="restrito.php?opcao=services" target="_self">Services</a></li>
		<li><a href="#" target="_self">Products</a></li>
		<li><a href="restrito.php?opcao=contact" target="_self">Contact Us</a></li>
		<li><a href="restrito.php?opcao=logout" target="_self">
				Logout - ['.$_SESSION["NAME_USER"].']</a></li>
	</ul>';
}

?>

<div id="login_form" style='display:none'>
<div id="status" align="left">
	<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1> 
		<div id="login_response"><!-- spanner --></div> 
	</center>
	<form id="login" action="javascript:alert('success!');">
		<input type="hidden" name="action" value="user_login">
		<input type="hidden" name="module" value="login">
		<label>User</label><input type="text" name="user" /><br />  
		<label>Password</label><input type="password" name="pass" /><br />  
		<label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" />
			<div id="ajax_loading">
				<img align="absmiddle" src="images/spinner.gif"> Processing...
			</div>
	</form>
</div>
</div>
</body>
</html>

PS: até no google chrome funciona bem, tanto um como o outro projecto, só o IE é que da barraca :wallbash:


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

Quanto ao javascript é mesmo isso....

Quanto à comparação.... hummm é estranho.... :S Aparentemente está tudo igual. Experimenta colocar o display:inline.

EDIT: E o estranho é que o IE8 até é o mais 'standard' de todos os IE's :S

Share this post


Link to post
Share on other sites
diokhan

Quanto ao javascript é mesmo isso....

Quanto à comparação.... hummm é estranho.... :S Aparentemente está tudo igual. Experimenta colocar o display:inline.

se eu coloco o display inline depois fica sempre aquela caixa do login aberta, tem mesmo de ser display none

eu por acaso instalei o google chrome e o opera para testar e funcionou bem nos dois, só mesmo o IE que não :thumbsup:

e desde já agradeço toda a ajuda  :P


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

Ups esqueci-me de especificar onde... no #login_form (ou seja na div que será modal) :P

E verifica se ele aparece direito.

EDIT: Por 'direito' quero dizer se aparece no fundo da página sem ser em modal e se aparece como devia.

Share this post


Link to post
Share on other sites
diokhan

eu percebi depois onde era :P

eu fiz o display inline e aparece a caixa do modal, mas depois de fazer o login a caixa continua a vista, por isso voltei a por display a none

ya aparece bem, quer dizer, só não aparece a caixa a volta branca nem deixa a janela toda cinzenta de fundo como devia fazer com a modal, mas aparece a caixa de login e efectua o login


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
mAiN_iNfEcTiOn

Hum.... que estranho ... isso parece ser um problema de CSS's, provavelmente da modal... Algo não compativel com o IE :S

Eu normalmente uso o JQuery BlockUI e funciona perfeito :S mesmo com IE .... que estranho

Share this post


Link to post
Share on other sites
diokhan

o mais interessante é que num projecto funciona e no outro não, e são muito parecidos, vou dar uma vista de olhos no css, obrigado pela ajuda :P


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites
diokhan

na boa. eu já agradeço a ajuda que deste :P


...Join the dark side...and get a free cookie...

Share this post


Link to post
Share on other sites

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
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.