messagebox combi php en javascript

blackeagle67 · 10 nov 2009

Hallo allemaal,

Ik heb weer een vraag. Eerder heb ik een vraag gesteld over javascript form submit.
Dit is nu wel opgelost maar er was ook nog een messagebox die wel verscheen toen ik dit nog niet had opgelost. Nu is het inloggen wel gemaakt maar de messagebox verschijnt niet.

Hieronder staat de functie:

Code:

//Berichtvenster weergeven
function Berichtvenster( bericht ) {
	$('body').append('<div id="berichtvenster"></div>');
	var arrPageSizes = _getPageSize();
	
	$('#berichtvenster').css({
		top:		arrPageSizes[1] - 51,
		left:		0
	}).fadeIn().oneTime("3s", function() {
		$('#berichtvenster').fadeOut(2000, function() {
			$(this).remove();
		});
	});
	
	$('#berichtvenster').text(bericht);
}

en

Code:

/*BERICHT VENSTER*/
div#berichtvenster {
	position: absolute;
	display: none;
	top: 0;
	width:100%;
	height: 50px;
	border-top: 1px solid #000;
	background-color: #1d9cdf;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	color: #bf1110;
	z-index: 1000;
}

En dit verscheen als:

Code:

				else 
				{
					print ($_SESSION['info']['login'][1]);
				}	

$_SESSION['info']['login'][0]  = 'Gebruikersnaam onbekent';
$_SESSION['info']['login'][1]  = 'Combinatie van gebruikersnaam en wachtwoord niet correct';

Bij het inloggen.
Nou is mijn vraag natuurlijk. Hoe laat ik dit berichtvenster weer zien.
Als ik nu verkeerde informatie invoer ga ik naar mijn 2e bestand en zie ik een wit scherm met de tekst

Moeilijkheid:
Combi van php en java.
alles word in index.php laten zien maar alle handelingen worden in andere bestanden gedaan.
Form submit naar ander php form waar ook error message word weergegeven.

That Guy · 10 nov 2009

Ik snap er helemaal geen bal van.

Je hebt je jQuery (?) code en css om een 'popup' te laten zien. Werkt deze nou of niet? Wat is er met die php code die je ziet? Kan je een voorbeeld online zetten?

:thumb:

blackeagle67 · 10 nov 2009

Het spijt mij heel erg voor de onduidelijke uitleg.
Blijkt maar weer dat ik slecht ben in het uitleggen van dingen.

Helaas kan ik dit niet online zetten hoe graag ik ook zou willen.

Heel kort door de bocht is dus: de messagebox moet weer werken.
De messagebox verschijnt als een gebruiker verkeerde informatie invoert.

Dit is de code in IDS8100_m40.php die ik gebruik om de login gegevens te checken.

Code:

if(!isset($_SESSION['AC001']) || !isset($_SESSION['hash']))
{
	if(isset($_GET['go']) && $_GET['go'] == 'login')
	{
		$Username = $_POST['Username'];
		$Password = md5($_POST['Password']);
		$Username = mysql_real_escape_string($Username);
		$Password = mysql_real_escape_string($Password);

		if(!empty($Username) && !empty($Password))
		{
			$select = "SELECT * FROM
						ergens
					   WHERE
						iets = '".$Username."'";
			$query = mysql_query($select)or die(mysql_error());
			$aantal = mysql_num_rows($query);
			$result = mysql_fetch_array($query);
			
			if($aantal == '1')
			{
				if($result['AC010'] == $Password) 
				{
					$_SESSION['AC001'] = $Username;
					$_SESSION['hash']  = md5(time());
					
					header('Location: '.$_SERVER['HTTP_REFERER']);
					
				} 
				else 
				{
					print ($_SESSION['info']['login'][1]);
				}		
			} 
			else 
			{
				print ($_SESSION['info']['login'][0]);
			}
		} 
		else 
		{
			print ($_SESSION['info']['login'][1]);
		}
		exit();
	}
	print '	<SCRIPT LANGUAGE="JavaScript">
			<!-- Begin
			function submitForm(s) 
			{
			s.value = "Even gedult a.u.b.";
			return true;
			}

			function changePage() 
			{
				window.location = "../admin/"
			}
			// Eind -->
			</script>
			
		  <body>
		  <form name="myform" method="POST" action="IDS8100_M40.php?go=login" onSubmit="return submitForm(this.submitbutton)">
	<div id="topper">WEB-site beheer</div>
	<div id="bar">
		<table cellspacing="0" border="0" width="100%">
			<tr>
				<td width="25%">'.$_SESSION['info']['sysname'][0].'</td>
				<td style="text-align: center;">WEB-site beheer</td>
				<td width="25%" style="text-align: right;">IDS8100/ 01<td>
			</tr>
		</table>
	</div>
	<div id="werkbalk">
		<ul id="menu">
			<li>
				Bestand
				<ul>
					<li class="off">Systeembeheer</li>
					<li class="off">Paginabeheer</li>
					<li class="off">Producten</li>
					<li class="off">Uitloggen</li>
				</ul>
			</li>
			<li>
				Bewerken
				<ul>
					<li class="off">Wijzigen</li>
					<li class="off">Toevoegen</li>
					<li class="off">Verwijderen</li>
					<li class="off">Copie&euml;eren</li>
					<li class="off">Opslaan</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="werkbalkicons">
		<img src="../design/L_Icons/Obj0610N.bmp" title="'.$_SESSION['info']['icons'][0].'">
		<img src="../design/L_Icons/Obj0611N.bmp" title="'.$_SESSION['info']['icons'][1].'">
		<img src="../design/L_Icons/Obj0612N.bmp" title="'.$_SESSION['info']['icons'][2].'">
		<img src="../design/L_Icons/Obj0613N.bmp" title="'.$_SESSION['info']['icons'][3].'">
		<img src="../design/L_Icons/Obj0614N.bmp" title="'.$_SESSION['info']['icons'][4].'">
		
		<img src="../design/L_Icons/Obj0620N.bmp" title="'.$_SESSION['info']['icons'][5].'">
		<img src="../design/L_Icons/Obj0621N.bmp" title="'.$_SESSION['info']['icons'][6].'">
		<img src="../design/L_Icons/Obj0622N.bmp" title="'.$_SESSION['info']['icons'][7].'">
		<img src="../design/L_Icons/Obj0623N.bmp" title="'.$_SESSION['info']['icons'][8].'">
		
		<img src="../design/L_Icons/Obj0630N.bmp" title="'.$_SESSION['info']['icons'][9].'">
		<img src="../design/L_Icons/Obj0631N.bmp" title="'.$_SESSION['info']['icons'][10].'">
		<img src="../design/L_Icons/Obj0632N.bmp" title="'.$_SESSION['info']['icons'][11].'">
		<img src="../design/L_Icons/Obj0633N.bmp" title="'.$_SESSION['info']['icons'][12].'">
		<img src="../design/L_Icons/Obj0634N.bmp" title="'.$_SESSION['info']['icons'][13].'">
		
		<img src="../design/L_Icons/Obj0650N.bmp" title="'.$_SESSION['info']['icons'][14].'">
		<img src="../design/L_Icons/Obj0651N.bmp" title="'.$_SESSION['info']['icons'][15].'">
		<img src="../design/L_Icons/Obj0652N.bmp" title="'.$_SESSION['info']['icons'][16].'">
		
		<img src="../design/L_Icons/Obj0680N.bmp" title="'.$_SESSION['info']['icons'][17].'">
		<img src="../design/L_Icons/Obj0681N.bmp" title="'.$_SESSION['info']['icons'][18].'">
		
		<img src="../design/L_Icons/Obj0690N.bmp" title="'.$_SESSION['info']['icons'][19].'">
	</div>
	<div id="inner">
		<div id="inloggen">
			<div id="kop">Welkom bij WEB-site beheer</div>
			<div id="body">
				<b>Voer de onderstaande gegevens in om u aan te melden:</b><br>
				<br>
				<table border="0" width="100%" celspacing="0">
					<tr>
						<td width="30%">Gebruikersnaam</td>
						<td width="70%"><input type="text" id="AC001" name="Username" style="width: 98%;" onFocus=\'style.background="#DFF2FE"\' onBlur=\'style.background="#FFFFFF"\'"></td>
					</tr>
					<tr>
						<td width="30%">Wachtwoord</td>
						<td width="70%"><input type="password" id="AC010" name="Password" style="width: 98%;" onFocus=\'style.background="#DFF2FE"\' onBlur=\'style.background="#FFFFFF"\'"></td>
					</tr>
					<tr>
						<td colspan="2" align="right">
							<input type="submit" id="send"   class="ui-button ui-state-default ui-corner-all" value="O.K." name="submitbutton">
							<input type="button" id="cancel" class="ui-button ui-state-default ui-corner-all" value="Annuleren" onClick="changePage()">
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	</form>
	</body>';

Maar in deze pagina word het bericht dus weergegeven. Eigenlijk moet dit in index.php.
In index.php word alles ge-include.

HTML:

<!-- LOAD STYLESHEETS -->
	<link href="../style/blitzer/IDS8100_M04.css" rel="stylesheet" type="text/css" />
	<link href="../style/IDS8100_M00.css" 		  rel="stylesheet" type="text/css" />
	<!-- END STYLESHEETS -->
	
	<!-- LOAD JAVASCRIPT -->
	<script src="../javascript/IDS8100_M02.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M04.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M06.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M00.js" type="text/javascript" language="javascript"></script>
	<!-- END JAVASCRIPT -->
</head>

<body>
	<div id="main" style="z-index: 1;"></div>
</body>

De volgende functie zou dus de messagebox moeten weergeven.

Code:

//Berichtvenster weergeven
function Berichtvenster( bericht ) {
	$('body').append('<div id="berichtvenster"></div>');
	var arrPageSizes = _getPageSize();
	
	$('#berichtvenster').css({
		top:		arrPageSizes[1] - 51,
		left:		0
	}).fadeIn().oneTime("3s", function() {
		$('#berichtvenster').fadeOut(2000, function() {
			$(this).remove();
		});
	});
	
	$('#berichtvenster').text(bericht);
}

Helaas doet deze dat niet.
Nou ben ik ook nog niet zo goed in javascript dus... spaar me.

Helaas denk ik niet dat dit veel zal verduidelijken.

vraag gerust om meer informatie.

Alleen dit bestand bevat functies die door een voorgaande stagiair zijn gemaakt.
<script src="../javascript/IDS8100_M00.js" type="text/javascript" language="javascript"></script>
De rest zijn allemaal standaard javascript en jquery codes.

/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License

/*
* jQuery UI 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI

/**
* jQuery.timers - Timer abstractions for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
* Date: 2009/02/08
*
* @author Blair Mitchelmore
* @version 1.1.2

/**
* jscolor, JavaScript Color Picker
*
* @version 1.2.2
* @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License
* @author Honza Odvarko <honza@odvarko.cz>
* @created 2008-06-15
* @updated 2009-02-03
* @link http://jscolor.com
*/

That Guy · 10 nov 2009

Zonder een online voorbeeld kan ik niet debuggen - dat zal je zelf moeten doen. Maar hier wat tips:

Gebruik firefox. Deze heeft een foutconsole (ctrl+shift+J of tools>error console). Hierin komen alle javascript fouten te staan. Wat je moet doen is m openen, alles wissen, en dan naar je pagina gaan. Dan zie je waarschijnlijk de fout!

Daarnaast gebruik je jQuery (of iets soortgelijks). Klinkt stom, maar include je de jQuery.js file wel? Anders kan je natuurlijk geen kQuery code gebruiken.

Nog wat check-puntjes:

1. display staat op 'none' van je message-box css. Klopt dit? (is het voor de javascript om het op 'block' te zetten?
2. bestaat de div welke het script aanroept wel?

:thumb:

blackeagle67 · 10 nov 2009

Ja onderstaande code zijn de jquery bestanden.

Code:

<script src="../javascript/IDS8100_M02.js" type="text/javascript" language="javascript"></script>
    <script src="../javascript/IDS8100_M04.js" type="text/javascript" language="javascript"></script>
    <script src="../javascript/IDS8100_M06.js" type="text/javascript" language="javascript"></script>

Er zit een fade effect op de message box en je ziet de messagebox eerst niet. Waarschijnlijk daarom staat display op none.

De div voor "berichtvenster" bestaat niet.
Ik dacht dat met .append de div in het document word geplaatst.

//Berichtvenster weergeven
function Berichtvenster( bericht ) {
$('body').append('<div id="berichtvenster"></div>');
var arrPageSizes = _getPageSize();

$('#berichtvenster').css({
top: arrPageSizes[1] - 51,
left: 0
}).fadeIn().oneTime("3s", function() {
$('#berichtvenster').fadeOut(2000, function() {
$(this).remove();
});
});

$('#berichtvenster').text(bericht);
}

volgens
<script src="../javascript/IDS8100_M02.js" type="text/javascript" language="javascript"></script>
staat de body op null

Geen flauw idee wat het effect hiervan is.
Deze code is mij gegeven en is erg ingewikkeld.
Ik werd gewoon in het diepe geworpen.

Er staan vele waarschuwingen in de fouten console:

Waarschuwing: Fout tijdens het parsen van waarde voor eigenschap ‘filter’. Declaratie genegeerd.
Bronbestand: http://localhost/login/test/style/blitzer/IDS8100_M04.css
Regel: 72

zo zijn er nog wel meer. maar alleen in de css tijdens het laden. Geen fouten bij het submitten van de form.

Ik waardeer de hulp.

That Guy · 10 nov 2009

ah! daar kunnen we wat mee:

volgens
<script src="../javascript/IDS8100_M02.js" type="text/javascript" language="javascript"></script>
staat de body op null

'body' is null - waarschijnlijk deze regel?

[JS]$('body').append('<div id="berichtvenster"></div>');[/JS]

nu, ik ben compleet anti-javascript libraries, en ik kan er totaal niet mee overweg, maar volgens mij pakt dit het element 'body' en flikkert daar die HTML string in. Nou, daar gaat het dus fout. probeer zoiets (ja, 3 regels, maar dan werkt t wel):
[JS]var mijnDiv = document.createElement('div');
mijnDiv.setAttribute('id', 'berichtvernster');
document.body.appendChild(mijnDiv);[/JS]

[edit]oh, trouwens, die 'filter css' geval: 'filter' is een IE-only css property, dus FF (EN alle andere browsers) geven dan een fout omdat 'ie eigenlijk niet bestaat[/edit]

blackeagle67 · 17 nov 2009

Wat doet deze functie nou precies.
Wat is bericht :S

Code:

//Berichtvenster weergeven
function Berichtvenster( bericht ) 
{
	var mijnDiv = document.createElement('div');
	mijnDiv.setAttribute('id', 'berichtvenster');
	document.body.appendChild(mijnDiv);

	var arrPageSizes = _getPageSize();
	
	$('#berichtvenster').css({
		top:		arrPageSizes[1] - 51,
		left:		0
	}).fadeIn().oneTime("3s", function() {
		$('#berichtvenster').fadeOut(2000, function() {
			$(this).remove();
		});
	});
	
	$('#berichtvenster').text(bericht);
}

Het volgende staat in de index.php
in index.php word ids8100_m40 ge-include.
wat doet dit precies?

Code:

<body>
	<div id="main" style="z-index: 1;"></div>
</body>

Ik zou graag een beetje meer uitleg hebben

nielskiev · 17 nov 2009

Ik zie nergens die verwijzing naar jquery

blackeagle67 · 17 nov 2009

De index.php
Hier worden de bestanden aangeroepen.
Op de 1 of andere manier word ids8100_m40 in index.php ge-include maar heb geen idee hoe

Code:

<?php

//Foutmelding controle
ini_set('display_errors', 1); // 0 = uit, 1 = aan
error_reporting(E_ALL);

//CONFIGURATIE BETAND OPHALEN
include_once "IDS8100_M20.php";

//UITLOGGEN
if(isset($_GET['go']) && $_GET['go'] == 'logout') {
	session_destroy(); //SESSIE VERNIETIGEN
	header("Location: ../admin/index.php"); //DOORSTUREN NAAR DE WEBSITE
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<META name="ROBOTS" content="NOINDEX, NOFOLLOW" />
	<title>TechID Engineering BV | Beheer</title>
	
	<!-- LOAD STYLESHEETS -->
	<link href="../style/blitzer/IDS8100_M04.css" rel="stylesheet" type="text/css" />
	<link href="../style/IDS8100_M00.css" 		  rel="stylesheet" type="text/css" />
	<!-- END STYLESHEETS -->
	
	<!-- LOAD JAVASCRIPT -->
	<script src="../javascript/IDS8100_M02.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M04.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M06.js" type="text/javascript" language="javascript"></script>
	<script src="../javascript/IDS8100_M00.js" type="text/javascript" language="javascript"></script>
	<!-- END JAVASCRIPT -->
</head>

<body>
	<div id="main" style="z-index: 1;"></div>
</body>
</html>

laat maar ik heb al gevonden hoe de pagina word toegevoegd. Met behulp van:
<script src="../javascript/IDS8100_M00.js" type="text/javascript" language="javascript"></script>

onderstaande is de code:

Code:

$(document).ready(function(){
	//Systeem laden IDS8100
	var pagina = getUrl(window.location);
    if (pagina != '') {
      surf( pagina );
	} else {
		$.ajax({
		  url: "IDS8100_M40.php",
		  cache: false,
		  success: function(html){
			$('#main').html(html);
		  }
		});
	}
	
	var arrPageSizes = _getPageSize();
	$('body').css({
		height:		arrPageSizes[1] - 25
	})
	
	//Zorgen dat er niets geselecteerd kan worden binnen de applicatie
	//$("html").disableSelection();
});

blackeagle67 · 17 nov 2009

Ik moet nu het berichtvenster aanroepen.

Onderstaand "werd" de data meegegeven aan het berichtvenster.
Deze code stond in IDS8100_M40.php

Code:

function(data)
				{
					if(data == "OK") 
					{
						Berichtvenster(data);
						$("#inloggen #body #send").val("O.K.");
					}
				}

Hieronder zie je dan dat (data) bericht is geworden en dat bericht in het berichtvenster word geplaatst

Code:

//Berichtvenster weergeven
function Berichtvenster( bericht ) 
{
	var mijnDiv = document.createElement('div');
	mijnDiv.setAttribute('id', 'berichtvenster');
	document.body.appendChild(mijnDiv);

	var arrPageSizes = _getPageSize();
	
	$('#berichtvenster').css({
		top:		arrPageSizes[1] - 51,
		left:		0
	}).fadeIn().oneTime("3s", function() {
		$('#berichtvenster').fadeOut(2000, function() {
			$(this).remove();
		});
	});
	
	$('#berichtvenster').text(bericht);
}

Nou is dus het probleem dat ik het berichtvenster moet aanroepen.
Als ik het met de oude code probeer werkt het veranderen van de tekst in de button niet meer.
Hoe kan ik dit het beste aanpakken?

nielskiev · 17 nov 2009

Als je jquery gebruikt heb je een file nodig die jquery heet.. daarna werken pas de jquery functies die jij wilt gebruiken..

kijk op www.jquery.com voor meer info

blackeagle67 · 19 nov 2009

ik heb het volledig anders aangepakt en het werkt nu.
Hartelijk bedankt voor de moeite.

Mvg Blackeagle67

nielskiev · 19 nov 2009

blackeagle67 zei:
ik heb het volledig anders aangepakt en het werkt nu.
Hartelijk bedankt voor de moeite.

Mvg Blackeagle67

Vertel eens hoe

blackeagle67 · 19 nov 2009

Nou ik kreeg dus een stuk code in de handen gedrukt door mijn stagebedrijf.
Hierbij vertelden ze mij dat alles werkte behalve het met enter submitten van de gegevens.
Hier moest ik dus een oplossing voor bedenken.

Het meest logische leek het plaatsen van het <form> element.
Helaas werkte hierdoor het veranderen van de tekst in de button niet meer en het bericht venster verscheen ook niet meer. Hier heb ik toen een hele tijd op zitten *****n.

Daarom kwam ik hier op gegeven moment ook mee aan zetten op dit forum.
Dit leek op gegeven moment niks te worden. Toen heb ik gevraagd of ik opnieuw de onveranderde code mocht hebben.

Toen heb ik naar een manier gezocht om de gegevens te submitten zonder <form> tags.
Dit vond ik zo niet.
Terwijl ik hiernaar zocht las ik iets over het capturen van de event van enter.
Dit heb ik ook bekeken en kwam hiermee tot de oplossing.

dit heb ik toen gedaan:

Door het vele bekijken van tutorials kwam ik erachter dat het submitten met javascript libraries gebeurde.
Dit:

Code:

			$("#inloggen #body #send").click(function() {
				$("#inloggen #body #send").val("Even gedult a.u.b.");
				$.post("IDS8100_M40.php?go=login", { AC001:$("#AC001").val(),AC010:$("#AC010").val() }, 
				function(data){
					if(data == "OK") {
						window.location = "index.php";
					} else {
						Berichtvenster(data);
						$("#inloggen #body #send").val("O.K.");
					}
				});
			});

Met behulp van het capturen van de enter toets kwam ik hierop:

Code:

		 function runScript(e) {
		    if (e.keyCode == 13) {
		        // Voer de code uit als de keycode 13 dus de enter toest, word ingedrukt.
				$("#inloggen #body #send").val("Even gedult a.u.b.");
		        $.post("IDS8100_M40.php?go=login", { AC001:$("#AC001").val(),AC010:$("#AC010").val() }, 
				function(data){
					if(data == "OK") {
						window.location = "index.php";
					} else {
						Berichtvenster(data);
						$("#inloggen #body #send").val("O.K.");
					}
				});
		      }
			}

HTML:

<td width="30%">Wachtwoord</td>
<td width="70%"><input type="password" id="AC010" name="Password" style="width: 98%;" onFocus=\'style.background="#DFF2FE"\' onBlur=\'style.background="#FFFFFF"\' onkeypress="return runScript(event)"></td>

nielskiev · 19 nov 2009

OK suc6 ermee

messagebox combi php en javascript

blackeagle67

Gebruiker

That Guy

Meubilair

blackeagle67

Gebruiker

That Guy

Meubilair

blackeagle67

Gebruiker

That Guy

Meubilair

blackeagle67

Gebruiker

nielskiev

Gebruiker

blackeagle67

Gebruiker

blackeagle67

Gebruiker

nielskiev

Gebruiker

blackeagle67

Gebruiker

nielskiev

Gebruiker

blackeagle67

Gebruiker

nielskiev

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy