לצורך למידה יצרתי דף HTML פשוט הקורא לדף אחר באמצעות Ajax
הקוד של ה Html עצמו הוא כזה:
<html>
<head>
<script src="jquery_min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript">
//Jquery
$(document).ready(function() {
$("#button").click(function() {
$("#show").toggle();
});
});
//Ajax
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("con").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();
</script>
</head>
<body>
<center>
<div id="con"> </div>
</center>
</body>
</html>
|
בכוונה שמתי את הקוד של ה java וה ajax ביחד כדי שיהיה לכם מובן יותר.
מה שקורה הקוד של ה ajax בעצם מושך סה"כ טבלה מעמוד אחר, הקוד שלה:
<?php
echo "
<table border='1'>
<tr>
<td>
Some Text
</td>
</tr>
<tr id='show'>
<td>
Working?
</td>
</tr>
</table>
<span id='button'>Click</span>";
?>
|
ב CSS יש בסה"כ
מה שקורה בטעינת האתר, הוא הצגת הטבלה על המסך ומתחתיה כפתור. בלחיצה על הכפתור שורה חדשה של הטבלה צריכה להופיע/להעלם(toggle).
מה שקורה בפועל ללא ajax הכל עובד תקין. אך עם ה ajax ה jquery לא מתייחס ללחצן יותר. האם זה בגלל סדר טעינת הדברים, מישהו נתקל בזה?
גירסת הדפסה
סגן המנהל
מפקח
Winner
צל"ש
מומחה
