Show loading gif while ajax call

vincekaribusana · May 21, 2017, 7:07pm

Hi, i need to show a loading gif while ajax is processing the call, this is my code

$(document).ready(function() {

    $('#SubmitButton').click(function(e) {

        $('#se-pre-con').show();

        var userfirst = $('#userfirst').val();
        var userlast = $('#userlast').val();
        var useremail = $('#userlast').val();
        var usertel = $('#userlast').val();
        var ticketsubject = $('#ticketsubject').val();
        var ticketpriority = $('#ticketpriority').val();
        var ticketbody = $('#ticketbody').val();

        e.preventDefault();

            $.ajax({

                url: "controllers/ctrl_client_new_ticket.php",
                method: "POST",


                data: {
                    
                    userfirst: userfirst,
                    userlast: userlast,
                    usermail: useremail,
                    usertel: usertel, 
                    ticketsubject: ticketsubject,
                    ticketpriority: ticketpriority, 
                    messagebody: ticketbody


                },


                success: function() {

                            $('#se-pre-con').hide();
                
                            swal({
                                title: "Evento eliminato!", 
                                text: "L'evento è stato eliminato con successo.", 
                                type: "success"

                            },
                                
                                function(){ 

                                    location.reload();
                                
                                }

                            );

                }



            });

    });


});

I’ve added

into the html code

Can’t see any errors in the console, can anybody help me please?

James_Hibbard · May 22, 2017, 5:42pm

Hey, code looks ok at a glance. What’s happening / not happening?

vincekaribusana · May 22, 2017, 7:51pm

Hi @James_Hibbard thanks for your reply, i’ve managed to show the loading icon. I didn’t set up css properly. I also managed to ad validation using jquery validation plugin. I haven’t still added error handling at the moment.

Now the only problem i’ve got is how to validate tinymce editor and i’m wondering if you could help me, this is the entire script


$('#ticketpriority').on('change', function () {
    $(this).valid();
});




$(document).ready(function() {



    $("#formnewticket").validate({
                
        errorElement: 'span', 
        errorClass: 'help-block help-block-error', 
        focusInvalid: false, 
        ignore: "",

       
            rules: {

                userfirst: {
                    
                    required: true

                },

                userlast: {

                    required: true
                        
                },

                usermail: {

                    required: true,
                    email: true

                },

                usertel: {

                    required: true,
                    number: true 

                },

                ticketsubject: {
                        
                    required: true

                },

                ticketpriority: {
                        
                    required: true

                },

                messagebody:{
                        
                    required: true

                }

            },
              
            messages: {
                    
                userfirst: "Ops, il campo nome è obbligatorio!",
                userlast: "Ops, il campo cognome è obbligatorio!",
                ticketsubject: "Ops, il campo oggetto è obbligatorio!",

                usermail: {

                    required: "Ops, il campo email è obbligatorio!",
                    email: "Ops, il formato email non è corretto!"

                },

                usertel: {

                    required: "Ops, il campo telefono è obbligatorio!",
                    number: "Ops, il formato telefono non è corretto!"

                },

                ticketpriority: "Ops, il campo priorità è obbligatorio!",
                messagebody: "Ops, non hai specificato il messaggio della segnalazione"   
                
            },
                
            highlight: function (element) { 

                $(element)
                .closest('.form-group').addClass('has-error'); 
                
            },

            success: function(label) {
                        label.closest('.form-group').removeClass('has-error');
                        label.remove();
                    },

            submitHandler: function(form) {

        
                $.ajax({

                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
     
                    beforeSend: function () {
                            
                        $(".loader").show();

                    },
                       
                    success: function() {

                        $(".loader").hide();

                        swal({
                            title: "Segnalazioe Inviata!", 
                            text: "Abbiamo ricevuto la tua segnalazione e ti risponderemo al più presto.", 
                            type: "success"

                        },
                            
                            function(){ 

                                location.reload();
                            
                            }

                        );

                    }  

                });



            }

    });


});


$(function() {   

          
    tinyMCE.init({

        language: 'it',

        selector: 'textarea', 
        plugins: [
            'advlist autolink lists link image charmap preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'paste textcolor colorpicker textpattern toc jbimages'
        ],
            
        toolbar: "styleselect | insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages | forecolor backcolor",
        
        height: 300,
        theme: 'modern',
        skin: "lightgray",
        
        image_advtab: true,
        menubar: false, 

                
    }); 

});

James_Hibbard · May 22, 2017, 8:29pm

Hi, not sure what you mean by this …

vincekaribusana · May 22, 2017, 9:15pm

Hi, i’ve got a text area where i use tinymce editor and i need to validate that field and the following code to remove the validation message doesn’t work for that field

success: function(label) {
                        label.closest('.form-group').removeClass('has-error');
                        label.remove();
                    },

James_Hibbard · May 23, 2017, 5:53am

TinyMCE creates its own iframe and sits in that, so that’s probably why the selector isn’t working. Could you make a bare bones example and stick it up on JSFiddle or CodePen and I’ll take a look.

vincekaribusana · May 23, 2017, 8:40pm

Hi @James_Hibbard many thanks for helping me, I’ve created a code example on codepen and you can find it in here:

https://codepen.io/karibusana/pen/qmgaNV

James_Hibbard · May 24, 2017, 8:39am

Ok, that’s helpful. Can the message in the editor be ignored?

Failed to load plugin: jbimages from url https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.2/plugins/jbimages/plugin.min.js

And could you explain what the problem is. What you are expecting to happen and what is actually happening?

vincekaribusana · May 24, 2017, 9:08am

Himì, yes the message can be ignored because it is a tinymce plugin i’m using to upload file son the server and i couldn’t include into the fiddle. I’ve attached a screen shot to better explain what i’m trying to achieve. If you try the other field it does remove the notice message next to the field as soon as you type some text

James_Hibbard · May 24, 2017, 10:23am

Got it.

I’m not overly familiar with either plugin, but one thing that would work is to hook into TinyMCE’s keyup callback, set the contents of the TinyMCE editor to the contents of the textarea, then call validate on that.

tinyMCE.init({
  selector: "textarea",
  setup : function(ed) {
    ed.on('keyup', function(e) {
      $("#ticketbody").val(ed.getContent());
      $("#ticketbody").valid();
    });
  }
});

Here’s a complete demo for you to run:

<!DOCTYPE HTML>
<html>
  <head>
    <meta chraset="utf-8">
    <title>TinyMCE + jQuery Validator plugin</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .form-body{
        width: 800px;
        margin: 25px;
      }
    </style>
  </head>
  <body>
    <form class="horizontal-form" id="formnewticket" action="controllers/ctrl_client_new_ticket.php" method="post">
      <div class="form-body">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">Nome*</label>
              <input type="text" class="form-control" id="userfirst" placeholder="Il tuo nome" name="userfirst">
            </div>
          </div>
        </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label">Corpo del messaggio*</label>
            <textarea rows="6" id="ticketbody" name="messagebody" placeholder="Scrivi corpo articolo..." class="form-control input-md"></textarea>
          </div>
        </div>
      </div>

      <button type="submit">Apri Ticket</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.2/tinymce.min.js"></script>
    <script>
      $(document).ready(function() {
        tinyMCE.init({
          selector: "textarea",
          setup : function(ed) {
            ed.on('keyup', function(e) {
              $("#ticketbody").val(ed.getContent());
              $("#ticketbody").valid();
            });
          }
        });

        $("#formnewticket").validate({
          errorElement: "span",
          errorClass: "help-block help-block-error",
          focusInvalid: false,
          ignore: "",

          rules: {
            userfirst: {
              required: true
            },

            messagebody: {
              required: true
            }
          },

          messages: {
            userfirst: "Ops, il campo nome è obbligatorio!",
            messagebody: "Ops, non hai specificato il messaggio della segnalazione"
          },

          highlight: function(element) {
            $(element).closest(".form-group").addClass("has-error");
          },

          success: function(label) {
            label.closest(".form-group").removeClass("has-error");
            label.remove();
          },
        });
      });
    </script>
  </body>
</html>

vincekaribusana · May 24, 2017, 11:11am

Hi @James_Hibbard you are a star, it works really many many thanks for your help, you made my day

system · August 23, 2017, 6:14pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Help please - Page Loading Gif - onclick JavaScript	15	28578	October 8, 2014
jQuery Load question JavaScript	3	708	April 19, 2011
Why does my loading GIF non spinning while jQuery ajax call is running? JavaScript jquery	3	3202	August 25, 2019
Use same <li> for load and succes? JavaScript	1	504	March 30, 2011
IE9 and Chrome not showing loading div during AJAX call JavaScript	7	10524	October 8, 2014

Show loading gif while ajax call

Related topics