Loading Overlay Http Request

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 4, 2021 at 11:49 pm #10036643
    ugurcan
    Participant

    Hello Rodrigo !

    I added class on body tag which is loading overlay and its good. I want to make custom configure (bounce1,2,3..).

    For example, classic form page, After submitting the form, I want it to appear until the response from the server. How can i trigger it on .js file? (Not only form page when the send request to server)

    
  if (item.validationError) {
            this.setMessage({
                cssClass: "warning",
                message: item.validationError
            });
            return;
   } else {
             // i want to trigger loading overlay right here
          }
    March 5, 2021 at 12:36 am #10036652
    Support
    Keymaster

    Hello,

    Let me know if you want the loader (bounce 1,2,3) being show in the entire page (hiding all), or do you want only in the contact form container ?

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

    March 5, 2021 at 1:00 am #10036655
    ugurcan
    Participant

    If possible, I want to see both of them 🙂 because i can choose the best one

    March 5, 2021 at 11:36 pm #10036685
    Support
    Keymaster

    Hello,

    Great!

    1) The first method is using as base the basic form example at forms-validation.html. First add this HTML in the <body> of the page:

    <body data-loading-overlay>
		<div class="loading-overlay">
			<div class="bounce-loader">
				<div class="bounce1"></div>
				<div class="bounce2"></div>
				<div class="bounce3"></div>
			</div>
		</div>

    THen, change the basic validation at js/examples/examples.validation.js to:

    // basic
$("#form").validate({
	highlight: function( label ) {
		$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
	},
	success: function( label ) {
		$(label).closest('.form-group').removeClass('has-error');
		label.remove();
	},
	errorPlacement: function( error, element ) {
		var placement = element.closest('.input-group');
		if (!placement.get(0)) {
			placement = element;
		}
		if (error.text() !== '') {
			placement.after(error);
		}
	},
	submitHandler: function(form) {
		var $form = $(form),
                    $submitButton = $(this.submitButton);

		var $loadingOverlay = $('[data-loading-overlay]');
		$loadingOverlay.addClass('loading-overlay-showing');

		// Fields Data
		var formData = $form.serializeArray(),
			data = {};

		$(formData).each(function(index, obj){
			data[obj.name] = obj.value;
		});

                $submitButton.val( 'Loading...' ).attr('disabled', true);

		$.ajax({
			type: 'POST',
			url: $form.attr('action'),
			data: data
			success: function (response) {
				
				// Hide the overlay dots on success of message sent
				$loadingOverlay.removeClass('loading-overlay-showing');

                                $submitButton.val( 'Submit' ).attr('disabled', false);

			}
		});
	}
});

    2) The second way is show the overlay inside the form only. For it first change the HTML of form to (still using as example the basic form at forms-validation.html):

    <form id="form" method="post" action="forms-validation.html" class="form-horizontal">
	<div id="LoadingOverlayApi" class="card-body" data-loading-overlay data-loading-overlay-options='{ "startShowing": false }' style="min-height: 150px;">
		
		<section class="card">
			<header class="card-header">
				<div class="card-actions">
					<a href="#" class="card-action card-action-toggle" data-card-toggle></a>
					<a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
				</div>

				<h2 class="card-title">Basic Form Validation</h2>
				<p class="card-subtitle">
					Basic validation will display a label with the error after the form control.
				</p>
			</header>
			<div class="card-body">
				<div class="form-group row">
					<label class="col-sm-3 control-label text-sm-right pt-2">Full Name <span class="required">*</span></label>
					<div class="col-sm-9">
						<input type="text" name="fullname" class="form-control" placeholder="eg.: John Doe" required/>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 control-label text-sm-right pt-2">Email <span class="required">*</span></label>
					<div class="col-sm-9">
						<div class="input-group">
							<span class="input-group-prepend">
								<span class="input-group-text">
									<i class="fas fa-envelope"></i>
								</span>
							</span>
							<input type="email" name="email" class="form-control" placeholder="eg.: [email protected]" required/>
						</div>
					</div>
					<div class="col-sm-9">

					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 control-label text-sm-right pt-2">GitHub</label>
					<div class="col-sm-9">
						<input type="url" name="github" class="form-control" placeholder="eg.: https://github.com/johndoe" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-3 control-label text-sm-right pt-2">Skills <span class="required">*</span></label>
					<div class="col-sm-9">
						<textarea name="skills" rows="5" class="form-control" placeholder="Describe your skills" required></textarea>
					</div>
				</div>
			</div>
			<footer class="card-footer">
				<div class="row justify-content-end">
					<div class="col-sm-9">
						<button class="btn btn-primary">Submit</button>
						<button type="reset" class="btn btn-default">Reset</button>
					</div>
				</div>
			</footer>
		</section>

	</div>
</form>

    Then, change the basic validation code at js/examples/examples.validation.js to:

    // basic
$("#form").validate({
	highlight: function( label ) {
		$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
	},
	success: function( label ) {
		$(label).closest('.form-group').removeClass('has-error');
		label.remove();
	},
	errorPlacement: function( error, element ) {
		var placement = element.closest('.input-group');
		if (!placement.get(0)) {
			placement = element;
		}
		if (error.text() !== '') {
			placement.after(error);
		}
	},
	submitHandler: function(form) {
		var $form = $(form),
                    $submitButton = $(this.submitButton),
		    $el = $('#LoadingOverlayApi');

		$el.trigger('loading-overlay:show');

		// Fields Data
		var formData = $form.serializeArray(),
			data = {};

		$(formData).each(function(index, obj){
			data[obj.name] = obj.value;
		});

                $submitButton.val( 'Loading...' ).attr('disabled', true);

		$.ajax({
			type: 'POST',
			url: $form.attr('action'),
			data: data
			success: function (response) {
				
				// Hide the overlay dots on success of message sent
				$el.trigger('loading-overlay:hide');

                                $submitButton.val( 'Submit' ).attr('disabled', false);

			}
		});
	}
});

    We hope this helps!

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

This topic is marked as "RESOLVED" and can not rceive new replies.