ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

SafeCracker ajax success/failure message

September 12, 2011 1:25pm

Subscribe [3]
  • #1 / Sep 12, 2011 1:25pm

    doubleplusgood

    199 posts

    Hi there, i’m building my first form with Safecracker which will display the success or failure message above the form without the need for redirecting to another page.

    When I click on the submit button without entering any data I get the following message “Failed with the following errors:”, but I don’t see the details of the fields that were in error. I was wondering if someone might be able to help me resolve this?

    I have this code place in the head of the page:

    [removed]
    jQuery(document).ready(function($){
        $('#faq').ajaxForm({
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#success').html('You successfully added a new entry with entry_id ' + data.entry_id).fadeIn();
                } else {
                    $('#failed').html('Failed with the following errors: '+data.errors.join(', ')).slideDown();
                }
            }
        });
    });
    [removed]

    This is the code I have in the body of the page:

    {exp:safecracker channel="ask_a_question" return="safecracker/ENTRY_ID/" rules:cf_ask_a_question_name="required" rules:cf_ask_a_question_email="valid_email" rules:cf_ask_a_question_question="required" id="faq" json="yes"}
        <fieldset>
            <ul>
    <div id="success"></div>
    <div id="failed">{if error}{error}{/if}</div>
            {custom_fields}
                <li>{if text}<label for="{field_name}">{field_label}</label><input type="text" id="{field_name}" name="{field_name}" value="{field_data}" />{if required} *{/if}{/if}</li>
              <li>{if textarea}<label for="{field_name}">{field_label}</label><textarea id="{field_name}" name="{field_name}" dir="{text_direction}" rows="{rows}">{field_data}</textarea>{if required} *{/if}{/if}</li>
          {/custom_fields}
              <li class="form-button"><input class="submit rounded" type="submit" value="Send"/></li>
          </ul>
        </fieldset>
    {/exp:safecracker}

    Thank you.

  • #2 / Sep 12, 2011 11:24pm

    Dan Decker

    7338 posts

    neilbradley,

    Safecracker can display errors in many different ways, and it’s completely up to you how you show them. Let’s look at an example:
    I’ve shortened up your tags for readability…

    {exp:safecracker channel='ask_a_question' error_handling='inline'}
    
    if you want to show the errors all in one place…
    {global_errors}{error}{/global_errors}
    
    or, if you prefer to display the error next to the field that caused it…
    <input type="text" id="{field_name}" name="{field_name}" value="{field_data}" />
    {if error}
    {field_name:error}{/if}
    {/exp:safecracker}

    Let us know if we can be of further assistance.

    Cheers,

  • #3 / Sep 13, 2011 5:45am

    doubleplusgood

    199 posts

    Hey Dan,

    Thanks for this. Weirdly I still get the same problem. Here is the revised code:

    jQuery(document).ready(function($){
        $('#faq').ajaxForm({
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#success').html('You successfully added a new entry with entry_id ' + data.entry_id).fadeIn();
                } else {
                    $('#failed').html('Failed with the following errors: '+data.errors.join(', ')).slideDown();
                }
            }
        });
    });
    {exp:safecracker channel="ask_a_question" rules:cf_ask_a_question_name="required" rules:cf_ask_a_question_email="required|valid_email" rules:cf_ask_a_question_question="required" error_handling="inline" id="faq" json="yes"}
    <fieldset>
    <ul>
    <div id="success"></div>
    <div id="failed">{global_errors}{error}{/global_errors}</div>
    {custom_fields}
    <li>{if text}<label for="{field_name}">{field_label}</label><input type="text" id="{field_name}" name="{field_name}" value="{field_data}" />{if required} *{/if}{/if}</li>
    <li>{if textarea}<label for="{field_name}">{field_label}</label><textarea id="{field_name}" name="{field_name}" dir="{text_direction}" rows="{rows}">{field_data}</textarea>{if required} *{/if}{/if}</li>
    {/custom_fields}
    <li class="form-button"><input class="submit rounded" type="submit" value="Send"/></li>
    </ul>
    </fieldset>
    {/exp:safecracker}
  • #4 / Sep 13, 2011 10:18pm

    Dan Decker

    7338 posts

    neilbradley,

    Hmmmm… If you take the javascript out of the equation, do the errors show then?

    Cheers,

  • #5 / Sep 14, 2011 9:27am

    doubleplusgood

    199 posts

    Hey Dan,
    If I take the javascript out, I just get redirected to the page with the json:

    {"success":0,"errors":[],"field_errors":{"cf_ask_a_question_name":"The Your Name field is required.","cf_ask_a_question_email":"The Your Email field is required.","cf_ask_a_question_question":"The Your Question field is required.","title":"The Title field is required."},“entry_id”:false,“url_title”:false,“channel_id”:false}

  • #6 / Sep 15, 2011 12:45am

    Dan Decker

    7338 posts

    neilbradley,

    I’m sorry! I should have made sure to have you remove the json=“yes”  parameter as well! But the interesting part is, the JSON contains the errors you are wanting displayed, so the culprit would seem to be in the javascript. Have you loaded this page with any kind of debugging utility like Firebug or Chrome Dev Tools?

    Cheers,

  • #7 / Sep 15, 2011 12:41pm

    doubleplusgood

    199 posts

    Also trying the example from this page:
    http://ellislab.com/expressionengine/user-guide/modules/safecracker/usage.html#first_steps

    But using my own fields. The dialog says “Failed with the following errors:” but no field names/validation shown. :S

  • #8 / Sep 15, 2011 1:07pm

    doubleplusgood

    199 posts

    Hmm, when I run safari console log I get the following:

    [jquery.form] state = complete jquery.form.js:904
    [jquery.form] isXml=false jquery.form.js:904
    contact-us:-1Resource interpreted as Document but transferred with MIME type application/json.

  • #9 / Sep 15, 2011 7:36pm

    doubleplusgood

    199 posts

    Gah. Don’t know why i’m getting so much trouble trying to get an ajax version to work when i’m following the documented example also. :S

  • #10 / Sep 17, 2011 12:36am

    Dan Decker

    7338 posts

    neilbradley,

    I should have asked this straight away, but are you including your own version of jQuery? If so, you will need to use the include_jquery=“no” parameter to avoid collisions. If you add that parameter as follows:

    {exp:safecracker channel="ask_a_question" include_jquery="no"}

    Does that clear up this issue for your?

    Cheers,

  • #11 / Dec 31, 2011 7:30am

    JonnyT

    36 posts

    Hi Dan, sorry for opening an old post but this is pretty much what I’m experiencing i.e. no error messages displaying when submitting a safecracker entry form with AJAX and JSON.

    I’ve following the steps above and I can’t find the problem. Basically, the form works perfect apart from not showing any errors, just comes back as “Failed with the following errors:”.

    There are no JS errors showing either so I’m thinking it’s possibly something to do with the code:

    ('Failed with the following errors: '+data.errors.join(', '));

    Any help would be greatly appreciated!

    Thanks

  • #12 / Jan 02, 2012 1:21pm

    Dan Decker

    7338 posts

    Hey Jonny,

    No worries! I need a little more context to get this moving forward, however. Can you supply your ExpressionEngine version and your SafeCracker template code? That will give us something to go in to get you to resolution.

    Thanks!

  • #13 / Jan 02, 2012 5:55pm

    JonnyT

    36 posts

    Hi Dan, cheers for the reply! I’m using EE 2.3.1 and the code I’ve used is direct from the docs which I’ve pasted below (I created a test template to get that working first!).

    <html>
            <head>
    [removed][removed]
    [removed][removed]
                    [removed]
                            $(document).ready(function(){
                                    $('#publishForm').ajaxForm({
                                            dataType: 'json',
                                            success: function(data) {
                                                    if (data.success) {
                                                            alert('You successfully added a new entry with entry_id '+data.entry_id)
                                                    } else {
                                                            alert('Failed with the following errors: '+data.errors.join(', '));
                                                    }
                                            }
                                    });
                            });
                    [removed]
            </head>
            <body>
                    {exp:safecracker channel="classifieds" return="safecracker/ENTRY_ID" entry_id="{segment_3}" json="yes" include_jquery="no"}
                            <label for="title">Title</label>
                            <input type="text" name="title" id="title" value="{title}" size="50" maxlength="100">
    
                            <label for="url_title">URL Title</label>
                            <input type="text" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50">
    
                            <label for="entry_date">Date</label>
                            <input type="text" name="entry_date" id="entry_date" value="{entry_date}" maxlength="23" size="25">
    
                            <input id="submitButton" type="submit" value="update" name="submitButton"/> 
                    {/exp:safecracker}
            </body>
    </html>
  • #14 / Jan 03, 2012 6:44pm

    Dan Decker

    7338 posts

    Hey Jonny,

    It looks like you need to add the id= parameter to your opening {exp:safecracker} tag like so:

    {exp:safecracker channel="classifieds" id="publishForm" return="safecracker/ENTRY_ID" entry_id="{segment_3}" json="yes" include_jquery="no"}

    This will identify your SafeCracker form to the ajax call and should get your errors displaying properly.

     

  • #15 / Jan 05, 2012 3:09pm

    JonnyT

    36 posts

    Hi Dan, sorry for the late reply!

    Tried that but still got no error messsages. As I was searching around I found a great post for ajax driven forms using freeform on the Solspace site that pretty much does the same thing and I’ve easily adapted to any expression engine form.

    http://www.solspace.com/forums/viewthread/666/

    I’m going to try the safecracker ajax with a fresh development and see if it’s something I’ve done along the way!

    Cheers again!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases