Jquery ajax加载图像/微调器

Question

我正在研究一个代码来创建一个微调器，当一个选择事件在一个下拉下拉列表中被扯下来，自动填充它下面的下拉列表时，我已经在网上搜索了不同的方法来解决这个问题，但似乎无法找到解决方案，我认为它是我构建脚本的方式。我的脚本中有多个代码来运行不同类型的函数。这是我的第一个下拉列表下面的代码触发其余的下拉列表是1，我已经将最后3个绑定到它。我已经从ajax.info获得了我的微调器。我只是想知道如何使用ajax.start / hide或show methods来实现它。

phtml代码

<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>

先谢谢

Answer 1

看一下这个插件，它可能是你想要实现的https://code.google.com/p/jquery-loadmask/