login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Popup input (submit) form (Opgelost)

Offline dbe123 - 01/04/2011 22:53
Avatar van dbe123Lid Hoi,

Ik heb een PHP webpagina, die een tabel weergeeft met data uit de achterliggende MySQL database.

Ik wil nu onder deze tabel een hyperlink (href) plaatsen, die een popup-dialog opent waarin een HTML-form geplaatst is.
Dit HTML-form zal, na submit, data in de database plaatsen.
Vervolgens wordt de popup-dialog gesloten, en wordt de PHP pagina met de tabel ververst.

Dit is het idee, de uitwerking, das wat anders!  

Ik heb het volgende gevonden, wat eigenlijk exact is wat ik wil doen.
http://jqueryui.com/demos/dialog/#modal-form
Alleen, heb ik totaal geen ervaring met AJAX of jQuery.
Ik krijg dit dus niet geïmplementeerd in mijn code.

Kan iemand me hierbij helpen?
Of bestaat er een andere (minder complexe) code die ik kan invoegen in mijn webpagina?

Alvast bedankt!

5 antwoorden

Gesponsorde links
Offline Oneday - 02/04/2011 09:32
Avatar van Oneday Nieuw lid jQuery is absoluut niet complex. 

Je maakt de knop waarop je moet klikken:

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <button id='knop'>Blabla</button>


Dan de javascripts:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. $( "#knop" )
  3. 			.button()
  4. 			.click(function() {
  5. 				$( "#dialog-form" ).dialog( "open" );
  6. 			});
  7. </script>



Je form dat moet verschijnen zet je gewoon in divs:

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="dialog-form" title="Create new user">

  2. Blablabla

  3. </div>




Vergeet wel het jQuery script ook niet nog te includen.

Van die dialog kan je dan nog vanalles aanpassen, maar daarvoor moet je maar ff hier: http://jqueryui.com/demos/dialog/#modal-form kijk. 
Offline dbe123 - 03/04/2011 22:08 (laatste wijziging 04/04/2011 11:38)
Avatar van dbe123 Lid Hi Oneday,

Bedankt voor jouw duidelijke uitleg.
Ik zal dit morgen even proberen, en plaats hier een update.

Thanks!

Net getest, maar ik krijg het niet werkend.
Wanneer ik mijn pagina aanpas volgens jouw aanwijzigingen, zie ik de gemaakte div (die het form bevat) onmiddellijk staan, zonder op de knop te klikken.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php require_once("includes/connection.php"); ?>
  2. <?php require_once("includes/functions.php"); ?>
  3. <?php include("includes/header.php"); ?>
  4. <?php include("includes/navigation.php"); ?>
  5.  
  6. <div class="col2">
  7. 	<h2>Staff Members</h2>
  8. 	<script>
  9. 		$( "#add_staff" )
  10. 				.button()
  11. 				.click(function() {
  12. 					$( "#dialog-form" ).dialog( "open" );
  13. 				});
  14. 	</script>
  15. 	<table>
  16. 		<tr>
  17. 			<th width="140px" align="left">Username</th>
  18. 			<th width="150px" align="left">Created</th>
  19. 			<th width="50px" align="center">&nbsp;</th>
  20. 			<th width="50px" align="center">&nbsp;</th>			
  21. 		</tr>
  22. 		<?php
  23. 			// Perform database Query
  24. 			$admin_set = get_all_admins();
  25. 			// Use returned data
  26. 			while($row = mysql_fetch_array($admin_set)) {
  27. 				$created = convertIdToDate($row["id"]);
  28. 				echo "<tr>
  29. 						<td>{$row["username"]}</td>
  30. 						<td>{$created}</td>
  31. 						<td align=\"center\"><a href=\"#?id=" . urlencode($row["id"]) . "\" target=\"_self\"><img src=\"images/icons/b_usredit.png\" /></a></td>
  32. 						<td align=\"center\"><a href=\"#?id=" . urlencode($row["id"]) . "\" target=\"_self\"><img src=\"images/icons/b_usrdrop.png\" /></a></td>
  33. 					  </tr>";
  34. 			}
  35. 		?>
  36. 		<tr>
  37. 			<td colspan="4">
  38. 				<button id="add_staff">Add Staff Member</button>
  39. 				<!-- <i>
  40. 					<a href="add_admin.php" rel="lyteframe" title="Add new Staff Member" rev="width: 300px; height: 150px; scrolling: no;">Add new Staff Member...</a>
  41. 				</i> -->
  42. 			</td>
  43. 		</tr>
  44. 	</table>
  45. 	<div id="dialog-form" title="Create new user">
  46. 		Blablabla
  47. 	</div>
  48. </div>
  49.  
  50. <?php require("includes/footer.php"); ?>
Offline ArieMedia - 04/04/2011 11:59 (laatste wijziging 04/04/2011 12:10)
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 display: hidden al geprobeerd?
<button id="dialog-form" style="display: hidden;">Add Staff Member</button>

of de "vieze" oplossing met jQuery
$('#dialog-form').hide();


-- eerste methode heeft voorkeur
Offline dbe123 - 04/04/2011 12:09
Avatar van dbe123 Lid Hi ArieMedia,

Geen van beide werkt...
Offline ArieMedia - 04/04/2011 12:12
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
dbe123 schreef:
Hi ArieMedia,

Geen van beide werkt...
Heb hem net bewerkt.. had verkeerde div-id aangegeven 

dialog-form gebruiken..

Als dit niet werkt, hernoem dialog-form naar dialog_form of dialogform en probeer het nog eens.. ik weet niet of jQuery de - accepteerd (heb zelf namelijk wel problemen gehad met andere chars dan a-z0-9 en _
Bedankt door: dbe123
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.207s