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.

Uncaught Type Error with AJAX-driven Entry Form example code

August 01, 2011 5:12pm

Subscribe [5]
  • #1 / Aug 01, 2011 5:12pm

    Brooks Seymore

    106 posts

    I’m running into an Uncaught Type Error when attempting to run the AJAX-driven Entry Form code from the ExpressionEngine docs.

    http://ellislab.com/expressionengine/user-guide/modules/safecracker/usage.html

    Uncaught TypeError: Object [object Object] has no method 'ajaxForm'

    Using the inspector Firefox, the error is expanded upon somewhat to:

    Error: $("#publishForm").ajaxForm is not a function
    Line: 14

    This is the code of my template, as you’ll see it’s almost identical to what is seen in the documentation:

    <html>
    <head>
      [script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"][/script]
      [script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"][/script]
      [script src="{site_url}assets/v3/js/jquery.form.js" type="text/javascript"][/script]
    
    [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="contributors_active" return="safecracker/ENTRY_ID/" json="yes"}
            <label for="title">Title</label>
            <input type="text" name="title" id="title" size="50">
    
            <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>

    This is with ExpressionEngine 2.2.1 (Build 20110705).

  • #2 / Aug 02, 2011 11:16am

    I am having this same issue.I include the malsup plugin just like you and can successfully view the file, and still et the same error.

    I was thinking the issue would be resolved if I added include_jquery=“no” to the SafeCracker tag. I am thinking the main jQuery object is getting overwritten. Since the plugin extends the jQuery object, it get’s overwritten the resulting error would be “function is not defined”. However, I applied this parameter and still doesn’t fix the problem. But all the same symptoms of the problem are still there.

    If you use the $(document).ready() function (like I do), then anything inside it would still work because it waits for the DOM to completely load before it’s called, so those functions would extend the new jQuery object.

    This is just a theory, but I am pretty decent at debugging and this is definitely a good start. I will update this thread if I find a fix.

    I should note, the site I am working with is EE v2.1.5. I have not yet to upgrade it to v2.2.

  • #3 / Aug 02, 2011 11:31am

    This is definitely the problem. I found this post:

    http://stackoverflow.com/questions/6475345/expressionengine-safecracker-loading-unwanted-widgets

    If I comment out the $ui array around line 837 that defines all the UI widgets and refresh the page, then I see some PHP notifications and errors otherwise everything is fine. If I ignore the errors and submit the form, everything works. No more “undefined function” error and I get a successful response.

    Now, the real question is how to work around this bug. This is a pretty big issue that I hopefully don’t have hack to fix.

  • #4 / Aug 02, 2011 11:35am

    Rob Sanchez

    335 posts

    By default, SafeCracker adds jQuery to your page. So what’s happening here is the jQuery (and plugins) you loaded in your <head> are getting overwritten by the jQuery that SC loads. Add include_jquery=“no” to your SC form and I think you’ll be in the clear.

  • #5 / Aug 02, 2011 11:40am

    Ok, super strange stuff here.

    At first when I did that it resulted in the same errors. But when I commented out some lines of code refreshed it return successfully.

    I then reverted the changed file (safecracker_lib.php) back to the original code and refreshed, it still worked again (I was expecting the error to return). After an hour of tweaking, what once didn’t worked now does without changing any code. Lol, how does that happen?

  • #6 / Aug 02, 2011 11:46am

    I can inspect my code, and the included jQuery script tags are no longer there.

    Edit: It’s still there but doesn’t seem to cause conflict.

    I am thinking the browser caches stuff, because adding include_jquery=“no” didn’t do anything at all until I modified some code, got some PHP errors, undid my changes, refreshed, and now the included JS is no longer there. I am using FireFox 5 on a Mac.

  • #7 / Aug 02, 2011 12:10pm

    Sue Crocker

    26054 posts

    Thanks for the assist, Rob.

    So SaucePan Creative - is everything OK for you now? Brooks Seymore, what about you?

  • #8 / Aug 02, 2011 12:13pm

    No issues at the moment. Thanks for the insight Rob.

  • #9 / Aug 02, 2011 1:40pm

    Brooks Seymore

    106 posts

    It seems to be working fine now. I tried the include_jquery=“no” tack yesterday without success. After seeing SaucePan Creatives posts, I made a couple meaningless tweaks to my code (specifically, adding and removing a quote from Toy Story) and the errors went away.

    I’ll be working more on this part of my project later today, Sue, and will revisit this thread to let you know what I find.

    Thanks Rob and SaucePan Creative!

  • #10 / Aug 02, 2011 5:59pm

    Sue Crocker

    26054 posts

    Sounds good, We’ll be here.

  • #11 / Aug 03, 2011 2:23pm

    Brooks Seymore

    106 posts

    The Uncaught Type error is definitely gone (yay!) but when I try to submit the form, I’m getting the following error:

    Error: Form elements must not have name or id of "submit"

    This happens regardless of whether my form is contained within a fully-styled template, or when it’s just plain HTML.

    I was able to get this to work changing the name parameter from “Submit” to “submit-form”.

    <input type="submit" name="submit-form" value="Submit" />

    Still working on another issue with this form, I’ll report back later.

  • #12 / Aug 03, 2011 2:48pm

    Rob Sanchez

    335 posts

    That’s a “known” issue with the jQuery Form plugin, you can’t have an input named submit.

  • #13 / Aug 03, 2011 6:31pm

    Brooks Seymore

    106 posts

    My form has progressed far enough that this thread can be closed.

    Hopefully, at some point, the example in the documentation will be upgraded to mention address include_jquery=“no” issue SaucePan Creative and I encountered, as well as the “known” issue being unable to have an input named submit. Until then, however, hopefully this thread will save future generations some time.

    Thanks to everyone for chiming in on this issue, our site is better for it.

  • #14 / Aug 03, 2011 6:44pm

    The <input name=“submit”> is not a bug of the jQuery plugin. It’s more or less just how the browser handles it. You could duplicate the error with any AJAX/JS plugin. It won’t work using name=“submit” when you are also trying to hook onto the submit event. The same thing would occur if you used a jQuery form validation plugin and trying to validation on submit. This is something I have encountered for years.

    I use <button type=“submit”>Button Text</button> for a submit button so a name parameter is not required. The reason for the strange behavior, is “submit” is actually reserved in JS because there is an event handler called .submit(). The issue is not consistent across browsers.

    Just an FYI…

  • #15 / Aug 03, 2011 7:18pm

    Brooks Seymore

    106 posts

    I think you’re just tossing that out, SaucePan Creative, as a general contribution to the knowledge pool.

    If there is a method, like the one you use, which is more consistant across browsers, I’m thinking the example in the documentation should reflect that so devs can get a quick idea of what works and then build upon that..

    B.

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

ExpressionEngine News!

#eecms, #events, #releases