התחלתי לבנות תפריט גלילה (AJAX) אשר נפתח בעת הכנסה של טקסט כלשהו לתיבת טקסט.

דוגמא: http://wikipedia.org.il/ (לחצו על אות כלשהי, ובצד שמאל יפתח תפריט עם אפשרויות).

עד כה, הכל הלך כהלכה, חוץ מדבר אחד.

בויקיפדיה יש בתפריט לכל מילה לינק, אך אני רוצה שהערך של המילה יועתק לתיבת הטקסט.

זה מה שעשיתי בכתובית הטקסט בתפריט:

קוד:

onclick="javascript:addContent('value')"

ויצרתי פונקציה שתחבר את הפלט ותציב אותו בתיבת הטקסט:

קוד:

	 function addContent(input) {

	 var input;
	 document.getElementById('input').value = input;
	 }

ה-ID של תיבת הטקסט הוא input.

מסיבה שלא ברורה לי הקוד הנ"ל לא עובד.
אשמח לעזרה מהמומחים כאן


תודה מראש,

נתי.

אני מקוה שאתה מבין שבקוד הבא:

קוד:

onclick="javascript:addContent('value')"

סה"כ מה שהתכוונת לעשות זה להכניס מחרוזת שערכה "value" לתוך ערכו של אלמנט שסימן הזהות שלו (id) הוא input. בפקודה הנ"ל לא הכנסת ערך של משתנה (שזה מה שאני מניח שרצית לעשות באמצעות AJAX).

בקוד הבא:

קוד:

	 function addContent(input) {

	 var input;
	 document.getElementById('input').value = input;
	 }

יש בעיה קטנה...
בהתחלה הגדרת משתנה input בפרמטר הראשון של הפונקציה addContent.
אח"כ הגדרת את המשתנה input כמשתנה חדש בשורה:

קוד:

	 var input;

זה למעשה גרם לאיתחול המשתנה input והצבת ערך null תמיד.
לכן לעולם לא ישתנה הערך של האלמנט שסימן הזהות שלו הוא "input".
אז כדי שהקוד הנ"ל יעבוד יותר טוב יש למחוק את השורה, כלומר שהקוד הסופי הוא:

קוד:

	 function addContent(input) {
	 document.getElementById('input').value = input;
	 }

ועוד הערה קצת חשובה: תמיד תנסה לתת לאלמנטים סימני זהות (id) או שמות (name) בעלי משמעות.
שם הזהות "input" לאלמנט שאני מניח שהוא input זה לא כדאי...

value הוא רק מחרוזת זמנית שהכנסתי לכאן כדי לא לערב PHP, במציאות במקום value פועל אצלי משתנה של PHP שמתאים את השם של הפריט שלוחצים עליו ומכניס אותו לפונקציה.

הסתכלתי בפונקציות שונות שאנשים בנו ב JS, וראיתי את השורה הנ"ל (var input).
ניסיתי איתה, בלעדיה.

ניסיתי גם עם javascript: וגם בלי.

שום דבר לא עובד, הבעיה היא שה debugger של הדפדפן לא מזהה את השורות של AJAX והן לא נכללות במקור, כך שאני לא יכול לדעת בדיוק איפה נמצאת הבעיה.


לצורך העניין, הנה הקוד המלא:

קוד:

<script type="text/javascript">

function ajaxFunction(value)
{
if (value.length==0)
{ 
document.getElementById("test").innerHTML="";
return;
}
var xmlHttp;
try
	{
	 xmlHttp=new XMLHttpRequest();
		}
catch (e)
	{
	 try
	 {
	 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
	catch (e)
	 {
	 try
		{
		 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
	 catch (e)
		{
		 alert("Your browser does not support AJAX!");
				 return false;
				}
			}
		 }
	//FROM HERE AJAX CODE
	xmlHttp.onreadystatechange=function()
	 {
	 if(xmlHttp.readyState==4)
		{
		document.getElementById('test').innerHTML=xmlHttp.  responseText;
		}
	 }
	xmlHttp.open("GET","ajax.php?value="+value,true);
	xmlHttp.send(null);
	}
	 //TILL HERE AJAX CODE
 
	 function addContent(input) {
	 document.getElementById('input').value = input;
 
	 }
	</script>
	<center>
<form name="myForm">
<b>search:</b> <input id="input" type="text" onkeyup="ajaxFunction(this.value);" name="username" />
</form>
<div align="left" id="test"></div>
</center>

והנה הדף שה AJAX מקושר אליו:

קוד PHP:

<?

header('Content-Type: text/html; charset=windows-1255');
$key = $_GET['value'];
$names = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona","Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza","Elizabeth","Ellen","Wenche","Vicky");
echo "<table width='10%' align=\"left\">";
foreach ($names as $name) {
if (preg_match("/^{$key}/i", $name))
echo "<tr><td width=\"10%\" onmouseover=\"this.style.background='#ecf8fb'\" onmouseout=\"this.style.background='white'\" style=\"cursor:default;\" onclick=\"javascript:addContent(".$name.")\">".$name."</td></tr>";
}
echo "</table>"; 
?>

אני עברתי על הקוד בריפרוף...לא שמתי לב לבעיה.
גם כנראה העתקת את הקוד מ-w3schools, ככה שהסיכוי שהקוד לא תקין הוא קטן...למרות שאני זוכר שפעם מצאתי איזה טעות אצלם.

ועכשיו להערות ולדברים נוספים...:

1. במקום הקוד הבא:

קוד:

try
	{
	 xmlHttp=new XMLHttpRequest();
		}
catch (e)
	{
	 try
	 {
	 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
	catch (e)
	 {
	 try
		{
		 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
	 catch (e)
		{
		 alert("Your browser does not support AJAX!");
				 return false;
				}
			}
		 }

אני החלפתי אותו בקוד קצר יותר, ואני חושב שהוא יעיל יותר:

קוד:

var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") || new ActiveXObject("Microsoft.XMLHTTP") || new XMLHttpRequest();

זה חשוב באיזה מקום אתה שם את האובייקט, כי זה בודק קודם כל את האובייקט השמאלי ביותר והולך לכיוון הימני ביותר.

2. דבר נוסף...את הקוד של הוספת הערך נסה לכתוב מייד אחרי תגית ה-script, כלומר:

קוד:

<script type="text/javascript">
	 function addContent(input) {
	 document.getElementById('input').value = input;
 
	 }
...

יכול להיות שהקוד האחר שקשור ל-AJAX לא תקין, ומשום מה הדפדפן לא מודיע על אי-תקינות הקוד (קרה לי בעבר), ולכן הקוד של הוספת הערך לא פועל כי הוא נמצא אחרי הקוד שלא תקין.

תיקנתי, אבל עדיין לא עובד:

קוד:

<script type="text/javascript">
function addContent(input) {
	 document.getElementById('input').value = input;
}
 
function ajaxFunction(value) {
if (value.length==0) { 
 
document.getElementById("test").innerHTML="";
}
 
//compatibility
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") || new ActiveXObject("Microsoft.XMLHTTP") || new XMLHttpRequest();
//compatibility
 
	xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.getElementById('test').innerHTML=xmlHttp.  responseText;
}
	 }
 
xmlHttp.open("GET","ajax.php?value="+value,true);
xmlHttp.send(null);
}
</script>

שים לב שגם אם שליחת הבקשה הסתיימה, לא בטוח שהיא הסתיימה בהצלחה.
חשוב מאוד לבדוק גם את ה-HTTP Status Code, כמו שמתואר בדף הזה: http://developer.mozilla.org/en/doc...Server_Response

נ.ב.
תוכל לחסוך לעצמך הרבה כאב ראש אם תשתמש בספרית JS עם ממשק ל-AJAX, כמו כאן: http://www.sitepoint.com/article/ajax-jquery

תודה על ההערות.

אני לא בטוח אבל נראה לי שבחלק הבא:

קוד:

	xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.getElementById('test').innerHTML=xmlHttp.    responseText;
}
	 }

המשתנה xmlHttp בשורות:

קוד:

if(xmlHttp.readyState==4) {
document.getElementById('test').innerHTML=xmlHttp.    responseText;

לא מזוהה. בגלל שזה נמצא בתוך פונקציה...למרות שהגדרת לו var .
נסה להוסיף תנאי else במשפט\קוד הנ"ל עם הודעת alert או משהו דומה

וזה גם נראה לי מוזר שיש בשורה הבאה רווח:

קוד:

document.getElementById('test').innerHTML=xmlHttp.    responseText;

בחלק של - xmlHttp. responseText ...
נסה לכתוב את החלק הזה מחדש בצורה ידנית.

הרווח יצא בהעתקה לפורום. הוא לא קיים במציאות.

הערה נוספת: אין צורך לקדם את המשפטים ב-javascript: באירועים שממילא נועדו ל-JS.