login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery autocomplete aanvullen dmv database gegevens

Offline GroundZero - 26/07/2012 13:16
Avatar van GroundZeroLid Beste,

wanneer ik het volgende doe dan werkt het perfect:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript" type="text/javascript">
  2. $(function() {
  3. 	var availableTags = [
  4. 		"test",
  5. 		"abcde"
  6. 	];
  7. 	$( "#branche" ).autocomplete({
  8. 		source: availableTags
  9. 	});
  10. });
  11. </script>


Wanneer ik het volgende doe dan werkt het dus niet meer! de functie:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function autocompleteBranches(){
  2. 	$query = mysql_query('SELECT DISTINCT branche FROM site_freelancers
  3. 						  ORDER BY branche ASC');
  4. 	$rows = mysql_num_rows($query);
  5. 	$counter = 1;
  6.  
  7. 	while($fetch = mysql_fetch_assoc($query))
  8. 	{
  9. 		// without comma or with comma
  10. 		if($counter == $rows)
  11. 		{
  12. 			echo '"'.$fetch['branche'].'"
  13. 			';
  14. 		}
  15. 		else
  16. 		{
  17. 			echo '"'.$fetch['branche'].'",
  18. 			';
  19. 		}
  20.  
  21. 		$counter++;
  22. 	}
  23. }


De autocomplete code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript" type="text/javascript">
  2. $(function() {
  3. 	var availableTags = [
  4. 		"test",
  5. 		<?php
  6. 		autocompleteBranches();
  7. 		?>
  8. 	];
  9. 	$( "#branche" ).autocomplete({
  10. 		source: availableTags
  11. 	});
  12. });
  13. </script>


Momenteel is er maar één hit, maar hij print wel netjes "jklbms" in de code. Maar toch gebeurd er niks wanneer ik één van die letters typ.

Weet iemand wat het probleem zou kunnen zijn misschien?

7 antwoorden

Gesponsorde links
Offline Koen - 26/07/2012 13:54
Avatar van Koen PHP expert hoe ziet de broncode eruit die gegenereerd werd?
Offline GroundZero - 26/07/2012 14:48
Avatar van GroundZero Lid Die krijg ik niet te zien omdat ik met AJAX werk, maar het moet gewoon werken.
De broncode is identiek aan wanneer ik het handmatig typ zeg maar.

Als ik de functie los in een PHP pagina zet dan print hij netjes (let op! zonder comma):

php code - Bekijk de code zonder highlighting - Klap code in 
  1. "jklbms"


Dus wat dat betreft zou alles prima moeten zijn 
Offline Koen - 26/07/2012 15:46
Avatar van Koen PHP expert Met de code die je liet zien is er geen probleem. Je zal meer code moeten laten zien: de pagina die je aanroept via ajax, en de javascript code die je daarvoor gebruikt.
Offline GroundZero - 26/07/2012 16:09 (laatste wijziging 26/07/2012 16:10)
Avatar van GroundZero Lid Oke, de volgende code is even snel gedaan, functies komen straks in een apart bestand.
De pagina die weergegeven word:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?=isLogingValid($_COOKIE[COOKIE])?>
  2.  
  3. <?=displayText($_GET['page'])?>
  4.  
  5. <?php
  6. $userinfo = getUserInformation($_COOKIE[COOKIE]);
  7.  
  8. if($_SERVER['REQUEST_METHOD'] == 'POST')
  9. {
  10. 	mysql_query('UPDATE site_freelancers
  11. 				 SET
  12. 				 company = "'.mysql_real_escape_string($_POST['company']).'",
  13. 				 firstname = "'.mysql_real_escape_string($_POST['firstname']).'",
  14. 				 surname = "'.mysql_real_escape_string($_POST['surname']).'",
  15. 				 telephone = "'.mysql_real_escape_string($_POST['telephone']).'",
  16. 				 mobile = "'.mysql_real_escape_string($_POST['mobile']).'",
  17. 				 email = "'.mysql_real_escape_string($_POST['email']).'",
  18. 				 branche = "'.mysql_real_escape_string($_POST['branche']).'",
  19. 				 info = "'.mysql_real_escape_string($_POST['info']).'"
  20. 				 WHERE
  21. 				 id = "'.mysql_real_escape_string($userinfo[9]).'"') or die(mysql_error());
  22.  
  24. 	header('location: '.ROOT.'account/edit-profile/');
  25. }
  26. ?>
  27.  
  28. <div id="ajax-form">
  29.  
  30. </div>
  31.  
  32. <script language="javascript" type="text/javascript">
  33. /* load on document load */
  34. $(document).ready(function(){
  35. 	$.ajax({
  36. 		type: 'POST',
  37. 		url: 'ajax/edit-profile.php',
  38. 		success: function(html){
  39. 			$('#ajax-form').html(html)
  40. 		}
  41. 	});
  42. });
  43.  
  44. function verifyCompany(){
  45. 	var company = document.getElementById('company').value;
  46.  
  47. 	$.ajax({
  48. 		type: 'POST',
  49. 		url: 'ajax/verifyCompany.php',
  50. 		data: {
  51. 			company : company
  52. 		},
  53. 		success: function(html){
  54. 			$('#companyIco').html(html);
  55. 		}
  56. 	});
  57. }
  58.  
  59. function verifyFirstname(){
  60. 	var firstname = document.getElementById('firstname').value;
  61.  
  62. 	$.ajax({
  63. 		type: 'POST',
  64. 		url: 'ajax/verifyFirstname.php',
  65. 		data: {
  66. 			firstname : firstname
  67. 		},
  68. 		success: function(html){
  69. 			$('#firstnameIco').html(html);
  70. 		}
  71. 	});
  72. }
  73.  
  74. function verifySurname(){
  75. 	var surname = document.getElementById('surname').value;
  76.  
  77. 	$.ajax({
  78. 		type: 'POST',
  79. 		url: 'ajax/verifySurname.php',
  80. 		data: {
  81. 			surname : surname
  82. 		},
  83. 		success: function(html){
  84. 			$('#surnameIco').html(html);
  85. 		}
  86. 	});
  87. }
  88.  
  89. function verifyTelephone(){
  90. 	var telephone = document.getElementById('telephone').value;
  91.  
  92. 	$.ajax({
  93. 		type: 'POST',
  94. 		url: 'ajax/verifyTelephone.php',
  95. 		data: {
  96. 			telephone : telephone
  97. 		},
  98. 		success: function(html){
  99. 			$('#telephoneIco').html(html);
  100. 		}
  101. 	});
  102. }
  103.  
  104. function verifyMobile(){
  105. 	var mobile = document.getElementById('mobile').value;
  106.  
  107. 	$.ajax({
  108. 		type: 'POST',
  109. 		url: 'ajax/verifyMobile.php',
  110. 		data: {
  111. 			mobile : mobile
  112. 		},
  113. 		success: function(html){
  114. 			$('#mobileIco').html(html);
  115. 		}
  116. 	});
  117. }
  118.  
  119. function verifyEmail(){
  120. 	var email = document.getElementById('email').value;
  121.  
  122. 	$.ajax({
  123. 		type: 'POST',
  124. 		url: 'ajax/verifyEmail.php',
  125. 		data: {
  126. 			email : email
  127. 		},
  128. 		success: function(html){
  129. 			$('#emailIco').html(html);
  130. 		}
  131. 	});
  132. }
  133. </script>


het ajax formulier dat geladen word
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. require_once('..'.DIRECTORY_SEPARATOR.'includes'.DIRECTORY_SEPARATOR.'config.php');
  3. require_once('..'.DIRECTORY_SEPARATOR.'language'.DIRECTORY_SEPARATOR.'NL_nl.php');
  4. ?>
  5.  
  6. <form name="edit-profiel" method="post" action="" enctype="multipart/form-data" class="space-above">
  7. 	<fieldset>
  8.         <label><?=REGISTER_L2?></label>
  9.         <input type="text" name="company" id="company" value="<?=$userinfo[0]?>" class="input" onKeyUp="verifyCompany()" />
  10.         <span id="companyIco" class="aIco"></span>
  11.         <br />
  12.  
  13.         <label><?=REGISTER_L3?></label>
  14.         <input type="text" name="firstname" id="firstname" value="<?=$userinfo[1]?>" class="input" onKeyUp="verifyFirstname()" />
  15.         <span id="firstnameIco" class="aIco"></span>
  16.         <br />
  17.  
  18.         <label><?=REGISTER_L4?></label>
  19.         <input type="text" name="surname" id="surname" value="<?=$userinfo[2]?>" class="input" onKeyUp="verifySurname()" />
  20.         <span id="surnameIco" class="aIco"></span>
  21.         <br />
  22.  
  23.         <label><?=REGISTER_L5?></label>
  24.         <input type="text" name="telephone" id="telephone" value="<?=$userinfo[3]?>" class="input" onKeyUp="verifyTelephone()" />
  25.         <span id="telephoneIco" class="aIco"></span>
  26.         <br />
  27.  
  28.         <label><?=REGISTER_L6?></label>
  29.         <input type="text" name="mobile" id="mobile" value="<?=$userinfo[4]?>" class="input" onKeyUp="verifyMobile()" />
  30.         <span id="mobileIco" class="aIco"></span>
  31.         <br />
  32.  
  33.         <label><?=REGISTER_L7?></label>
  34.         <input type="text" name="email" id="email" value="<?=$userinfo[5]?>" class="input" onKeyUp="verifyEmail()" />
  35.         <span id="emailIco" class="aIco"></span>
  36.         <br />
  37.  
  38.         <label><?=REGISTER_L11?></label>
  39.         <input type="text" name="branche" id="branche" value="<?=$userinfo[6]?>" class="input" />
  40.         <br />
  41.  
  42.         <label><?=REGISTER_L12?></label>
  43.         <textarea name="info" id="info" rows="7" class="input textarea"><?=$userinfo[10]?></textarea>
  44.         <br />
  45.  
  46. 		<label><?=FL_CP_FILE_1?></label>
  47.         <?php
  48. 		if($userinfo[7] == ''){
  49. 			echo 'geen bestand gevonden...';
  50. 		} else {
  51. 			echo $userinfo[7];	
  52. 		}
  53. 		?>
  54.         <a href="<?=ROOT?>account<?=DIRECTORY_SEPARATOR?>edit-file<?=DIRECTORY_SEPARATOR?>1<?=DIRECTORY_SEPARATOR?>" title="<?=FL_CP_FILE_1?>">
  55.         <img src="<?=ROOT.'images'.DIRECTORY_SEPARATOR?>edit.png" alt="<?=FL_CP_EDIT_BUTTON?>" />
  56.         </a>
  57.         <br />
  58.  
  59.         <label><?=FL_CP_FILE_2?></label>
  60.         <?php
  61. 		if($userinfo[8] == ''){
  62. 			echo 'geen bestand gevonden...';
  63. 		} else {
  64. 			echo $userinfo[8];	
  65. 		}
  66. 		?>
  67.         <a href="<?=ROOT?>account<?=DIRECTORY_SEPARATOR?>edit-file<?=DIRECTORY_SEPARATOR?>2<?=DIRECTORY_SEPARATOR?>" title="<?=FL_CP_FILE_2?>">
  68.         <img src="<?=ROOT.'images'.DIRECTORY_SEPARATOR?>edit.png" alt="<?=FL_CP_EDIT_BUTTON?>" />
  69.         </a>
  70.         <br />
  71.  
  72.         <input type="submit" name="submit" class="submit-button" value="<?=FL_CP_BUTTON?>" />
  73.  
  74.     </fieldset>
  75. </form>
  76.  
  77. <script language="javascript" type="text/javascript">
  78. $(function() {
  79. 	var availableTags = [
  80. 		"test",
  81. 		<?php
  82. 		autocompleteBranches();
  83. 		?>
  84. 	];
  85. 	$( "#branche" ).autocomplete({
  86. 		source: availableTags
  87. 	});
  88. });
  89. </script>


De functie welke alles in het javascript gedeelte plakt
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function autocompleteBranches(){
  2. 	$query = mysql_query('SELECT DISTINCT branche FROM site_freelancers
  3. 						  ORDER BY branche ASC');
  4. 	$rows = mysql_num_rows($query);
  5. 	$counter = 1;
  6.  
  7. 	while($fetch = mysql_fetch_assoc($query))
  8. 	{
  9. 		// without comma or with comma
  10. 		if($counter == $rows)
  11. 		{
  12. 			echo '"'.$fetch['branche'].'"
  13. 			';
  14. 		}
  15. 		else
  16. 		{
  17. 			echo '"'.$fetch['branche'].'",
  18. 			';
  19. 		}
  20.  
  21. 		$counter++;
  22. 	}
  23. }


Hopelijk heb je hier iets aan 

Groetjes
Offline Koen - 27/07/2012 10:45
Avatar van Koen PHP expert Het probleem zit 'm erin dat alles tussen <script> en </script> standaard wordt genegeerd door jQuery.ajax(). De data wordt namelijk gewoon als string opgehaald.

Je moet dit tegengaan door een extra attribuut dataType: "html" mee te sturen met je AJAX request. Op deze manier zal deze string bij het ophalen reeds geinterpreteerd worden als zijnde HTML en wordt er een DOM (document object model) van opgebouwd. De bijgevoegde JavaScript wordt dan alsnog uitgevoerd op dit DOM.

Je code wordt dus zo:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function(){
  2.     $.ajax({
  3.         type: 'POST',
  4.         dataType: 'html',
  5.         url: 'ajax/edit-profile.php',
  6.         success: function(html){
  7.             $('#ajax-form').html(html)
  8.         }
  9.     });
  10. });


Hopelijk lost dit je probleem op. Anders zal je in de success-callback nog eens apart een request moeten uitvoeren die de autocomplete tags gaat ophalen.


Groeten,

Koen
Bedankt door: Martijn, GroundZero
Offline GroundZero - 27/07/2012 12:20 (laatste wijziging 27/07/2012 14:29)
Avatar van GroundZero Lid ahhhh kijk! goed om te weten haha... ik ga het vandaag proberen, ik laat je de uitkomst weten!

php code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function(){
  2. 	$.ajax({
  3. 		type: 'POST',
  4. 		dataType:  'html',
  5. 		url: 'ajax/edit-profile.php',
  6. 		success: function(html){
  7. 			$('#ajax-form').html(html)
  8. 		}
  9. 	});
  10. });


Zelfde resultaat, hij doet het nog steeds niks. Misschien haal ik de AJAX wel weg en gooi ik alles gewoon in het PHP document zelf. Zijn we meteen van dat probleem af ;)
Offline Martijn - 27/07/2012 15:09
Avatar van Martijn Crew PHP Wat is me afvraag, waarom gooi je niet het zoekwoord naar php, laat je php met een beetje levensthein zoeken, en laat je php de autosuggest waardes terug geven?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.245s