Edward Posted November 2, 2008 Share Posted November 2, 2008 Hi, I'm starting to learn AJAX and I have completed a simple tutorial online which shows me how to action a form with AJAX. The result is that when the used clicks on a radio button to select their answer to a question, I am able to display the word 'correct' if the user chose the correct answer. However, I want to be able to make the word 'correct' fade in with jQuery. I know how to do this normally, but not by combining it with AJAX. Here is my code: <html> <head> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> </head> <body> <script type="text/javascript"> var xmlHttp function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function showHint(str) { xmlHttp=GetXmlHttpObject(); var url="results.php?"; url=url+"answer="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> <form id="myForm"> <p>Q1 - House Number</p> <p><input type="radio" name="house_number" id="q1a1" value="36" onclick="showHint('q1a1')"> 36</p> <p><input type="radio" name="house_number" id="q1a2" value="37" onclick="showHint('q1a2')"> 37</p> <p><span id="txtHint"></span></p> <p id="test" style="display: none;">Correct!</p> </form> </body> </html> <?php header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); if ($_GET['answer'] == 'q1a1') { ?> <script type="text/javascript"> $(document).ready(function(){ $('#test').animate({opacity: '1'}, 500); }); </script> <?php echo '1 out of 1'; } else { echo '0 out of 1'; } ?> If the answer is correct, I want the item with the id 'test' to fade it, but it doesn't show up at all. Can anyone see what I'm doing wrong? As I'm new to AJAX, perhaps I'm taking the completely wrong approach? Thank you for any help you can offer. Quote Link to comment Share on other sites More sharing options...
corbin Posted November 2, 2008 Share Posted November 2, 2008 I think you need to look into AJAX more x.x. Also, why bother using normal and jQuery AJAX? I would stick with one or the other. Anyway, here is your problem. Javascript is not parsed in AJAX responses. You could either strip the script tags and eval it, or you could use jQuery, and I think it has a built in option to parse JS. Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted November 2, 2008 Share Posted November 2, 2008 indeed why use the vanilla js way when jQuery has a great way of dealing with ajax. I think you should check the ajax documentation of jQuery and especially the working examples. http://docs.jquery.com/Ajax the js fade fx you can add after the succes event. this way you don't have to parse js and place js in your results.php. I recommend using the succent event and not parsing any js. in your case it would be bad practices even. also look into the domready event so you can place all your js code in your head Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.