Forum PHP.pl > [JavaScript][AJAX] Nie działa skrypt załadowany przez xmlhttp

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][AJAX] Nie działa skrypt załadowany przez xmlhttp

FoxLis

30.07.2011, 19:01:55

Cześć.
Załóżmy, że mam standardowy kod dostępny w internecie:

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
 
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
 
</body>
</html> 
[HTML] pobierz, plaintext

getuser.php

[PHP] pobierz, plaintext 
<?php
$q=$_GET["q"];
 
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("ajax_demo", $con);
 
$sql="SELECT * FROM user WHERE id = '".$q."'";
 
$result = mysql_query($sql);
 
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
 
while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
 
mysql_close($con);
?> 
[PHP] pobierz, plaintext

Do kodu wczytywanego przez AJAX dodaje:

[HTML] pobierz, plaintext 
<select name="lista2" onchange="alert('dadad')">
[HTML] pobierz, plaintext

Wszystkie się pięknie ładuje, natomiast nie działa wczytany kod JS. Po prostu nie wyskakuje alert.

Jak zrobić, aby wczytany kod JS działała poprawnie? Dodam, że kod z select będzie również wczytywać tekst z plików PHP do pola pobranego razem z wywoływaczem, czyli nie działającym select-alert.

mortus

30.07.2011, 21:20:26

Niestety tak łatwo nie będzie. Chyba, że użyjesz któregoś z istniejących frameworków JavaScript (jQuery, Prototype, itp.). W przeciwnym razie będziesz musiał napisać sobie funkcję, która na podstawie pobranej przez XMLHttpRequest odpowiedzi zaktualizuję Ci strukturę DOM Twojej strony (standardowy innerHTML tego nie robi).

FoxLis

30.07.2011, 21:49:51

Czyli jak powinienem to rozwiązać?
Mogę użyć jQuery (i wtedy działa, wczytane elementy obsługują funkcje).

Nie wiem jak ten kod przerobić na kod jQuery bo prawie taka sama jest wywoływana, trochę się różni ale to już umiem zrobić ale nie wiem jak poniższą zapisać w jQuery:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
[HTML] pobierz, plaintext

mortus

30.07.2011, 22:03:52

W jQuery Twoja funkcja to tylko kilka linijek:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function showUser(str) {
  if(str=="") {
    document.getElementById("txtHint").innerHTML="";
    return ;
  }
  $.get("getuser.php", { q: str }, function(response){
    $("#txtHint").html(response);
  });
}
</script>
[HTML] pobierz, plaintext

FoxLis

30.07.2011, 22:41:34

Dzięki. +++

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.