PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : popup box mit mysql daten befüllen

thats
21.02.2007, 10:11:54
einen schönen vormittag an alle forianer,

für ein kleines projekt habe ich folgendes problem.
ich stelle eine tabelle dar, auf welcher sich auch ein "link" befindet, welcher dann - ohne die seite neu zu laden - eine popup box anzeigt mit kontaktdaten.

soweit hab ich das auch schon hinbekommen, mit html test text, aber weiter bin ich noch nicht gekommen.
hier stehe ich nämlich vollkommen an, denn wie soll ich nun die box befüllen ohne die seite neu zu laden?
hab das schon in einer community gesehen, die zeigen so userdetails an. nur wie's genau funktioniert ist eine große frage.

hier noch meine test scripts

index.php
<html>
<head>
<title>Sonderfahrten</title>
<SCRIPT language="JavaScript" src="./images/default.js" TYPE="text/javascript"></SCRIPT>
<link rel="Stylesheet" type="text/css" href="./css/screen.css" media="screen">
<link rel="Stylesheet" type="text/css" href="./css/print.css" media="print">
</head>
<body>
<!-- Inhalt -->
<div id="header">
<a id="t" name="t">&nbsp;</a>
<img src="images/ivb_wirbewegen.gif" alt="IVB Logo" title="IVB Logo" />
</div>
<input type="hidden" name="auftragid" value="">
<div id="brkr">
Ansicht: Fahrdienstleitung
</div>
<!-- Obere Navigation -->
<div id="navi">
<a class="ext" href="" title="Dummytext">Dummytext</a>&nbsp;|
<a class="ext" href="" title="Dummytext">Dummytext</a>&nbsp;|
<a class="ext" href="">Dummytext</a>
</div>
<div id="navi2">
<a title="Version" style="text-align:left;">Version 0.1</a>
<a href="" title="Impressum">Impressum</a>&nbsp;|
<a href="" title="Haftungsausschluss">Haftungsausschluss</a>&nbsp;|
</div>
<div id="header2">&nbsp;</div>

<!-- Menüs -->
<div id="menus">
<h3>DUMMY</h3>
<ul>
<li><a href="fontproperty.html">Dummytext</a></li>
<li><a href="textproperty.html">Dummytext</a></li>
<li><a href="borderproperty.html">Dummytext</a></li>
</ul>

<!-- Close DIV-Container "menus" -->
</div>

<div id="content">
<h1>Sonderfahrten im MONAT</h1>

<table class="brreft" cellspacing="1" cellpadding="2" width="830px">
<tr>
<td class="wert" width="60px">Auftrag</td>
<td class="wert" width="100px">Termin</td>
<td class="wert" width="70px">Bus Nr.</td>
<td class="wert" width="120px">Fahrer</td>
<td class="wert" width="180px">Auftragstext</td>
<td class="wert" width="180px">Weitere Infos</td>
<td class="wert" width="120px">Kontaktinfos</td>
</tr>
<tr>
<td class="vers">700027</td>
<td class="vers">01.02.2007</td>
<td class="vers">IL-630 AT</td>
<td class="vers">Singer Dietmar</td>
<td class="vers">Akademisches Gymnasium</td>
<td class="vers">Sonderfahrt Bus mit 1 Gelenkbus lt EE1 K11</td>
<td class="vers"><a href="javascript:textbox(123456);" onClick="showbox();">klick</a></td>
</tr>
</table>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p id="pageup"><a href="#t">nach oben</a></p>
<!-- Close Container "Content" -->
</div>

<?php
include("./popup.php");
?>
</body>
</html>


popup.php:

<div id="showimage" style="position:absolute;width:250px;left:250;top:250; visibility:hidden;">
<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36">
<tr>
<td id="dragbar" style="cursor:hand" width="100%"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
color="#FFFFFF"><strong><small>Kontakt</small></strong></font></layer></ilayer></td>
<td style="cursor:hand" valign="middle"><a href="#" onClick="hidebox();return false"><b><font color="#f5f5f5">x</font></b></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- Inhalt ---->

Hier sollte der Inhalt stehen

<!-- Inhalt----->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>



default.js:

//Popup Box

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage

var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

function showbox() {
crossobj.style.left=window.event.clientX-250;
crossobj.style.top=window.event.clientY+20;
crossobj.style.visibility="visible"
}
|Coding
21.02.2007, 10:19:05
Ich weis nicht in wiefern Du mit PHP per Du bist, aber schau Dir doch mal folgendes an:

http://www.selfphp.de/praxisbuch/praxisuebersicht.php?group=7
thats
21.02.2007, 10:23:38
php stellt für mich da nicht das große problem dar, was mich eher vor ein problem stellt ist das befüllen der popup box.

wär sogesehen ja kein problem, wenn der inhalt nicht wechseln sollte.
aber hier das zusammenspiel zwischen php am server (was ja vorab passieren sollte) und javascript bzw html im nachhinein kann ich derzeit noch nicht ganz koordinieren, weil ich mit javascript eigentlich weniger am hut hatte bis dato