This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

  1. Forum
  2. FormTools Support
  3. Ajax loading indicator not showing on when Ajax request triggered
Blackpig Creative
Blackpig Creative

I'm using the Octomail plug-in to handle some contact forms on a site.

The site is using Foundation rather Bootstrap so the forms are set-up with custom HTML. I also don't use the default error handling for form validation as this just throws up an alert box with the relevant error message. Thus, instead of using the data-attributes on the form, I am using the Javascript API as per the docs so that I can override the default behaviour (http://octobercms.com/docs/cms/ajax#javascript-api).

Everything works fine apart from the fact that Ajax loader (the bar the loads across the page) is not triggered when using the Javascript API. It works fine using the data-attributes.

Relevant code snippets below: The form:

 <form role="form" onsubmit="$(this).request('{{ __SELF__ }}::onOctoMailSent',
                    {success: function(){
                        showSuccess()
                        },
                     error: function(jqXHR) {
                        showErrors(jqXHR.responseJSON)
                        }
                     }); return false;
                ">
    <!-- field definitions -->
    </form>

and the JS functions called by the form:

function showErrors(errs) {

$.each(errs.X_OCTOBER_ERROR_FIELDS,function(idx, val){

    $('#' + idx).addClass('error').next('small.error').text(val).css('display','block');
})

$('.alert-box.warning').show();
}

function showSuccess() {
$('.alert-box.success').show();

setTimeout(function(){
    $('.alert-box.success').close();
}, 5000);

$('#name').val('');
$('#email').val('');
$('#phone').val('');
$('#subject').val('');
$('#body').val('');

}

Has anybody experienced similar when using the Javascript API to trigger events or does anyone know what I can call to trigger the ajax loader manually?

Last updated

Shahiem
Shahiem

I got the same problem

Blackpig Creative
Blackpig Creative

Ok, digging around modules/system/assets/js/framework.extras.js it tells us what to call for the JS API calls.

My form has been amended like so and it works great:

<form role="form" onsubmit="$.oc.stripeLoadIndicator.show(); $(this).request('{{ __SELF__ }}::onOctoMailSent',
                {success: function(){
                    showSuccess()
                    },
                 error: function(jqXHR) {
                    showErrors(jqXHR.responseJSON)
                    },
       complete: function(){
        $.oc.stripeLoadIndicator.hide()
         }
                 }); return false;
            ">
<!-- field definitions -->
</form>
Vijay Wilson
Vijay Wilson

Ive tried this, which is based on jQuery ajax beforeSend method and it works good.

<body>
<div class="loading-indicator-container" id="loader">
    <div class="loading-indicator indicator-center">
        <span></span>
    </div>
</div>  
 </body>  

<script type="text/javascript">
$(document).on('submit','#form',function()
{
    $.request('onHandlerName',
    {
        beforeSend:function()
        {
             $('#loader').show();
        },
        success:function(data)
        {
            // do what is necessary 
        }
    });
});

</script>

Last updated

hardik_satasiya
hardik_satasiya

According to ajax api you need to pass css selector or jquery object to loading option it will fire show and hide method on them during ajax loading so final api can be.

make sure before using $.oc.stripeLoadIndicator you need to add framework-extras (https://octobercms.com/docs/ajax/extras)

<form role="form" onsubmit="$(this).request('{{ __SELF__ }}::onOctoMailSent',
                    {
                        loading: $.oc.stripeLoadIndicator,
                        success: function(){
                            showSuccess()
                        },
                        error: function(jqXHR) {
                            showErrors(jqXHR.responseJSON)
                        }
                     }); return false;
                ">
<!-- field definitions -->
</form>

Last updated

1-5 of 5

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.