By orgnsm on

Hello, I'm loading the user registration form into a container and then attaching a submit event that should post the form data but the only response I get is an empty registration form...

    $("#add-user").click(function(){
        $( "#container" ).load( $(this).attr("href")+" #user-register-form" );
        return false;
    });

    $( "#container #user-register-form" ).live("submit",function(){
        var values = $(this).serialize();
        var target = "http://"+document.domain+$(this).attr("action");
        $.ajax({
            type: "POST",
            url: target,
            data: values,
            success: function(re){
                $("#container").html( $(re).find(".messages") );
                $("#container").append( $(re).find("#user-register-form") );
            }
        });
        return false;
    });

Note that I use this exact methodology to create/edit/delete nodes of various content types with no problems. Any ideas about this are greatly appreciated.

⋅ Categories: Drupal 7.x

Comments

orgnsm’s picture

orgnsm commented

If I use a more Drupal-oriented approach, I have the same problem. Here is my HOOK_form_alter:

    if( $form_id == "user_register_form" ){

        $form["actions"]["submit"] = array(
            '#type' => 'submit',
            '#ajax' => array(
                'wrapper' => 'user-register-form',
                'effect' => 'fade',
                'callback' => 'HOOK_test',
                'method' => 'replace',
            ),
            '#value' => t("Add User"),
            '#id' => 'user_register_form'
        );

}

and my AJAX callback:

function HOOK_test( $form=null, $form_state=null ){

    $form = drupal_get_form('user_register_form');

    $settings = FALSE;
    $javascript = drupal_add_js(NULL, NULL);
    if(isset($javascript['settings'], $javascript['settings']['data'])){
        $settings = '<script type="text/javascript">jQuery.extend(Drupal.settings, ';
        $settings .= drupal_json_encode(call_user_func_array('array_merge_recursive', $javascript['settings']['data']));
        $settings .=  ');</script>';
    }

    return(drupal_render($form).$settings);
}

This works fine until I load the form into a page with this javascript:

    $("#add-user").click(function(){
        $( "#user-actions" ).load( $(this).attr("href")+" #user-register-form", function(){
            Drupal.attachBehaviors($("#user-actions"));
        } );
        return false;
    });

At this point the AJAX submit function is lost and I have no idea why.

jaypan’s picture

jaypan
Location Victoria, BC
commented

You almost have everything correct. The problem is that you are generating your $settings, and then calling render() on the form, which then generates all the settings related to that form. But since you've already generated your $settings, these new settings are not included.

Call render() before generating your settings.

Contact me to contract me for D7 -> D10/11 migrations.

orgnsm’s picture

orgnsm commented

works now! I got the $settings properly added to the rendered form. then had to edit my javascript some to make sure JQuery was executing the $settings...

    $("#add-user").click(function(){
        $("#user-actions").html( "<div class=\"loading\"><span>Loading ...</span></div>" );
        $.ajax({
            type: "GET",
            url: "/reg",
            success: function(re){
                re = $.parseHTML(re, document, true);
                var re = $(re).find("#content");
                if( re.length > 0 ) $("#user-actions").html( re.html() );
                Drupal.attachBehaviors();
            }
        });
        return false;
    });

additionally, a couple of libraries were needed:

    drupal_add_library('system', 'drupal.ajax');
    drupal_add_library('system', 'jquery.form');

thanks so much Jay, you set me on the right track and seem to have helped many people with AJAX in Drupal. cheers

orgnsm’s picture

orgnsm commented
now that this works, do you have any idea why my #states definitions won't fire in the loaded form? they are successfully working on the form outside of the page and are showing up in my $settings when the form is loaded into the page
jaypan’s picture

jaypan
Location Victoria, BC
commented

That's really a different question, and I don't use #states much myself (I prefer to write my own), so I'd suggest starting a new thread on the matter.

Contact me to contract me for D7 -> D10/11 migrations.