Gå til innhold

Auto oppdatering, ignorer form?

Holograph

Av Holograph
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
PlastBox

PlastBox

Skrevet
Skrevet
Hei.

 

Jeg driver på med et prosjekt. Dette prosjektet inneholder en ShoutBox, med auto oppdatering.

 

Men problemet mitt er at hver gang siden oppdateres, så tømmes alle former.

Vet du om en annen metode?

 

Det du er ute etter er egentlig en online "chat", der det andre skriver blir oppdatert mens man selv sitter og skriver?

 

Sjekk ut jQuery, spesielt Ajax-funksjonene.

 

Det første du må gjøre er å laste ned selve jQuery-fila, legge den i samme mappe som din index.php og legge inn

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>

 

myscript.js blir filen du legger all javascript "mekanikken" din i og kan for dette se ut omtrent slik:

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("backend.php", { do: 'getshouts' }, function(data) {
	$("#shouts").html(data);
});

}

 

Dette scriptet vil hente inn "backend.php?do=getshouts" hvert 3. sekund og putte resultatet inn i html-elementet med id="shouts", f.eks. en <DIV id="shouts"></DIV>. Dette skjer "i bakgrunnen" så forms ol. vil ikke bli påvirket.

 

Hvordan backend.php ser ut avhenger av hvordan du lagrer og henter ut shouts så jeg bare gjetter her:

<?php
if(!empty($_GET['do']))
{
include('mysql_connect.php');
switch($_GET['do']))
{
	case 'getshouts':
		echo getshouts();
		break;
}
}

function getshouts()
{
$buf = '';
$shouts = mysql_query("SELECT * FROM `shouts` ORDER BY shoutID DESC LIMIT 10");
while($shout = mysql_fetch_object($shouts))
{
	$buf .= '<b>'.$shout->nick.':</b><br />'.$shout->text."<br /><br />\r\n"
}
return $buf;
}
?>

 

 

Så, index.php inneholder de nevnte <script>-tagsa ovenfor, din form og en <DIV id="shouts"></div>.

 

myscript.js henter inn backend.php?do=getshouts og putter det inn i nevnte <DIV>.

 

backend.php?do=getshouts henter ut de 10 nyeste shouts fra databasen og printer dem i et lesbart format.

 

Spør om noe er uklart eller om jeg bommet helt på hva du er ute etter! :thumbup:

Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet
Hei.

 

Jeg driver på med et prosjekt. Dette prosjektet inneholder en ShoutBox, med auto oppdatering.

 

Men problemet mitt er at hver gang siden oppdateres, så tømmes alle former.

Vet du om en annen metode?

 

Det du er ute etter er egentlig en online "chat", der det andre skriver blir oppdatert mens man selv sitter og skriver?

 

Sjekk ut jQuery, spesielt Ajax-funksjonene.

 

Det første du må gjøre er å laste ned selve jQuery-fila, legge den i samme mappe som din index.php og legge inn

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>

 

myscript.js blir filen du legger all javascript "mekanikken" din i og kan for dette se ut omtrent slik:

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("backend.php", { do: 'getshouts' }, function(data) {
	$("#shouts").html(data);
});

}

 

Dette scriptet vil hente inn "backend.php?do=getshouts" hvert 3. sekund og putte resultatet inn i html-elementet med id="shouts", f.eks. en <DIV id="shouts"></DIV>. Dette skjer "i bakgrunnen" så forms ol. vil ikke bli påvirket.

 

Hvordan backend.php ser ut avhenger av hvordan du lagrer og henter ut shouts så jeg bare gjetter her:

<?php
if(!empty($_GET['do']))
{
include('mysql_connect.php');
switch($_GET['do']))
{
	case 'getshouts':
		echo getshouts();
		break;
}
}

function getshouts()
{
$buf = '';
$shouts = mysql_query("SELECT * FROM `shouts` ORDER BY shoutID DESC LIMIT 10");
while($shout = mysql_fetch_object($shouts))
{
	$buf .= '<b>'.$shout->nick.':</b><br />'.$shout->text."<br /><br />\r\n"
}
return $buf;
}
?>

 

 

Så, index.php inneholder de nevnte <script>-tagsa ovenfor, din form og en <DIV id="shouts"></div>.

 

myscript.js henter inn backend.php?do=getshouts og putter det inn i nevnte <DIV>.

 

backend.php?do=getshouts henter ut de 10 nyeste shouts fra databasen og printer dem i et lesbart format.

 

Spør om noe er uklart eller om jeg bommet helt på hva du er ute etter! :thumbup:

 

 

Vel, om det er mulig å bruke det, uten å måtte bruke backend.php, hadde vert fint. Altså, tagwall.php ser slik ut:

 

<?php

$rowsPerPage = 10;

$pageurl = "".$config['url']."tagwall";


$pageNum = 1;

if(isset($_GET['page']))
{
$pageNum = $_GET['page'];
}


$offset = ($pageNum - 1) * $rowsPerPage;

$query = "SELECT * FROM `tagwall` ORDER BY `id` DESC ";

$pagingQuery = "LIMIT $offset, $rowsPerPage";
$result = mysql_query($query . $pagingQuery) or die('Error, query failed');

$columns_counter=0;
while($row = mysql_fetch_array( $result )) {
echo "<strong>".$row['author']."</strong> <br />";
echo "".strip_tags($row['content'],"<b><i><s><u><a><br><br />")." <hr />";
}
$columns_counter++;

$result = mysql_query($query) or die('Error, query failed');
$numrows = mysql_num_rows($result);


$maxPage = ceil($numrows/$rowsPerPage);

$self = $_SERVER['PHP_SELF'];


if ($pageNum > 1)
{
$page = $pageNum - 1;
$prev = " <a href=\"".$pageurl."/$page\">[«]</a> ";

$first = " <a href=\"".$pageurl."/1\">[Første]</a> ";
}
else
{
$prev = ' [«] '; 
$first = ' [Første] ';
}


if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = " <a href=\"".$pageurl."/$page\">[»]</a> ";

$last = " <a href=\"".$pageurl."/".$maxPage."\">[Siste]</a> ";
}
else
{
$next = ' [»] '; 
$last = ' [Siste] '; 
}


echo $first . $prev . " Viser <strong>$pageNum</strong> av <strong>$maxPage</strong> sider " . $next . $last;

?>

 

Er det mulig å tilpasse den til jQuery-oppdatereren?

Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet

Bruk akkurat hvilken fil du vil, eneste kravet er at den spytter ut html som havner inni <DIV>-elementet der shoutene skal vises. Et eksempel på output fra tagwall.php (om du peker nettleseren rett til denne) er:

 

<b>Plastbox:</b><br />
Awesome shoutbox!<br />
<br />

<b>Holograph:</b><br />
Ye, I know! It's even ajax-driven B-)<br />
<br />

 

og denne koden havner inni <DIV id="shouts"></DIV> på hovedsiden din.

Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet
Bruk akkurat hvilken fil du vil, eneste kravet er at den spytter ut html som havner inni <DIV>-elementet der shoutene skal vises. Et eksempel på output fra tagwall.php (om du peker nettleseren rett til denne) er:

 

<b>Plastbox:</b><br />
Awesome shoutbox!<br />
<br />

<b>Holograph:</b><br />
Ye, I know! It's even ajax-driven B-)<br />
<br />

 

og denne koden havner inni <DIV id="shouts"></DIV> på hovedsiden din.

 

Men må jeg definere funksjonen "getshouts", eller kan jeg fjerne 

{ do: 'getshouts' },

fra koden du ga meg?

Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet

Aah, vel, do: getshouts gjør i allefall ingen skade, den bare hefter på ?do=getshouts på kallet til fila.

 

Uansett, du kan forrandre linja til:

$.get("tagwall.php", { }, function(data) {
$("#shouts").html(data);
});

 

Du kan også bytte ut #shouts i den koden med #id for hvilket som helst annet html-objekt i siden din (merk, for å sette verdien i input-elementer må du bruke .val(data) i stedenfor .html(data)).

Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet (endret)
Aah, vel, do: getshouts gjør i allefall ingen skade, den bare hefter på ?do=getshouts på kallet til fila.

 

Uansett, du kan forrandre linja til:

$.get("tagwall.php", { }, function(data) {
$("#shouts").html(data);
});

 

Du kan også bytte ut #shouts i den koden med #id for hvilket som helst annet html-objekt i siden din (merk, for å sette verdien i input-elementer må du bruke .val(data) i stedenfor .html(data)).

 

Blir da dette rett:

 

tagwall.php

echo "<div id='tags'>";
$columns_counter=0;
while($row = mysql_fetch_array( $result )) {
echo "<strong>".$row['author']."</strong> <br />";
echo "".strip_tags($row['content'],"<b><i><s><u><a><br><br />")." <hr />";
}
$columns_counter++;
echo "</div>";

 

og

 

get_tags.js

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("tagwall.php", { }, function(data) {
$("#tags").html(data);
});

}

Endret av Holograph
Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet (endret)

 

Aah, vel, do: getshouts gjør i allefall ingen skade, den bare hefter på ?do=getshouts på kallet til fila.

 

Uansett, du kan forrandre linja til:

$.get("tagwall.php", { }, function(data) {
$("#shouts").html(data);
});

 

Du kan også bytte ut #shouts i den koden med #id for hvilket som helst annet html-objekt i siden din (merk, for å sette verdien i input-elementer må du bruke .val(data) i stedenfor .html(data)).

 

Blir da dette rett:

 

tagwall.php

echo "<div id='tags'>";
$columns_counter=0;
while($row = mysql_fetch_array( $result )) {
echo "<strong>".$row['author']."</strong> <br />";
echo "".strip_tags($row['content'],"<b><i><s><u><a><br><br />")." <hr />";
}
$columns_counter++;
echo "</div>";

 

og

 

get_tags.js

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("tagwall.php", { }, function(data) {
$("#tags").html(data);
});

}

 

 

 

 

Jepp, det blir rett bortsett fra at <div id="tags"></div> må være på siden der ting skal vises, f.eks. index.php. get_tags.js kjører i index.php, henter info fra tagwall.php og putter det i <div id="tags"></div> som er en del av index.php

 

Desverre må du nok ha en ekstra fil dersom hele tagwall-systemet ditt var én fil før. Du må minst ha én fil for i vise forms, design, kjøre get_tags.js, osv. (kall det brukergrensesnittet) og én fil som henter info fra databasen som get_tags.js loader i bakgrunnen.

Endret av PlastBox
Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet

 

Aah, vel, do: getshouts gjør i allefall ingen skade, den bare hefter på ?do=getshouts på kallet til fila.

 

Uansett, du kan forrandre linja til:

$.get("tagwall.php", { }, function(data) {
$("#shouts").html(data);
});

 

Du kan også bytte ut #shouts i den koden med #id for hvilket som helst annet html-objekt i siden din (merk, for å sette verdien i input-elementer må du bruke .val(data) i stedenfor .html(data)).

 

Blir da dette rett:

 

tagwall.php

echo "<div id='tags'>";
$columns_counter=0;
while($row = mysql_fetch_array( $result )) {
echo "<strong>".$row['author']."</strong> <br />";
echo "".strip_tags($row['content'],"<b><i><s><u><a><br><br />")." <hr />";
}
$columns_counter++;
echo "</div>";

 

og

 

get_tags.js

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("tagwall.php", { }, function(data) {
$("#tags").html(data);
});

}

 

 

 

 

Jepp, det blir rett bortsett fra at <div id="tags"></div> må være på siden der ting skal vises, f.eks. index.php. get_tags.js kjører i index.php, henter info fra tagwall.php og putter det i <div id="tags"></div> som er en del av index.php

 

Desverre må du nok ha en ekstra fil dersom hele tagwall-systemet ditt var én fil før. Du må minst ha én fil for i vise forms, design, kjøre get_tags.js, osv. (kall det brukergrensesnittet) og én fil som henter info fra databasen som get_tags.js loader i bakgrunnen.

 

Da ser jeg det enklere å rett og slett ha resultatene i en egen fil, som da settes inn via en iframe i tagwall.php, og at da iframen refreshes via <meta> tag.

Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet (endret)

Skam deg, mann! :no: Frames er fy-fy, var ok for 15 år siden men.. Du vil vel nødig at alle brukerene skal høre "KLIKK-KLIKK-KLIKK" mens de er inne på siden din, og i tillegg se veldig godt når framen refresher (som man jo gjør uansett, og særlig med litt treg eller belastet linje)?

 

Noe lettere er det jo heller ikke. Uansett har du resultatene i en egen fil.

 

1. Last ned jquery-1.3.2.min.js og opprette get_tags.js med koden du allerede har.

2. Paste de to <script>-linjene du har inn i "index.php" eller hva du nå kaller "hovedfila" di.

 

Resultatet er en helt sømløs refresh som brukeren aldri vil legge merke til. I tillegg lærer du deg litt jQuery/javascript som veldig lett kan brukes til andre ting (seriøst, :love: jQuery :love: !!)

 

..eller..

 

1. Legg til meta refresh taggen din i "resultatfila" og en stygg, gammeldags, kjip og bråkete iframe på "hovedsida". Ikke lær noe nytt om noe som totalt revolusjonerer måten man jobber med dynamiske sider på. Spar 5 minutter du kan bruke på noe annet.

 

;)

Endret av PlastBox
Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet (endret)

Da er det noe jeg gjør feil..

 

inc/tagwall.php

<form action="" name="submit_tagwall" method="POST">
<textarea name="content" cols="35" rows="7"></textarea><br /><br />
<input type="submit" value=" Legg til " name="submit_tagwall"> <input type="button" value=" Enkel HTML er tillat " onClick="window.alert('Simpel HTML, som f.eks. <b>tekst</b> og <br> er tillatt')">
</form>

<hr />

<?php

echo "<div id='tags'></div>";

?>

 

inc/get_tags.php

 

<?php 


$rowsPerPage = 10;

$pageurl = "".$config['url']."tagwall";


$pageNum = 1;

if(isset($_GET['page']))
{
$pageNum = $_GET['page'];
}



$offset = ($pageNum - 1) * $rowsPerPage;

$query = "SELECT * FROM `tagwall` ORDER BY `id` DESC ";

$pagingQuery = "LIMIT $offset, $rowsPerPage";
$result = mysql_query($query . $pagingQuery) or die('Error, query failed');

echo "<div id='tags'>";
$columns_counter=0;
while($row = mysql_fetch_array( $result )) {
echo "<strong>".$row['author']."</strong> <br />";
echo "".strip_tags($row['content'],"<b><i><s><u><a><br><br />")." <hr />";
}
$columns_counter++;
echo "</div>";

$result = mysql_query($query) or die('Error, query failed');
$numrows = mysql_num_rows($result);

$maxPage = ceil($numrows/$rowsPerPage);

$self = $_SERVER['PHP_SELF'];

if ($pageNum > 1)
{
$page = $pageNum - 1;
$prev = " <a href=\"".$pageurl."/$page\">[«]</a> ";

$first = " <a href=\"".$pageurl."/1\">[Første]</a> ";
}
else
{
$prev = ' [«] ';
$first = ' [Første] ';
}

if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = " <a href=\"".$pageurl."/$page\">[»]</a> ";

$last = " <a href=\"".$pageurl."/".$maxPage."\">[Siste]</a> ";
}
else
{
$next = ' [»] ';
$last = ' [Siste] '; 
}


echo $first . $prev . " Viser <strong>$pageNum</strong> av <strong>$maxPage</strong> sider " . $next . $last;

?>

 

 

inc/get_tags.js

$.(document).ready() {

setInterval("updateshouts()", 3000);

});

function updateshouts() {

$.get("inc/get_tags.php", { }, function(data) {
$("#tags").html(data);
});

}

 

 

-- Har også prøvd med

$.get("get_tags.php", { }, function(data) {
$("#tags").html(data);
});

 

 

 

 

 

 

Noe jeg gjør feil?

Endret av Holograph
Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet

Hmm.. ser ikke annet enn en mistenkelig mangel på <script>-tags. F.eks. skal index.php se omtrent slik ut:

<html>
<head>
<title>minfetesidewhatever</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="inc/get_tags.js" type="text/javascript"></script>
</head>
<body>
...
...
</body>
</html>

 

 

Ser også at du printer en <div id="tags"> i get_tags.php noe som vil føre til at du etter 3 oppdateringer har:

<div id="tags">
<div id="tags">
<div id="tags">
whatever tag data blabla
</div>
</div>
</div>

 

<div id="tags"></div> er bare en boks som innholdet fra get_tags.php skal inn i. Den, og <script>-tags nevnt ovenfor må inn i f.eks. index.php eller hva du kaller hovedfila di.

Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet

Har dette i headeren:

<script src="inc/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="inc/get_tags.js" type="text/javascript"></script>

 

Men jeg tror jeg har misforstått hvor jeg skal ha <div id="tags"></div>.

 

Skal jeg ha det i get_tags.php eller tagwall.php?

Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet

<div>'en er boksen som skal holde dataen fra get_tags.php. Da kan den naturlig nok ikke være en del av dataene fra get_tags.php. :p

 

<div>'en skal være der tags/shouts skal vises. Index.php om du skal ha det synlig uansett hvor på siden man navigerer, eller tagwall.php om det bare skal være synlig der.

Lenke til kommentar
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet
<div>'en er boksen som skal holde dataen fra get_tags.php. Da kan den naturlig nok ikke være en del av dataene fra get_tags.php. :p

 

<div>'en skal være der tags/shouts skal vises. Index.php om du skal ha det synlig uansett hvor på siden man navigerer, eller tagwall.php om det bare skal være synlig der.

 

Men skal jeg bare ha <div id="tags"></div>, helt tom, i tagwall.php?

For det kommer ingen tags der da.

Lenke til kommentar
  • 3 uker senere...
Holograph

Holograph

Skrevet
  • Forfatter
Skrevet

Okay - jeg fant en annen kode på nettet. Jeg fikk den til å funke i en egen fil, men med en gang jeg puttet den inn i designet mitt, så funka den ikke lenger. Da sa den bare "Laster..."

Det funket heller ikke med php include.

Her er koden, kanskje du ser feilen?

 

 

<script type="text/javascript">
function Ajax(){
var xmlHttp;
try{	
	xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}
catch (e){
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e){
			alert("Din browser har ikke Ajax. Vi anbefaler deg å laste ned FireFox :)");
			return false;
		}
	}
}

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
	document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
	setTimeout('Ajax()',1000);
}
}

<?php if(!empty($_GET['page']))
{
 echo "xmlHttp.open(\"GET\",\"vegg_results.php?page=".$_GET['page']."\",true);";
}
else
{
 echo "xmlHttp.open(\"GET\",\"vegg_results.php\",true);";
}
?>

xmlHttp.send(null);
}

window.onload=function(){
setTimeout('Ajax()',1000);
}
</script>

<div id="ReloadThis">Laster inn tags...</div>

 

Lenke til kommentar
PlastBox

PlastBox

Skrevet
Skrevet

Beklager om dette høres lite støttende ut, men klarer du det ikke med jQuery kan du glatt glemme å få til noe som fungerer i plain javascript. Javascript er en jungel uten like, bare se på det lange scriptet ditt sammenlignet med de få linjene det blir med jQuery-biblioteket til å ta seg av alt av cross-browser kompatibilitet osv.

 

Kan du ikke poste en link til siden din så jeg kan kikke på javascriptet og se hva som er galt? Det er absolutt ingen grunn til at koden jeg har postet ikke skal fungere, forutsatt at du har gjort som jeg har forsøkt å forklare. :p

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...