yui ajax issue

Analog · March 10, 2011

I started exploring the use of the yui library and just working with some stuff I've found through google to try and get a fill for how it works.

To start I went through a tutorial for a simple yui ajax call.

I call the ajax with the following which seems to work fine, it loads as desired. When js is disabled it ignores the onclick and uses the normal file.

[url='sendcash.php?ID={$player[']Send Cash[/url]

js function (/ajax/ajax.php)

function yui_load(folder,file,id)
{
	var loadUrl = './ajax/'+encodeURIComponent(folder)+'/'+encodeURIComponent(file)+'.php?id='+encodeURIComponent(id);
	var callback = 
		{
			success: function(o) 
				{
					document.getElementById('ajax_out').innerHTML =  o.responseText;
				},
			failure: function(o) 
				{
					alert("AJAX doesn't work"); //FAILURE
				}
		}
	var transaction = YAHOO.util.Connect.asyncRequest('GET', loadUrl, callback, null);
	return false;
}

Once the link is clicked with js enabled it loads this file via the above function

/ajax/user_view/send_cash_form.php

<?php
print <<<EOF
<script src='../../ajax/yahoo-min.js'></script> 
<script src='../../ajax/event-min.js'></script> 
<script src='../../ajax/connection-min.js'></script>
 <script type="text/javascript"> 
   // hijack the form once the DOM is in a ready state
   YAHOO.util.Event.onDOMReady(function() {
       hijackForm("exampleForm", "ajaxDiv");
   }); 

   function hijackForm(formId, updateId) {
       var formObj = document.getElementById(formId);
       // this is the callback for the form's submit event
       var submitFunc = function (e) {

           // prevent default form submission
           YAHOO.util.Event.preventDefault(e);

           // define a YUI callback object
           var callback = {
               success: function(o) { 
                   document.getElementById(updateId).innerHTML = o.responseText; 
               },
               failure: function(o) { 
                   alert("AJAX request failed!");
               }
           }

           // connect to the form and submit it via AJAX
           YAHOO.util.Connect.setForm(formObj);
           YAHOO.util.Connect.asyncRequest(formObj.method, formObj.action, callback);
       }

       // call our submit function when the submit event occurs
       YAHOO.util.Event.addListener(formObj, "submit", submitFunc);
   }
 </script> 

 <form id="exampleForm" method="post" action="ajax/view_user/send_cash.php"> 
   <div> 
    Text: <input type="text" name="text"/> 
     <input type="submit" value="Submit"/> 
   </div> 
 </form> 
 <div id="ajaxDiv"></div>
EOF;
?>

When the form is submitted it calls this file

/ajax/view_user/send_cash.php

<?php
// use to detect an XHR request
define('IS_AJAX', !empty($_SERVER['HTTP_X_REQUESTED_WITH']) 
&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

// only show document head markup if it's an XHR request
if (!IS_AJAX) {
   echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ';
   echo '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ';
   echo '<html xmlns="http://www.w3.org/1999/xhtml">';
   echo '<head><title>Form Submission</title></head><body>';
}

// this is the same for HTTP and XHR requests
if (empty($_POST['text'])) die("You did not input anything");
$text = htmlentities($_POST['text']);
echo "You entered: $text";

// only if it's an XHR request
if (!IS_AJAX) {
   echo '</body></html>';
}
?>

Now here is what happens.

User clicks on send cash link, form displays via ajax as desired....

user inputs to form field, clicks submit, and it loads /ajax/view_user/send_cash.php outside of the page instead of via ajax

I believe from what I've read, along with the comments in the code, that the reason it is not working is because headers are not being sent when the form is submitted. So based on the code it sends new headers out.

If i load just the form page (have to modify the action="" of the form), it works as it should, but not when the form is called via ajax then submitted.

After many failed attempts to correct the problem and get the desired out come, I need pointed in the right direction.

send_cash.php & send_cash_form.php are simple files from a tutorial that i found via google, js function based on one from another tutorial found via google.

Sign In

yui ajax issue

Recommended Posts

Analog

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace