AJAX seems not to work when output code through FW

I build a site in EE, with a register form, using code from developers. The form should return error messages with AJAX.

I get it working when uploading the HTML and links to the Java script direct on line.
But it fails when using FW, with Crowbars and HTML mark-up. Comparing the two files in TextWrangler does not help me very much, they look -mostly- the same.

This is very odd.

I cannot show the live URL here, will PM anyone willing to help me out with this…

This is the basic form code from the developers:

<!doctype html>
<head>
    <title>Simple Registration AJAX Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script type="text/javascript">

        // prepare the form when the DOM is ready
        $(document).ready(function() {
            var options = {
                beforeSubmit:  showRequest,  // pre-submit callback
                success:       showResponse  // post-submit callback
            };

            // bind form using 'ajaxForm'
            $('#register_member_form').ajaxForm(options);
        });

        // pre-submit callback
        function showRequest(formData, jqForm, options) {
            // anything you want to do before submit?
            $('#output1').hide();
            return true;
        }

        // post-submit callback - here is where we get the response from Simple Registration
        function showResponse(responseText, statusText, xhr, $form)  {
           if(responseText.status == 'success')
           {
               $('#output1').html('<h2>'+responseText.heading+'</h2><p>'+responseText.content+'</p>');
               $('#form-container').html('&nbps;'); // clear it.
           }
           else if(responseText.status == 'error')
           {
               $('#output1').html('<h2>'+responseText.heading+'</h2><p>'+responseText.content+'</p>');
           }
            $('#output1').show('slow');
        }

    </script>

</head>

<body>

<div id="output1">

</div>

<div id="form-container">
    {exp:simple_registration:form ajax='y'}
        E-mail: <input type="text" name="email"/>
        <p>Password: <input type="password" name="password"/></p>

    <p><input type="hidden" name="signup_key" value="aeb102f05245fd292c427ad80c4aaeec"/></p>

        <p><input type="submit" value="Register account"/></p>
    {/exp:simple_registration:form}
</div>

</body>
</html>

and this is what FW makes of it


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script type="text/javascript">

        // prepare the form when the DOM is ready
        $(document).ready(function() {
            var options = {
                beforeSubmit:  showRequest,  // pre-submit callback
                success:       showResponse  // post-submit callback
            };

            // bind form using 'ajaxForm'
            $('#register_member_form').ajaxForm(options);
        });

        // pre-submit callback
        function showRequest(formData, jqForm, options) {
            // anything you want to do before submit?
            $('#output1').hide();
            return true;
        }

        // post-submit callback - here is where we get the response from Simple Registration
        function showResponse(responseText, statusText, xhr, $form)  {
           if(responseText.status == 'success')
           {
               $('#output1').html('<h2>'+responseText.heading+'</h2><p>'+responseText.content+'</p>');
               $('#form-container').html('&nbps;'); // clear it.
           }
           else if(responseText.status == 'error')
           {
               $('#output1').html('<h2>'+responseText.heading+'</h2><p>'+responseText.content+'</p>');
           }
            $('#output1').show('slow');
        }

    </script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="nl"/>
<title>test_register</title>
<meta name="viewport" content="width = 960, minimum-scale = 0.25, maximum-scale = 1.60"/>
<meta name="robots" content="NOINDEX, NOFOLLOW"/>
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/edit/default_site/css/styles.css"/>
<style type="text/css">
<!-- 
body { font-family:Trebuchet MS,Arial,Helvetica,sans-serif; margin:0px; background-color:#fff; height:100% }
html { height:100% }
-->
</style>
</head>
<body>
<div id="PageDiv" style="position:relative; min-height:100%">
	<div id="form" style="position:absolute; left:54px; top:26px; width:778px; z-index:1">
		{exp:simple_registration:form ajax='y'}
        E-mail: <input type="text" name="email"/>
        <p>Password: <input type="password" name="password"/></p>

    <p><input type="hidden" name="signup_key" value="aeb102f05245fd292c427ad80c4aaeec"/></p>

        <p><input type="submit" value="Register account"/></p>
    {/exp:simple_registration:form}
	</div>
</div>
</body>
</html>

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think the problem is in the divs. In the code you were given, the divs are named output1 and form-container, while in Freeway you have PageDiv and form. The code is looking for output1 and form-container.

I think you need to create another div called output1, and either rename form to form-container or change the code to look for form instead of form-container.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

That did the trick!

The only difference I see now is the behaviour of the AJAX error message.
My H2 tag slides in from the left, the errors are below, but in the FW version the form itself disappears… Not good!

What I really want is a pop-up with the errors. I guess it is connected to

$('#output1').show('slow');

I was searching here….show() | jQuery API Documentation

I do not want to bother you too much, but do you have a hit where I could look?

:slight_smile:


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Heh - I don’t have anything. I just compared the two versions of the code you posted in BBEdit.

If you want a pop-up with the errors instead of putting it on the page, you’ll need to change

else if(responseText.status == 'error')
       {
           $('#output1').html('<h2>'+responseText.heading+'</h2><p>'+responseText.content+'</p>');
       }

most notably the line between the braces.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks. BTW found something myself the meantime. The output_1 is hidden (obvious) and shows when an error returns from the server. In FW I made now a layer #output_1 which I can place on the page on a approprate spot. That will do for now. I guess I can call an iFrame or popup with another library. Like here http://www.jquerypopup.com/ (Whats in a name…)


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options