Ajax niet werkend

Door jeffrey boud op 21-08-2010 10:39

1.965 views

Beste Helpers

Ik ben bezig met het leren Ajax te gebruiken. Ik volg daarom een voorbeeld die heb verkregen via een website. Nou heb ik deze opdracht helemaal gemaakt maar krijg deze niet werkend. Doe ik iets verkeerd of staat er een fout in de code.

Index.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Ajax 101</title>
<link rel=”stylesheet” href=”boxy.css”>
<script type=”text/javascript” src=”prototype.js”></script>

<script language=’javascript’>

//handle the Ajax response …
function handleResponse(transport)
{
$(‘hello’).innerHTML = transport.responseText;
}

//creates a prototype Ajax object, sends a request, and registers the callback function ‘handleResponse’
function callAjax(s)
{
var myAjax = new Ajax.Request(‘server_script.php’,
{method: ‘get’, parameters: {state: s},
onComplete: handleResponse});
}

</script>

</head>
<body>
<p>
<span id=’hover_span’ onmouseover=”callAjax(‘do’)” onmouseout=”callAjax(‘undo’)”> <b>Hover here to trigger Ajax call:</b> </span>
</p>

<span id=’hello’> boring pre-Ajax-call text … </span>

</body>
</html>

server_script.php

<?php

$state = $_REQUEST['state'];

if ($state == ‘do’)
{
echo ‘<h1>exciting text retrieved from server!</h1>’;
}
else if ($state == ‘undo’)
{
echo ‘reset to boring …’;
}
else
{
echo ‘unknown state parameter passed to server!!’;
}

?>

boxy.css

#hover_span
{
font-size: 12pt;
}

#hover_span:hover
{
cursor: crosshair;
background-color: yellow;
}

Veur Heur

21-08-2010 10:46 gewijzigd op 21-08-2010 10:48

Begin eens met al die ‘ aan te passen naar " of '

jeffrey boud

21-08-2010 11:26

Heb ik gedaan. Script doet het nog steeds niet

P Lekensteyn

21-08-2010 11:38 gewijzigd op 21-08-2010 11:38

Weet je zeker dat je alles goed vervangen hebt?
Probeer dit eens (juiste" en '):

Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax 101</title>
<link rel="stylesheet" href="boxy.css">
<script type="text/javascript" src="prototype.js"></script>

<script language='javascript'>

//handle the Ajax response …
function handleResponse(transport)
{
$('hello').innerHTML = transport.responseText;
}

//creates a prototype Ajax object, sends a request, and registers the callback function 'handleResponse'
function callAjax(s)
{
var myAjax = new Ajax.Request('server_script.php',
{method: 'get', parameters: {state: s},
onComplete: handleResponse});
}

</script>

</head>
<body>
<p>
<span id='hover_span' onmouseover="callAjax('do')" onmouseout="callAjax('undo')"> <b>Hover here to trigger Ajax call:</b> </span>
</p>

<span id='hello'> boring pre-Ajax-call text … </span>

</body>
</html>

server_script.php

<?php

$state = $_REQUEST['state'];

if ($state == 'do')
{
echo '<h1>exciting text retrieved from server!</h1>';
}
else if ($state == 'undo')
{
echo 'reset to boring …';
}
else
{
echo 'unknown state parameter passed to server!!';
}

?>

boxy.css

#hover_span
{
font-size: 12pt;
}

#hover_span:hover
{
cursor: crosshair;
background-color: yellow;
}

jeffrey boud

21-08-2010 14:53

Dank je. Loop nu op sail maar zodra ik thuis ben ga ik meteen proberen.

Toevoeging op 22/08/2010 12:12:59:

Ok uitgeprobeerd en het werkt super. Dank je wel.

Reageren

Inloggen om te reageren