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.

I need help with SafeCracker Ajax Drive Entry Form

November 14, 2011 11:51am

Subscribe [4]
  • #1 / Nov 14, 2011 11:51am

    EnergyFreak

    102 posts

    Hi,

    I am using the ajax driven entry form for a safecracker upload. Therefore I have added this code as suggested.

    <html>
            <head>
                    {exp:jquery:script_tag}
    
                    <!--using the jQuery Form plugin <a href="http://jquery.malsup.com/form/--&gt">http://jquery.malsup.com/form/--&gt</a>;
                    [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="products" return="safecracker/ENTRY_ID" entry_id="{segment_2}" json="yes"}
                            <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 type="submit" name="submit" value="Submit">
                    {/exp:safecracker}
            </body>
    </html>

    I seperated the head content from the body content. Now when I submit the information. I get a blank page with this line:

    {"success":1,"errors":[],"field_errors":[],"entry_id":"48","url_title":"herhreh","channel_id":"8"}

    Shouldn’t the errors appear without refreshing the page?

  • #2 / Nov 15, 2011 2:58am

    John Henry Donovan

    12339 posts

    Hi EnergyFreak,

    You look like you are including your own copy of jQuery in the head so disable it in the SafeCracker tags

    {exp:safecracker channel="products" include_jquery="no" return="safecracker/ENTRY_ID" entry_id="{segment_2}" json="yes"}

    Are you getting any JS error when the form loads in Firebug or similar?

    Also can you tell us what version and build of EE are you using?
    And if you are using any other add-ons?

  • #3 / Nov 15, 2011 4:15pm

    EnergyFreak

    102 posts

    Hi John,

    I am using verison 2.2.2. of EE and the only other add-on that I can think of in this page is the “Tag” add-on from Solspace and they require for me to put this in my head:

    http://www.solspace.com/docs/detail/tag_safecracker_saef_usage/ (For the JS)

    {exp:tag:field_js} 
    {exp:tag:field_autocomplete_js} 
    {exp:tag:field_css}

    and the other javascript I used is the one required for Ajax Driven Entry:

    http://ellislab.com/expressionengine/user-guide/modules/safecracker/examples.html#id4 (For the JS)

    I disabled Jquery from SafeCracker and still no luck. As for errors, I seem to be getting three of them:

    <a href="http://www.mywebsite.com/js/jquery.form.jsFailed">http://www.mywebsite.com/js/jquery.form.jsFailed</a> to load resource: the server responded with a status of 404 (Not Found)
    
    upload:33Uncaught TypeError: Object [object Object] has no method 'ajaxForm'
    
    functions.js:58Uncaught TypeError: Object [object Object] has no method 'colorbox'
  • #4 / Nov 16, 2011 5:02am

    John Henry Donovan

    12339 posts

    Hi EnergyFreak,

    Did you download jquery.form.js from http://jquery.malsup.com/form/ and upload it into a directory called js in your root?

    That’s what the error specifically relates to. It can’t find that file

  • #5 / Nov 16, 2011 6:45am

    EnergyFreak

    102 posts

    EDIT

  • #6 / Nov 16, 2011 5:44pm

    EnergyFreak

    102 posts

    I think I solved it. I have some questions regarding the

    rules:my_field_name=

    I want to have one rule for each field. It says I can use the pipe delimiter, but I think that applies to mutltiple rules for ONE field. I want to write rules:my_field_name=“required” then seperate it with | and add a second field:

    ex:

    rules:my_field_name="required"|my_field_name="alpha_numeric"

    Can I do this? Or do I have to write all of them individually such as:

    rules:my_field_name="required" rules:my_field_name2="alpha_numeric"

    Another question, whenever I get an error, this ulgy pop up appears and says “Failed with the following errors” Nothing appears and I can’t seem to get the errors to display on m form, also I do not want it to pop up, I just want the fields with errors to show the error underneath the corresponding field in red.

    Now let’s say the post is successful, it just says it was successfully added… But then it does not redirect to anything, it just sits there with the previous form filled out.

    Thanks.

  • #7 / Nov 17, 2011 5:54am

    ahmad saad

    364 posts

    about the pip it’s how u said(to mutltiple rules for ONE field)and to write all of them individually.

    about Error Messages see:

    http://ellislab.com/expressionengine/user-guide/modules/safecracker/index.html#error-handling

    &&

    http://ellislab.com/expressionengine/user-guide/modules/safecracker/index.html#error-my-field-name

    add error_handling=“inline” to {exp:safecracker tag and put {error:my_field_name} whenever u wont in the form (underneath the corresponding field ) u can put it in any html tag and give it color red style.

  • #8 / Nov 17, 2011 10:44am

    EnergyFreak

    102 posts

    Hi Ahmad,

    The problem is not the inline error handling. It’s just that it is not working with Ajax. In order for inline error handling to work I must disable JSON and remove AJAX functionality. The problem of inline error handling is that the page must load in order for the errors to display, which I try to avoid.

  • #9 / Nov 21, 2011 7:33pm

    Kevin Smith

    4784 posts

    Hi EnergyFreak,

    The AJAX-driven SafeCracker example shows you how to achieve basic AJAX functionality with SafeCracker, but fully customizing it to your needs goes beyond the example documentation or what we’re able to provide here in support. You might have some luck with this question in the Community Help forum. Would you like me to move this thread over there so that community members can give you guidance?

    Is there anything else you still need help with?

  • #10 / Nov 21, 2011 7:38pm

    EnergyFreak

    102 posts

    Hi Kevin.

    Sure you can move the thread in “Community Help” if you think it can help.

    Thanks.

  • #11 / Nov 22, 2011 7:38pm

    Sean C. Smith

    3818 posts

    EnergyFreak,

    I’m going to move this to Community Help now. Please feel free to post again when you need assistance.

    Sean

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

ExpressionEngine News!

#eecms, #events, #releases