Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-11-2009, 11:30 AM   PM User | #1
franko75
New to the CF scene

 
Join Date: Jun 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
franko75 is an unknown quantity at this point
Jquery/Ajax modal form error handling

Hi, i'm setting up a couple of forms on the admin section of a CMS i'm developing. I'm using the Colorbox JQuery plugin for (unobtrusive) modal forms, which is loading an external php file containing the form. I want to be able to submit the form and handle the errors with php and display feedback in the modal window. Can anyone give me an example or some pointers for how to do this?
Thanks in advance for any help!
franko75 is offline   Reply With Quote
Old 06-11-2009, 10:46 PM   PM User | #2
franko75
New to the CF scene

 
Join Date: Jun 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
franko75 is an unknown quantity at this point
Ok this is where i've got to. On my main page (containing all the JS), I am loading a form from an external page and this is being displayed in the modal window. So the external code which is being loaded in the modal window contains an html form as well as the php script for processing the form and sending a JSON response based on validation/success etc. I want to be able to access the response from the php script and display it in the modal window, however, at the moment all that is happening is i click submit and form inside the modal window is duplicated.
Here is the code which is causing the problem - hope someone can help!
Code:
$(document).ready(function(){
            $("table")
            .tablesorter({widthFixed: true})
            .tablesorterPager({container: $("#pager")});
           
            $("a.user_admin").colorbox({transition:"elastic"}, function() { // onload...do
                    $('#edit_user').submit(function() {
               
                var inputs = [];
                $(':input', this).each(function() {
                        inputs.push(this.name + '=' + escape(this.value));
                })
         
                jQuery.ajax({
                    data: inputs.join('&'),
                    url: this.action,
                    timeout: 2000,
                    error: function() {
                    console.log("Failed to submit");
                    },
                    success: function(r) {
                    $("#message").before(r);
                    }
                })
         
                return false;
                    })
          })
           
        });
franko75 is offline   Reply With Quote
Old 06-12-2009, 04:13 PM   PM User | #3
Eldarrion
Regular Coder

 
Join Date: Feb 2009
Location: Wheeling, IL
Posts: 358
Thanks: 5
Thanked 62 Times in 60 Posts
Eldarrion is on a distinguished road
Well, it all depends on what the php file is returning. Using on success essentially works with the returned information from the AJAX request. As a hint... you can easily get FireBug to see exactly what gets sent and returned.

It sounds like you don't have the php handling the errors the way you want it to and it's returning the form again rather than an error message. I'd definitely suggest looking into that.
__________________
The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

How to ask smart questions?
Eldarrion is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:28 AM.


Advertisement
Log in to turn off these ads.