[Resolved] Split: hook into the cred form success event

[Author]

Posts

[Nicholas]

No, it was a ticket I created some time ago but I cannot find it in my created threads anymore. It was about scrolling to the top of the page when the form was submitted with ajax but had an error (you were stuck at the bottom of the page and couldn't see the error message)
Minish was able to show me how this is done without any hesitation.

And why create a new ticket? I just want to hook into the cred form success event so I can adjust the page height?

Your solution is okay but I need to do more.

Please be so kind so I can kill two birds with one stone 😉

Thank you.

[Luo Yang]

Hello,

There is't such a built-in feature with Toolset forms:

The CRED PHP API is limited to backend events, and we don't currently provide any JavaScript API that publicly exposes front-end events. This is something lots of people have asked for, but our developers have not yet implemented. Any custom implementation developed for this purpose, e.g. listening to all AJAX events and responding accordingly for CRED events, would require custom code, which is outside the scope of the support we provide here in the forum. Sorry I don't have a good answer for you there.

And I have checked it with Minesh, he don't know the hook too.

But there does exists an Javascript event "ajaxSuccess", which is triggered when AJAX form is loaded or submitted successfully, for example:

jQuery( document ).on( "ajaxSuccess", function() {
  alert(1234);
});

[Nicholas]

Thank you Luo.

I also found Mineshs solution again:

  jQuery('#cred_form_98_1, #cred_form_216_1').bind('invalid-form.validate', function() {

  });

on( 'ajaxSuccess', function() { is not very good because it fires also when the ajax form is loaded

[Luo Yang]

The JS event "invalid-form.validate" means fire after the form input is not valid, I don't think it can work for your case too.

[Nicholas]

Yes, that's correct. I also wanted to ask you if there's something similar for successful submissions besides jQuery( document ).on( "ajaxSuccess", function() {
alert(1234);
});

which will fire for me when the form is loaded on the page

[Luo Yang]

No, there isn't something similar for successful submissions besides "ajaxSuccess", but you can try these:
1) Edit your Toolset form, add a hidden input:

<input type="hidden" value="1" name="form_status">

2) Modify the JS codes as below:

jQuery( document ).on( "ajaxSuccess", function() {
	var form_status = jQuery('input[name="form_status"]').val();
  	if(form_status == 1){
 //form is loaded first time
    	jQuery('input[name="form_status"]').val(0);
        return;
    }
    else{
// the form is submitted
    	alert(12345);
    }
});

and test again

[Nicholas]

Thank you Luo.

What about all these hooks I found in one of CREDs js files?

success: function (response) {
                    if (response) {
                        $form.replaceWith(response.output);
 
                        if ('ok' === response.result) {
                            alert(credSettings.operation_ok);
 
                            /**
                             * cred_form_ajax_error
                             * Event that is triggered once cred form ajax call is in success state
                             *
                             * @since 1.9.3
                             */
                            Toolset.hooks.doAction('cred_form_ajax_success', formID);
                        } else {
                            /**
                             * cred_form_ajax_error
                             * Event that is triggered once cred form ajax call is in error state
                             *
                             * @since 1.9.3
                             */
                            Toolset.hooks.doAction('cred_form_ajax_error', formID);
                        }
                    }
                },

Can I use 'cred_form_ajax_success and cred_form_ajax_error and if yes how?

[Luo Yang]

Thanks for the details, I can find those JS codes in Toolset plugin file \cred-frontend-editor\public\js\frontend.js, line 176~199, since there isn't document for them, I have escalated this thread to our 2nd tier supporters, will update this thread if there is anything news.

[Nicholas]

Thank you Luo.

[Luo Yang]

Thanks for the patience, it is escalatedto our 2nd tier supporters, will update this thread if there is anything news.

[Luo Yang]

Here is the feedback from our developers:

Those are not native javascript events, but hooks fired using one custom Toolset internal library. This means that although it might be possible to use them, it might be risky since using them demands that you make sure that our custom library is loaded, or you will get a nice console full of errors.

If the client needs specific native events fired when a form using AJAX reaches a given moment in its flow, we might be better by requesting them as a new feature, and then documenting them.

So if you agree, we can take it as a feature request.

[Nicholas]

Thank you, Luo. That would be great.
Do you also know how this code you provided can work when the ajax form fails?

jQuery( document ).on( "ajaxSuccess", function() {
    var form_status = jQuery('input[name="form_status"]').val();
    if(form_status == 1){
 //form is loaded first time
        jQuery('input[name="form_status"]').val(0);
        return;
    }
    else{
// the form is submitted
        alert(12345);
    }
});

[Nicholas]

I was able to figure it out.

I used this code for those of you who are interested:

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);
    observer.observe(target, config);

}

onElementInserted('body', '#lbl_generic', function(element) {
    console.log('error');
    var TopPosition = jQuery('.page-campaign-form, .page-campaign-form-edit').offset().top;
    jQuery('html, body').animate({scrollTop:TopPosition}, 'slow');

}