Avatar billede culex Nybegynder
23. maj 2009 - 18:41 Der er 6 kommentarer og
1 løsning

Xoops module med div update

Hejsa eksperter. Jeg har lavet et on-air modul til xoops, som ganske simpelt virker som en block der checker time() med data fra mysql og så viser hvilken event der er passende for dette tidsrum med billede, titel, navn samt hvad der spilles i radioen på det tidspunkt. Selve modulet virker fint nok; men der går jo som regel kun ca 3-4 min mellem hver sang og det ville virke skørt at sætte en meta refresh ind og hermed loade hele siden igen, og så var det jeg tænkte på ajax, men her har jeg nogle problemer.

1) Block.php indlæser tid, data fra db og sender info igennem xoops smarty -> template
2) block.html viser data på sidens front og hvor ellers den skal vises.
3) anvenden dhtml proticker til at vise nuværende program og næste program og disse sider er vist i en <div id="msg0"> og <div id="msg1">


NB fandt denne læsning på nettet til smarty

[code]$text = $xoopsTpl->fetch('db:admin_smartytest.html', null, null,FALSE);
$objResponse->assign("div1","innerHTML",$text);[/code]

Hvordan sætter man det hele sammen så man kan opdatere disse div'er uden at genindlæse hele siden hver gang :-s ?
Avatar billede ebusiness Nybegynder
23. maj 2009 - 23:07 #1
Der er to delprocesser:

1. Du skal lave en php fil som spytter de data du skal bruge ud i en lettilgængelige form, det kunne fx være en kommasepareret liste:

[code]//kode som henter data indsættes her

echo "$billed,$titel,$navn,$nummer"[/code]

2. Hent med jævne mellemrum disse data og brug dem til at opdatere siden, jeg har sammensat funktioner til at hente dine data og så langt som til at læse dem ind i et array hvorfra du let kan tilgå hvert enkelt stykke information. Du skal blot indsætte den rigtige sti nederst så henter siden data en gang hvert minut (hvert 60000 millisekund).

Jeg kan ikke skrive den kode som opdaterer siden da jeg ikke kender den HTML side som den skal bruges i, men hvis du er i tvivl om hvordan du gør så start ihvertfald med at læse op på innerHTML funktionen: http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

Det er meningen at du skal tilføje den nødvendige kode i handleResponse funktionen.

[code]<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){
    xmlhttp=null;
    if(window.XMLHttpRequest){// code for Firefox, Opera, IE7, etc.
        xmlhttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(xmlhttp!=null){
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
}

function state_Change(){
    if(xmlhttp.readyState==4){// 4 = "loaded"
        if(xmlhttp.status==200){// 200 = "OK"
            handleResponse(xmlhttp.responseText);
        }
    }
}
function handleResponse(datastring){
    var dataarray=datastring.split(",")
}
setInterval(loadXMLDoc("datahaandteringsfilen.php"),60000)
</script>[/code]
Avatar billede ebusiness Nybegynder
23. maj 2009 - 23:11 #2
Hov, der gik et eller andet galt med formateringen i det indlæg, jeg prøver lige at poste kode stumperne igen:

//kode som henter data indsættes her

echo "$billed,$titel,$navn,$nummer"


--- og ---


<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){
    xmlhttp=null;
    if(window.XMLHttpRequest){// code for Firefox, Opera, IE7, etc.
        xmlhttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(xmlhttp!=null){
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
}

function state_Change(){
    if(xmlhttp.readyState==4){// 4 = "loaded"
        if(xmlhttp.status==200){// 200 = "OK"
            handleResponse(xmlhttp.responseText);
        }
    }
}
function handleResponse(datastring){
    var dataarray=datastring.split(",")
}
setInterval(loadXMLDoc("datahaandteringsfilen.php"),60000)
</script>
Avatar billede culex Nybegynder
23. maj 2009 - 23:30 #3
Kanont, har ikke lige set om det virker men kigger på det imorgen.. Prøver lige at sætte den kode ind jeg har i mine 2 filer phpfilen og templatefilen som behandler data fra den.. Håber ikke det kommer til se alt for uoverskueligt ud.

(simple_block.php)

<?php


function b_onair_show() {
    include_once XOOPS_ROOT_PATH.'/modules/onair/include/functions.php';
    global $xoopsDB,$xoopsModuleConfig, $XoopsConfig;
    $nowday=date('w');
    $nextstop="00:00:00";
    $oa_imagedir = oa_getmoduleoption('imagedir');
    $oa_shothigh = oa_getmoduleoption('shotheight');
    $oa_shotwide = oa_getmoduleoption('shotwidth');
    $timetype = oa_getmoduleoption('timetype');
   
    if ($timetype=='1')
    { $nowtime =date('h:i:s a');    }
    else if ($timetype=='0'){$nowtime =date('H:i:s');}
    $block = array();
    $myts =& MyTextSanitizer::getInstance();
$sql = "SELECT * FROM  ".$xoopsDB->prefix("oa_program")." WHERE ('$nowtime' BETWEEN oa_start AND oa_stop) AND '$nowday' = oa_day ORDER BY oa_day,oa_start LIMIT 1";
    $result=$xoopsDB->queryF($sql);
   
    while($myrow=$xoopsDB->fetchArray($result))
    {
   
    $message = array();
    $oa_pluginname = $myrow['oa_plugin'];
    include XOOPS_ROOT_PATH.'/modules/onair/plugins/plugins.php';
    $message['id'] = $myrow['oa_id'];
    $message['day'] = numbers2daysblock($myrow['oa_day']);
    if ($timetype=='1'){
    $message['start'] = date('h:i:s a', strtotime($myrow['oa_start']));
    $message['stop'] =  date('h:i:s a', strtotime($myrow['oa_stop']));
    $nextstop =  date('h:i:s a', strtotime($myrow['oa_stop']));
        } else if ($timetype=='0'){
    $message['start'] = date('H:i:s', strtotime($myrow['oa_start']));
    $message['stop'] =  date('H:i:s', strtotime($myrow['oa_stop']));
    $nextstop =  date('H:i:s', strtotime($myrow['oa_stop']));
        }
    $title = $myts->stripSlashesGPC($myrow["oa_title"]);
    $message['title'] = $title;
    $station = $myts->stripSlashesGPC($myrow["oa_station"]);
    $message['station'] = $station;
    $name = $myts->stripSlashesGPC($myrow["oa_name"]);
    $message['name'] = $name;
    $description = $myts->stripSlashesGPC($myrow["oa_description"]);
    $message['description'] = $description;   
    $image = $myrow["oa_image"];
    $message['image'] = "<img src='".XOOPS_URL."/".$oa_imagedir.$image."' height='".$oa_shothigh."' width='".$oa_shotwide."' alt='"._VISITWEBSITE."' /></img>";
    $message['host'] = _MB_ONAIR_HOST;
    $block['onair'][] = $message;
    }
    $sqlnext = "SELECT * FROM  ".$xoopsDB->prefix("oa_program")." WHERE '$nextstop' <= oa_start AND '$nowday' = oa_day order by oa_day, oa_start, oa_stop LIMIT 1";
    $resultnext=$xoopsDB->queryF($sqlnext);
        if ( $resultnext ){

    while($myrownext=$xoopsDB->fetchArray($resultnext))
    {
    $messagenext = array();
    $messagenext['id'] = $myrownext['oa_id'];
    $messagenext['day'] = numbers2daysblock($myrownext['oa_day']);
    if ($timetype=='1'){
    $messagenext['start'] = date('h:i:s a', strtotime($myrownext['oa_start']));
    $messagenext['stop'] =  date('h:i:s a', strtotime($myrownext['oa_stop']));
        } else {
    $messagenext['start'] = date('H:i:s', strtotime($myrownext['oa_start']));
    $messagenext['stop'] =  date('H:i:s', strtotime($myrownext['oa_stop']));
        }
    $titlenext = $myts->stripSlashesGPC($myrownext["oa_title"]);
    $messagenext['title'] = $titlenext;
    $stationnext = $myts->stripSlashesGPC($myrownext["oa_station"]);
    $messagenext['station'] = $stationnext;
    $namenext = $myts->stripSlashesGPC($myrownext["oa_name"]);
    $messagenext['name'] = $namenext;
    $descriptionnext = $myts->stripSlashesGPC($myrownext["oa_description"]);
    $messagenext['description'] = $descriptionnext;   

    $imagenext = $myts->stripSlashesGPC($myrownext["oa_image"]);
    $messagenext['image'] = "<img src='".XOOPS_URL."/".$oa_imagedir.$imagenext."' height='".$oa_shothigh."' width='".$oa_shotwide."' alt='"._VISITWEBSITE."' /></img>";
    $messagenext['comup'] = _MB_ONAIR_COMINGUP;
    $block['onair2'][] = $messagenext;

    }
    }else{
        echo mysql_error();
        return false;
    }
    return $block;
    }
   

?>



(Onair_block.html)

<html>
<head>
<style type="text/css">

#dropcontentsubject{
width: 90%;
font-weight: bold;
}

.dropcontent{
display:block;
}

</style>
<script type="text/javascript">

/***********************************************
* ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var tickspeed=10000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}


function expandone(){
var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>
<script type="text/javascript" src="<{$xoops_url}>/modules/onair/include/projax/js/prototype.js"></script>
<script type="text/javascript" src="<{$xoops_url}>/modules/onair/include/projax/js/scriptaculous.js"></script>
</head>
<body>
<div id="dropcontentsubject"></div>
<{foreach item=message from=$block.onair}>
<div id="dropmsg0" class="dropcontent">
<center><b><{$message.station}></b></center><br/>
<center><code><b><{$message.title}></b></code></center><br/>
<center><a href="<{$xoops_url}>/modules/onair/detail.php?ext=info&oa_id=<{$message.id}>"><{$message.image}></a></center>

<center><h4><{$message.host}><{$message.name}></h4></center><br/>
<center><img src="<{$xoops_url}>/modules/onair/images/icons/musicnote.png"> <{$message.pluginshow}></center><br/>
<center><{$message.day}></center>
<center><h4><{$message.start}> - <{$message.stop}></h4></center>
</div>

<{foreach item=messagenext from=$block.onair2}>
<div id="dropmsg1" class="dropcontent">
<center><{$messagenext.comup}></center><br/>
<center><{$messagenext.station}></center>
<center><code><b><{$messagenext.title}></b></code></center>
<center><a href="<{$xoops_url}>/modules/onair/detail.php?ext=info&oa_id=<{$messagenext.id}>"><{$messagenext.image}></a></center><br/>
<center><h4><{$message.host}><{$messagenext.name}></h4></center><br>
<center><{$messagenext.day}></center>
<center><h4><{$messagenext.start}> - <{$messagenext.stop}></h4></center>
</div><{/foreach}>
<{/foreach}>
</body>
</html>
Avatar billede ebusiness Nybegynder
23. maj 2009 - 23:52 #4
Hmmm, det ser sådan set alt for uoverskueligt ud hvis du spørger mig. Kan du lægge et link til siden så jeg kan se outputtet?
Avatar billede culex Nybegynder
24. maj 2009 - 17:07 #5
Hejsa igen

Har godt nok ikke meget content men har lavet en demo for søndag kun så håber du ser den her idag; har haft siden lukket men har lige åbnet lidt her til lejligheden.

http://www.culex.dk/
Avatar billede ebusiness Nybegynder
24. maj 2009 - 19:01 #6
Pænt ser det godt nok ikke ud, men det hjalp gevaldigt på forståelsen.

Du har to div elementer med indhold i og et script skifter mellem at vise det ene og det andet, du skal blot erstatte indholdet i de to elementer.

Basalt set skal du bare lave en side som ikke indeholder andet end indholdet af de to elementer. Det gør du ved i en php fil først at include simple_block.php og derefter have en kopi af koden som skriver indholdet af elementerne, det skulle gerne være dette:

<{foreach item=message from=$block.onair}>
<center><b><{$message.station}></b></center><br/>
<center><code><b><{$message.title}></b></code></center><br/>
<center><a href="<{$xoops_url}>/modules/onair/detail.php?ext=info&oa_id=<{$message.id}>"><{$message.image}></a></center>

<center><h4><{$message.host}><{$message.name}></h4></center><br/>
<center><img src="<{$xoops_url}>/modules/onair/images/icons/musicnote.png"> <{$message.pluginshow}></center><br/>
<center><{$message.day}></center>
<center><h4><{$message.start}> - <{$message.stop}></h4></center>
,,,,
<{foreach item=messagenext from=$block.onair2}>
<center><{$messagenext.comup}></center><br/>
<center><{$messagenext.station}></center>
<center><code><b><{$messagenext.title}></b></code></center>
<center><a href="<{$xoops_url}>/modules/onair/detail.php?ext=info&oa_id=<{$messagenext.id}>"><{$messagenext.image}></a></center><br/>
<center><h4><{$message.host}><{$messagenext.name}></h4></center><br>
<center><{$messagenext.day}></center>
<center><h4><{$messagenext.start}> - <{$messagenext.stop}></h4></center>
<{/foreach}>
<{/foreach}>

Bemærk at jeg har fjernet de omkringliggende div tags da der ikke skal ændres på dem og skrevet fire kommaer imellem de to elementer som seperator.

Så mangler vi kun koden på klientsiden, du kan passende lægge den sidst i Onair_block.html filen.

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){
    xmlhttp=null;
    if(window.XMLHttpRequest){// code for Firefox, Opera, IE7, etc.
        xmlhttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(xmlhttp!=null){
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
}

function state_Change(){
    if(xmlhttp.readyState==4){// 4 = "loaded"
        if(xmlhttp.status==200){// 200 = "OK"
            handleResponse(xmlhttp.responseText);
        }
    }
}
function handleResponse(datastring){
    var dataarray=datastring.split(",,,,")
    document.getElementById("dropmsg0").innerHTML=dataarray[0]
    document.getElementById("dropmsg1").innerHTML=dataarray[1]
}
setInterval(loadXMLDoc("datahaandteringsfilen.php"),60000)
</script>

Du skal huske at erstatte "datahaandteringsfilen.php" med stien til den fil som du laver.

Du har lavet en hel del fejl ifht. W3C standarden, det er ofte ikke så slemt, men du har flere html, body og head tags, og det er noget værre rod, du skal fjerne alle html body og head tags fra Onair_block.html.
Avatar billede culex Nybegynder
24. maj 2009 - 19:23 #7
Ja det er stadig på et beta niveau så skal have ryddet lidt om i html og samlet nogle funktioner, men tror du har gjort et fint stykke arbejde for mig...

Ville faktisk have givet 500 point for det her men det kunne jeg ikke (eller hvad ?)

Du skal ihvertfald have pointene for det her arbejde.

Endnu engang tak :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester