Question

I’ve successfully installed this jQuery-based signup form here:
http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/

But when I applied it to my main layout, which is PHP-based and uses clean URLs, the form works funky:
I submit an email, and it stays at the “Please wait…” state.
I’m guessing that it stops running the $.ajax({ line.

The JS code is as below:

<script type="text/javascript">
    // code using jQuery
    $(document).ready(function(){

        $('#newsletter-signup').submit(function(){

            //check the form is not currently submitting
            if($(this).data('formstatus') !== 'submitting'){

                //setup variables
                var form = $(this),
                    formData = form.serialize(),
                    formUrl = form.attr('action'),
                    formMethod = form.attr('method'), 
                    responseMsg = $('#signup-response');

                //add status data to form
                form.data('formstatus','submitting');

                //show response message - waiting
                responseMsg.hide()
                           .addClass('response-waiting')
                           .text('Please Wait...')
                           .fadeIn(200);

                //send data to server for validation
                $.ajax({
                    url: formUrl,
                    type: formMethod,
                    data: formData,
                    success:function(data){

                        //setup variables
                        var responseData = jQuery.parseJSON(data), 
                            klass = '';

                        //response conditional
                        switch(responseData.status){
                            case 'error':
                                klass = 'response-error';
                            break;
                            case 'success':
                                klass = 'response-success';
                            break;  
                        }

                        //show reponse message
                        responseMsg.fadeOut(200,function(){
                            $(this).removeClass('response-waiting')
                                   .addClass(klass)
                                   .text(responseData.message)
                                   .fadeIn(200,function(){
                                       //set timeout to hide response message
                                       setTimeout(function(){
                                           responseMsg.fadeOut(200,function(){
                                               $(this).removeClass(klass);
                                               form.data('formstatus','idle');
                                           });
                                       },3000)
                                    });
                        });
                    }
                });
            }

            //prevent form from submitting
            return false;
        });
    });

 // end noConflict wrap
</script>

The HTACCESS looks something like this:

<IfModule mod_rewrite.c>

    RewriteEngine On

    # COMPANY NAVIGATION

        #Sends URI to index.php for parsing
        RewriteRule !\.(css|gif|jpg|png|ico|txt|xml|js|pdf|htm|zip)$ /path/to/main/folder/index.php [NC]

</IfModule>

Which passes the variables into index.php. In index.php, I split everything into an array, and parse the URL that way:

    function create_url_array($url) {
        strip_tags($url);
        $url_array = explode("/", $url);
        array_shift($url_array); // First one is empty
        return $url_array;
    }
    $url = $_SERVER['REQUEST_URI'];
    $url_array = create_url_array($url);

if($url_array[1] == "folder") { 
// include relevant page/s etc
}

I’ve been trying to troubleshoot this for hours and still have not found a solution.

Any hints/helpful info would be awesome.

/* EDIT: Included Firebug Analysis */

Thanks Nathan! I tried your suggestion and came up with the following error when I ran a test (tried submitting the form):

"uncaught exception: Invalid JSON: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
... 
{"status":"success","message":"You have been signed up!"}"

It basically gives me the code for the entire page, all the way until the success message. The entry DOES appear in mysql successfully.
I think the problem is really the JSON being passed…which I’m not very familiar with at all. It seems to hiccup where htaccess/clean URL’s occur.
I’m not sure where to go about fixing this. Do you have any suggestions?

Answer 1

The problem seems to be that your response includes the HTML from a page, which is invalid JSON code. Make sure the response only includes this:

{"status":"success","message":"You have been signed up!"}

Your code also includes the HTML, like the DOCTYPE header you posted in the example.

Without seeing the code on the response page, it’s difficult to advise on how to remove the HTML.

Hope this is helpful.