[Jquery] Pagina laden met AJAX

Door Wim E op 10-11-2009 23:43

1.018 views

Hallo,

Ik ben bezig met nieuwsberichten systeem te verbeteren. Nu laadt ik op vrij eenvoudige manier een tabel via AJAX. Echter heb ik hier ook 2 knoppen in zitten. Wanneer op 1 van deze knoppen wordt gedrukt moet er een overlay (thickbox) verschijnen met daarin een form. Om 1 of andere reden doet die dat niet. (Als ik in broncode kijk valt me op dat de div wel er staat maar de tabel daarin niet). Hoe kan ik toch de thickbox blijven gebruiken, en toch bij updates de tabel automatisch updaten?

Ik hoop dat ik mijn vraag duidelijk genoeg heb geformuleerd.

Bedankt in iedergeval

Onbekende gebruiker

10-11-2009 23:47

Tabel?
Ik zie geen tabel.
Oh wacht, phphulp.nl bestaat alleen maar uit tabellen. Slecht voorbeeld.
Je gebruikt toch hopelijk niet tabellen zoals het hier is gebeurd op phphulp?
Opzich mag je best tabellen gebruiken, voor adresgegevens of resultaten. Maar niet om je website te lay-outen e.d.
Verder is het nogal hocus pocus voor mij, kan niet zomaar zien wat je nou hebt.
Het ideaalst is als je gewoon een link hebt naar een voorbeeld.
Kijk overigs ook eens in de error console van je browser (Opera of firefox). Anders moet je relevante code plaatsen.

Wim E

11-11-2009 00:04

Hoi Karl,

Ik gebruik een tabel alleen bij statische gegevens. Lay-out doe ik in Div maar dat is nog ieders keuze natuurlijk:D

Ik post even wat code voor je:
news.tpl


<script>

  $(document).ready(function(){
		LoadNews();
  });
</script>
<h1>Nieuwsberichten beheren</h1>
<hr>
<p></p>
<a href="#TB_inline?&height=450&width=505&inlineId=NewItemform&formName=formNewItem" class="thickbox" id="NewItem">Nieuw item toevoegen</a>
<div id="NewsItems"></div>

<div id="NewItemform" style="display:none;">
	<form id="formNewItem" method="post" action="">
		<h2>Voeg nieuw nieuwsbericht toe</h2>
		<?php require_once(ROOTPATH . 'p-layer/templates/newsform.tpl'); ?>
	</form>
</div>

Ajax.NewsTable.php


<?php
$NewsFunction = new News_Functions();
?>
<table class="TableNews" cellspacing="0">
	<tr>
		<th style="width:350px;">Onderwerp</th><th style="width:140px;">Toegevoegd door:</th><th style="width:80px;">Actief</th><th style="text-align:center;width:120px;">Bekijk / Wijzig</th><th style="width:80px;text-align:center;">Remove</th>
	</tr>
	<?php
		if(!empty($NewsFunction->NewsItems)){
			$i=1;
			foreach($NewsFunction->NewsItems as $NewsItem => $NewsItemValue ) {
				$classname = ($i % 2) ? "TrOne" : "TrTwo";
				echo "<tr class='" . $classname . "'><td>" . $NewsItemValue["news_subject"] . "</td><td>" . $NewsItemValue["user_name"] . "</td><td>" . $NewsItemValue["active"] . "</td><td style='text-align:center;'><a href='#TB_inline?&height=450&width=505&inlineId=ViewItemform&formName=formViewItem' class='thickbox'><img src='" . WEBPATH . "images/page_magnify.png' border='0' alt='' width='16px' height='16px'></a>&nbsp;&nbsp;&nbsp;<a href='#TB_inline?&height=450&width=505&inlineId=EditItemform&formName=formEditItem' class='thickbox'><img src='" . WEBPATH . "images/page_edit.png' border='0' alt='' width='16px' height='16px'></a></td><td style='text-align:center;'>delete</td></tr>";
				$i++;
			}	
		} else {
			echo "<tr class='TrOne'><td colspan='5'>Geen nieuwsitems nog</td></tr>";
		}
	?>
</table>

Zoals je kunt zien in de news.tpl roep ik daar een javascriptfunctie aan welke de inhoud van Ajax.NewsTable.php ophaalt en weergeeft. Deze wordt geplaatst in de div genaamd "NewsItems".
Wanneer ik op de knop Nieuw item toevoegen klik laat hij netjes de div NewItemform zien. Dit wil ik ook hebben bij bekijk en wijzig. De form/divs zijn aangemaakt en bestaan. Alleen worden deze niet zichtbaar wanneer ik op de linkjes klik maar zie ik wel dat de URL de link erachter plakt.

Ik hoop dat het nu wat duidelijker is

Reageren

Inloggen om te reageren