Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wywoływanie skryptu po załadowaniu pliku do diva
Forum PHP.pl > Forum > XML, AJAX > AJAX
dlugi_as
17.06.2010, 13:24:35
Mam problem, otóż chcę uruchomić skrypt autocomplete w moim projekcie, mianowicie mam stronę pod adresem:

http://womag.nazwa.pl/problem/

kiedy wchodzę do Zgłoszenia->dodaj

ładuję plik http://womag.nazwa.pl/problem/strona.php?act=dodajnowe

nie działa, słyszałem o funkcji live() lecz nie umiem jej użyć bądź nie działa w moim przypadku.

Gdy wpisze go w przeglądarce, to po wpisaniu literki: p w pierwszym inpucie skrypt podpowiada uzupelenienie pola

plik index.php
[HTML] pobierz, plaintext 
  1. <?php
  2. session_start();
  3. include('header.php');
  4. ?>
  5. <body>
  6. <div id="kontener">
  7. <div class="logotabela">
  8. <div id="menu_kontener_glowne">
  9.  
  10. 		<ul id="menu_glowne">
  11.             <li><a href="java script:void(0);" class="klienci">Klienci</a></li>
  12.             <li><a href="java script:void(0);" class="zgloszenia">Zgłoszenia</a></li>
  13.             <li><a href="java script:void(0);" class="zadania">Zadania</a></li>
  14.             <li><a href="java script:void(0);" class="admin">Admin</a></li>
  15.         </ul>
  16.  
  17. 		<div id="menu_podrz">
  18.             <div id="klienci">
  19.                 <ul id="menu_podrzedne">
  20.                     <li><a href="">Wyszukaj</a></li>
  21.                     <li><a href="">Dodaj</a></li>
  22.                 </ul>
  23.  
  24.             </div>
  25.             <div id="zgloszenia">
  26.                 <ul id="menu_podrzedne">
  27.                     <li><a href="">Przeglądaj</a></li>
  28.                     <li><a href="">Szukaj</a></li>
  29.                     <li><a href="java script:ajaxget( 'strona.php?act=dodajnowe' )">Dodaj</a></li>
  30.                 </ul>
  31.             </div>
  32.             <div id="zadania">
  33.                 <ul id="menu_podrzedne">
  34.                     <li><a href="">Moje zadania</a></li>
  35.                     <li><a href="">Dodaj zadanie</a></li>
  36.                 </ul>
  37.             </div>
  38.             <div id="admin">
  39.                 <ul id="menu_podrzedne">
  40.                     <li><a href="">Operatorzy</a></li>
  41.                     <li><a href="">Dostosuj</a></li>
  42.                 </ul>
  43.             </div>         
  44. 		</div>
  45. </div>
  46.  
  47.  
  48.  
  49. </div>
  50.  
  51.  
  52.  
  53. <div id="srodek">
  54. <div id="strona">
  55. </div>
  56. </div></div>
[HTML] pobierz, plaintext


plik header.php
[PHP] pobierz, plaintext 
  1. <?php
  2. require_once('auth.inc.php');
  3. require_once('config.php');
  4. require_once('func.php');
  5. ?>
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <link rel="shortcut icon" href="/favicon_aa.ico" type="image/x-icon" />
  10. <link rel="icon" href="/favicon_aa.ico" type="image/x-icon" />
  11. <link rel="stylesheet" href="style.css" type="text/css" />
  12. <title>j4r4net - System zgłoszeń</title>
  13. <script type="text/javascript" src="jquery.js"></script>
  14. <style type="text/css">
  15. <!--
  16. body {
  17. 	background-color: #D8E3F5;
  18. }
  19. -->
  20. </style>
  21.  <style type="text/css">
  22.  
  23.     </style>
  24.  
  25.     <script type="text/javascript">
  26.  
  27.     </script>
  28.  
  29. 	<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
  30. 	<script type="text/javascript" src="jquery.js"></script>
  31. 	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
  32. 	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
  33. 	<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
  34.  
  35. 	<script type="text/javascript">
  36. 	$(function() {
  37. 		var dates = $('#from, #to').datepicker({
  38. 			defaultDate: "+1w",
  39. 			changeMonth: true,
  40. 			numberOfMonths: 3,
  41. 			onSelect: function(selectedDate) {
  42. 				var option = this.id == "from" ? "minDate" : "maxDate";
  43. 				var instance = $(this).data("datepicker");
  44. 				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
  45. 				dates.not(this).datepicker("option", option, date);
  46. 			}
  47. 		});
  48. 	});
  49. 	</script>
  50.     <script type="text/javascript" src="js/tabki.js"></script>
  51.     <script language="JavaScript" type="text/javascript" src="ajax/advAJAX/advajax.js"></script>
  52. <script language="JavaScript" type="text/javascript" src="ajax/js/ajax.js"></script>
  53. <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
[PHP] pobierz, plaintext

plik tabki.js
[HTML] pobierz, plaintext 
  1.  
  2.         $().ready(function()
  3. {
  4. 	$("ul#menu_glowne a").live('click',function()
  5. 	{
  6. 		$("ul#menu_glowne .active").removeClass("active");
  7. 				$(this).parent().addClass("active");
  8.  
  9. 		var element_index = $("#menu_glowne a").index(this);
  10.  
  11. 		$("#menu_podrz div:visible").hide();
  12. 		$("#menu_podrz div").eq(element_index).show();
  13.  
  14. 		return false;
  15. 	});
  16. });
[HTML] pobierz, plaintext


plik strona.php?act=dodajnowe
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>jQuery Autocomplete</title>
  6.         <script type="text/javascript" src="jquery.js"></script>
  7.         <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
  8.  
  9.  
  10.  
  11.         <script type="text/javascript">
  12.             $(function(){
  13.  
  14.                 $("input[name='miasto1']").autocomplete('autoKlienci.php',{
  15. width:300,
  16. formatItem: function(row, i, max) {
  17.     return "(<b>ID: " + row[0] + "</b>)" + row[1] + " " + row[2] + " (nip: " + row[3] + " ";
  18. },
  19. formatMatch: function(row, i, max) {
  20.     return row[1];
  21. },
  22. formatResult: function(row) {
  23.     return row[0];
  24. }
  25.  
  26.  
  27.  
  28.                 });
  29.  
  30.                 $("input[name='miasto2']").autocomplete('autoKlienci.php',{
  31. width:300,
  32. formatItem: function(row, i, max) {
  33.     return row[1] + " (<i>" + row[2] + "</i>)";
  34. },
  35. formatMatch: function(row, i, max) {
  36.     return row[1];
  37. },
  38. formatResult: function(row) {
  39.     return row[2];
  40. }
  41.  
  42.                 });
  43.             });
  44.         </script>
  45.         <style type="text/css">
  46.             /*demo page css*/
  47.             body { font: 62.5% "Tahoma", sans-serif; margin: 10px 0px; color:#111111; }
  48.             h1,h2,h3,h4,h5 { color: #555555; }
  49.             h1 { font-size: 17px; font-weight: bold; }
  50.             h2 { font-size: 13px; font-weight: bold; }
  51.             h3 { font-size: 11px; font-weight: bold; }
  52.             img { vertical-align: middle; }
  53.             pre { font-size: 11px; margin: 10px 0px; }
  54.             div.c { margin: 10px 0px; font-size: 11px; }
  55.  
  56.             .ac_results {
  57.                 padding: 0px;
  58.                 border: 1px solid black;
  59.                 background-color: white;
  60.                 overflow: hidden;
  61.                 z-index: 99999;
  62.             }
  63.  
  64.             .ac_results ul {
  65.                 width: 100%;
  66.                 list-style-position: outside;
  67.                 list-style: none;
  68.                 padding: 0;
  69.                 margin: 0;
  70.             }
  71.  
  72.             .ac_results li {
  73.                 margin: 0px;
  74.                 padding: 2px 5px;
  75.                 cursor: default;
  76.                 display: block;
  77.                 /*
  78.                 if width will be 100% horizontal scrollbar will apear
  79.                 when scroll mode will be used
  80.                 */
  81.                 /*width: 100%;*/
  82.                 font: menu;
  83.                 font-size: 12px;
  84.                 /*
  85.                 it is very important, if line-height not setted or setted
  86.                 in relative units scroll will be broken in firefox
  87.                 */
  88.                 line-height: 16px;
  89.                 overflow: hidden;
  90.             }
  91.  
  92.             .ac_loading {
  93.                 background: white url('indicator.gif') right center no-repeat;
  94.             }
  95.  
  96.             .ac_odd {
  97.                 background-color: #eee;
  98.             }
  99.  
  100.             .ac_over {
  101.                 background-color: #0A246A;
  102.                 color: white;
  103.             }
  104.         </style>
  105.     </head>
  106.     <body>
  107.         <h2>Przykład 4. Użycie opcji <i>formatItem, formatMatch, formatResult</i>.</h2>
  108.  
  109.         <h3>4.1 formatujemy sposób prezentacji listy, do naszego inputa przesyłamy nazwę miasta</h3>
  110.  
  111.         <div class="c">
  112.             Miejscowość: <input type="text" name="miasto1" /> ( Naciśnij "p", aby wywołać podpowiedzi. )
  113.         </div>
  114.  
  115.         <fieldset>
  116.             <legend>HTML</legend>
  117.  
  118.             <pre><code class="html">&lt;input type=&quot;text&quot; name=&quot;miasto&quot; /&gt;</code></pre>
  119.         </fieldset>
  120.  
  121.         <div class="c"></div>
  122.  
  123.         <fieldset>
  124.  
  125.             <legend>JavaScript</legend>
  126.             <pre><code class="js">
  127. $("input[name='miasto']").autocomplete('miasta.php',{
  128.     width:300,
  129.     formatItem: function(row, i, max) {
  130.         return row[1] + " (&lt;b&gt;ID: " + row[0] + "&lt;/b&gt;)";
  131.     },
  132.     formatMatch: function(row, i, max) {
  133.         return row[1];
  134.     },
  135.     formatResult: function(row) {
  136.         return row[1];
  137.     }
  138. });
  139. </code></pre>
  140.         </fieldset>
  141.  
  142.         <h3>4.2 zmieniamy sposób formatowania listy, do naszego inputa przesyłamy tym razem nazwę województa</h3>
  143.  
  144.         <div class="c">
  145.             Miejscowość: <input type="text" name="miasto2" /> ( Naciśnij "W", aby wywołać podpowiedzi. )
  146.         </div>
  147.  
  148.         <fieldset>
  149.             <legend>HTML</legend>
  150.             <pre><code class="html">&lt;input type=&quot;text&quot; name=&quot;miasto&quot; /&gt;</code></pre>
  151.  
  152.         </fieldset>
  153.  
  154.         <div class="c"></div>
  155.  
  156.         <fieldset>
  157.             <legend>JavaScript</legend>
  158.             <pre><code class="js">
  159. $("input[name='miasto']").autocomplete('miasta.php',{
  160.     width:300,
  161.     formatItem: function(row, i, max) {
  162.         return row[1] + " (&lt;i&gt;" + row[2] + "&lt;/i&gt;)";
  163.     },
  164.     formatMatch: function(row, i, max) {
  165.         return row[1];
  166.     },
  167.     formatResult: function(row) {
  168.         return row[2];
  169.     }
  170. });
  171.  
  172. </code></pre>
  173.         </fieldset>
  174.  
  175.     </body>
  176. </html>
[HTML] pobierz, plaintext




ładowanie pliku odbywa sie za pomoca funkcji w pliku ajax.js
[XML] pobierz, plaintext 
  1. function ajaxget( link, ResponseId )
  2. {
  3. 	if( ResponseId == undefined )
  4. 	{	
  5. 		ResponseId = 'strona';	
  6. 	}
  7.  
  8. 	link = ""+link;
  9. 	advAJAX.get({
  10.     url: link,
  11.     onLoading : function() {		
  12. 			  	  contentHTML = document.getElementById( ResponseId ).innerHTML;
  13. 			  	  document.getElementById( ResponseId ).innerHTML = document.getElementById( 'loadtemplate2' ).innerHTML;			  	  
  14. 		},
  15.     onSuccess : function(obj) { 
  16.     	document.getElementById( ResponseId ).innerHTML = obj.responseText; 
  17.     	ajaxDebug( obj.responseText );
  18.     	},
  19.     onError : function(obj) {
  20. 		      	  document.getElementById( ResponseId ).innerHTML = contentHTML;	
  21. 		      	  window.alert('Wystąpił nieoczekiwany błąd. Powtórz operację.');
  22. 		}	
  23. 	});
  24. }
[XML] pobierz, plaintext


Proszę o wyczerpujące odpowiedzi, ponieważ dopiero zaczynam przygode z ajaxem. Przesiedziałem 3 dni nad tym, aby dojść do tego dlaczego to nie chce działać i zamiast naprawić to psułem jeszcze bardziej moją pracę.
Wave
17.06.2010, 15:48:10
No ale zastanów się co Ty robisz? Tak wygląda ta strona po pobraniu pliku ajaxem:
[HTML] pobierz, plaintext 
  1. <div id="strona">
  2.  
  3.  
  4.  
  5.  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.         <title>jQuery Autocomplete</title>
  8.         <script type="text/javascript" src="jquery.js"></script>
  9.         <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
  10.  
  11.  
  12.  
  13.         <script type="text/javascript">
  14.  
  15.             $(function(){
  16.  
  17.                 $("input[name='miasto1']").autocomplete('autoKlienci.php',{
  18. width:300,
  19. formatItem: function(row, i, max) {
  20.     return "(<b>ID: " + row[0] + "</b>)" + row[1] + " " + row[2] + " (nip: " + row[3] + " ";
  21. },
  22. formatMatch: function(row, i, max) {
  23.     return row[1];
  24. },
  25. formatResult: function(row) {
  26.     return row[0];
  27. }
  28.  
  29.  
  30.  
  31.                 });
  32.  
  33.                 $("input[name='miasto2']").autocomplete('autoKlienci.php',{
  34. width:300,
  35. formatItem: function(row, i, max) {
  36.     return row[1] + " (<i>" + row[2] + "</i>)";
  37. },
  38. formatMatch: function(row, i, max) {
  39.     return row[1];
  40. },
  41. formatResult: function(row) {
  42.     return row[2];
  43. }
  44.  
  45.                 });
  46.             });
  47.         </script>
  48.  
  49.         <style type="text/css">
  50.             /*demo page css*/
  51.             body { font: 62.5% "Tahoma", sans-serif; margin: 10px 0px; color:#111111; }
  52.             h1,h2,h3,h4,h5 { color: #555555; }
  53.             h1 { font-size: 17px; font-weight: bold; }
  54.             h2 { font-size: 13px; font-weight: bold; }
  55.             h3 { font-size: 11px; font-weight: bold; }
  56.             img { vertical-align: middle; }
  57.             pre { font-size: 11px; margin: 10px 0px; }
  58.             div.c { margin: 10px 0px; font-size: 11px; }
  59.  
  60.             .ac_results {
  61.                 padding: 0px;
  62.                 border: 1px solid black;
  63.                 background-color: white;
  64.                 overflow: hidden;
  65.                 z-index: 99999;
  66.             }
  67.  
  68.             .ac_results ul {
  69.                 width: 100%;
  70.                 list-style-position: outside;
  71.                 list-style: none;
  72.                 padding: 0;
  73.                 margin: 0;
  74.             }
  75.  
  76.             .ac_results li {
  77.                 margin: 0px;
  78.                 padding: 2px 5px;
  79.                 cursor: default;
  80.                 display: block;
  81.                 /*
  82.                 if width will be 100% horizontal scrollbar will apear
  83.                 when scroll mode will be used
  84.                 */
  85.                 /*width: 100%;*/
  86.                 font: menu;
  87.                 font-size: 12px;
  88.                 /*
  89.                 it is very important, if line-height not setted or setted
  90.                 in relative units scroll will be broken in firefox
  91.                 */
  92.                 line-height: 16px;
  93.                 overflow: hidden;
  94.             }
  95.  
  96.             .ac_loading {
  97.                 background: white url('indicator.gif') right center no-repeat;
  98.             }
  99.  
  100.             .ac_odd {
  101.                 background-color: #eee;
  102.             }
  103.  
  104.             .ac_over {
  105.                 background-color: #0A246A;
  106.                 color: white;
  107.             }
  108.         </style>
  109.  
  110.         <h2></h2>
  111.  
  112.         <h3>do  inputa przesyłamy id kleinta</h3>
  113.  
  114.         <div class="c">
  115.             klient: <input name="miasto1" type="text"> ( Naciśnij "p", aby wywołać podpowiedzi. )
  116.         </div>
  117.  
  118.  
  119.     </div>
[HTML] pobierz, plaintext
dlugi_as
17.06.2010, 20:46:25
no dobra, wyeksportowalem te dane do plikow i nie zadeklarowalem ich w nim, tylko pozostawilem czysty text i input. questionmark.gif dobrze questionmark.gif
Wave
18.06.2010, 09:29:26
no jak działa to chyba dobrze?
dlugi_as
18.06.2010, 10:31:51
Teraz działa, wykorzystałem inny skrypt:

strona.php?act=dodajnowe
[PHP] pobierz, plaintext 
  1. <form>
  2. 			<div>
  3. 				Type your county:
  4. 				<br />
  5. 				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" autocomplete="off"/>
  6. 			</div>
  7.  
  8. 			<div class="suggestionsBox" id="suggestions" style="display: none;">
  9. 				<img src="autoComplete/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow"  />
  10. 				<div class="suggestionList" id="autoSuggestionsList">
  11. 					&nbsp;
  12. 				</div>
  13. 			</div>
  14. 		</form>
[PHP] pobierz, plaintext


skrypt.js
[PHP] pobierz, plaintext 
  1. 	function lookup(inputString) {
  2. 		if(inputString.length == 0) {
  3. 			// Hide the suggestion box.
  4. 			$('#suggestions').hide();
  5. 		} else {
  6. 			$.post("autoKlienci.php", {queryString: ""+inputString+""}, function(data){
  7. 				if(data.length >0) {
  8. 					$('#suggestions').show();
  9. 					$('#autoSuggestionsList').html(data);
  10. 				}
  11. 			});
  12. 		}
  13. 	} // lookup
  14.  
  15. 	function fill(thisValue) {
  16. 		$('#inputString').val(thisValue);
  17. 		setTimeout("$('#suggestions').hide();", 200);
  18. 	}
[PHP] pobierz, plaintext


W tym skrypcie cały kod jest w metodach function fill i lookup, w wczesniejszych wersjach tak nie bylo.
W wcześniejszej wersji odbywało się to inaczej, bez onclick i onblur, czy to możliwe, że skrypty ładowane prez ajaxa, nie beda dzialac dopoki nie bedzie odwolan do metody za pomoca np. onclick ?

Dobrze myślę questionmark.gif
Wave
18.06.2010, 11:48:15
Nie do końca. Teraz nie ładujesz dynamicznie skryptu js, jedynie sam kod html z triggerem. Sytuacja się komplikuje przy dynamicznym ładowaniu kodu, wtedy trzeba korzystać z eval() lub operować metodami DOM (appendChild).
dlugi_as
18.06.2010, 13:27:50
a mógłbyś zaproponować użycie tego eval() bądź appendChild, bo szczerze mówiąc próbowałem użyć tych metod, ale niestety nie działały
Wave
18.06.2010, 13:37:39
Kod
var nowySkrypt = document.createElement("script");
    nowySkrypt.setAttribute("type", "text/javascript");
    nowySkrypt.setAttribute("src", "plik.js");

    document.getElementsByTagName("head")[0].appendChild(nowySkrypt);

eval masz np tu opisane http://www.webreference.com/programming/javascript/mk/

ale ogólnie to polecam google http://www.google.com/search?q=dynamiczne+...anie+skrypt%F3w
dlugi_as
19.06.2010, 00:17:45
Dzięki wielkie, pomogłeś mi, szukałem tego a znaleźć nie mogłem
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.