Jquery ajax loading image/spinner

Question

Im working on a code to create a spinner when a select event is trggered in a drop dropdown, to autofill the dropdowns below it, I have searched different methods on the net on this problem but can't seem to come to a solution, I thinks its the way I structured my Script. I have multiple codes in my script to run different kinds of functions. Here is my code below first dropdown which triggers the rest of the dropdowns is 1 and I have binded the last 3 to it. already have my spinner from ajax.info. I just want to know how I can implement it, using the ajax.start/hide or show methods.

phtml code

<script type="text/javascript">

    $( document ).ready(function() {
                $( "#search" ).autocomplete({
                          source: function(request, response)
                          {
                            $.ajax({url: '<?php echo $this->baseURL()?>/../../../../' + request.term,
                                dataType: 'json',
                                success: function(data)
                                {
                                    response(data);
                                }
                                    })
                          },
                                select: function(event, ui) 
                                {
                                    .
                                    ajaxautofill(ui.item.id);

                                }
                          ,
                          minLength:2});

                $("#1").bind('change', function () {


                        ajax2();
                        ajax3();
                        ajax4();
                });


                $('#add').click(function(){
                  $.ajax({
                       url:'<?php echo $this->baseURL()?>/../..',
                       type:'post',
                       dataType: "json",
                       data:{   '1':$('#1').val(),
                                '4':$('#4').val(),
                                '2':$('#2').val(),
                                '3':$('#3').val()},       
                       success:function(data){
                         var row = '<tr><td>' + data["1"] + '</td><td>' 
                         + data["4"] + '</td><td>' 
                         + data["2"] + '</td><td>' 
                         + data["siccode"] + '</td>';
                         $('#t2').append(row);
                        //alert();  
                      }               
                  });
                });
        });

    /*************************************1 Change*************************************************/                      

    function ajax4() {

    $.ajax({
    type: "POST",
    url: '<?php echo $this->baseURL()?>/../../.../1/' + encodeURIComponent($('#1').val()),
    success: function(newElement) {
    // Insert new element before the Add button
        $("#4-label").remove();
        $("#4").parent().remove();
        $("#2-label").before(newElement);

        //$("#1").after(newElement);    
    }
    });
    }

    function ajax2() {
    $.ajax({
    type: "POST",
    url: '<?php echo $this->baseURL()?>/../../2/1/' + encodeURIComponent($('#1').val()),
    success: function(newElement) {
    // Insert new element before the Add button
        $("#2-label").remove();
        $("#2").parent().remove();
        $("#3-label").before(newElement);
        //$("#1").after(newElement);    
    }
    });
    }

        function ajax3() {
    $.ajax({
    type: "POST",
    url: '<?php echo $this->baseURL()?>/../../../1/' + encodeURIComponent($('#1').val()),
    success: function(newElement) {
    // Insert new element before the Add button
        $("#3-label").remove();
        $("#3").parent().remove();
        $("#2-label").after(newElement);
        //$("#1").after(newElement);    
    }
    });
    }

    /********************************************Autocomplete Search Select ****************************************/

    function ajaxautofill(id) { 
            $.ajax({
            type: 'POST',
            datatype: 'JSON',
            url: '<?php echo $this->baseURL()?>/../../../../' + id,

        select: function(event, ui){
            //$("#1-label").remove();
            //$("#1").remove();
                        //data: '1':$('#1').val(),
                        //dataType: 'JSON',
                        //async: true,
                     //   + encodeURIComponent($('#1').val()),
    /*success: function(id) {
    // Insert new element before the Add button
        //$("#1").remove();
        $("#1-label").remove();
        //$("#1-label").before();
        //$("#search-label").after(newElement); 
    }*/ }
            });

      }

</script>

Thanks in Advance

Answer 1

看看这个插件，可能是您尝试实现的插件https://code.google.com/p/jquery-loadmask/