modal login IE

diokhan · December 16, 2009 at 10:49 AM

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

mAiN_iNfEcTiOn · December 16, 2009 at 11:11 AM

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' 😛

diokhan · December 16, 2009 at 11:12 AM

ok eu vou já corrigir isto. obrigado 👍

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 😛

diokhan · December 16, 2009 at 11:38 AM

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 ?

mAiN_iNfEcTiOn · December 16, 2009 at 01:07 PM

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 😛

diokhan · December 16, 2009 at 01:22 PM

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 😛

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 ?

yoda · December 16, 2009 at 02:29 PM

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

mAiN_iNfEcTiOn · December 16, 2009 at 02:31 PM

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

diokhan · December 16, 2009 at 02:31 PM

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 😛

diokhan · December 16, 2009 at 02:33 PM

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 😛

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

diokhan · December 16, 2009 at 02:47 PM

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 😛

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

mAiN_iNfEcTiOn · December 16, 2009 at 03:31 PM

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

diokhan · December 16, 2009 at 03:33 PM

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 👍

e desde já agradeço toda a ajuda 😛

mAiN_iNfEcTiOn · December 16, 2009 at 03:49 PM

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

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.

diokhan · December 16, 2009 at 03:51 PM

eu percebi depois onde era 😛

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

mAiN_iNfEcTiOn · December 16, 2009 at 03:57 PM

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

diokhan · December 16, 2009 at 03:59 PM

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 😛

mAiN_iNfEcTiOn · December 16, 2009 at 04:25 PM

Ok... desculpa lá não poder ajudar mais...

diokhan · December 16, 2009 at 04:35 PM

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

modal login IE

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information