• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

diokhan

modal login IE

19 mensagens neste tópico

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 :hmm:

<?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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 :hmm:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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 :hmm:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Vista de compatibilidade se não me engano é mudar do IE8 para o IE7.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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();
                        }
        );

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora