Ajax加載器和鏈接選擇框

我正在使用動態選擇框，我使用JS/Jquery來更新每個選擇框的值。由於我從MySQL表中提取值，有時需要花費一點時間才能將選擇框加載其值。我搜索的一個解決方案是使用ajax加載器。Ajax加載器和鏈接選擇框

如何放置一個ajax加載器（就在updateSelectBox.js中的jQuery.getJSON之前），以便在第一個選項卡上加載並在成功處理後（在同一文件中）刪除它時，無法單擊任何內容？或者更好的解決方案？下面是一個EXAMPLE

updateSelectBox.js

var formObject = { 
    run : function(obj) { 

      obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>'); 
      var id = obj.attr('id'); 
      var v = obj.val(); 
      jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) { 
      $('.update').removeClass('last'); 
       if (!data.error) { 
        obj.next('.update').html(data.list).removeAttr('disabled hidden'); 
       } else { 
       obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>'); 
       } 
      }); 
     } 
}; 

$(function(){ 

    $('.update').live('change', function() { 
     var str = ""; 
      $("select option:selected").each(function() { 
       str += $(this).text() + " "; 
       }); 
      $("#postSelected").text(str); 

     formObject.run($(this)); 
    }); 

});

HTML

<select name="gender" id="gender" class="update" size="7"> 
    <option value="">Select one</option> 
    <?php if (!empty($list)) { ?> 
    <?php foreach($list as $row) { ?> 
     <option value="<?php echo $row['id']; ?>"> 
     <?php echo $row['category_name']; ?> 
     </option> 
    <?php } ?> 
    <?php } ?> 
</select> 

<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7"> 
    <option value="">----</option> 
</select> 

<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7"> 
    <option value="">----</option> 
</select>

來源

2012-07-27 CodingWonders90

首先，您應該創建一個ajax加載程序映像（例如here）並將其保存在您的服務器上。應顯示的的getJSON的ajaxloader覆蓋之前（自定義圖像源！）：

$('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>'); 
$('#tabs .overlay').css("line-height", $('#tabs').height()+'px');

，並在成功處理程序結束其刪除：

$('#tabs .overlay').remove();

你formObject應現在：

var formObject = { 
    run : function(obj) { 
     obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>'); 
     var id = obj.attr('id'); 
     var v = obj.val(); 
     $('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>'); 
     $('#tabs .overlay').css("line-height", $('#tabs').height()+'px'); 
     jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) { 
     $('.update').removeClass('last'); 
      if (!data.error) { 
       obj.next('.update').html(data.list).removeAttr('disabled hidden'); 
      } else { 
      obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>'); 
      } 
      $('#tabs .overlay').remove(); 
     }); 
    } 
};

下面的附加樣式表是必要的以查看覆蓋：

#tabs { 
    position: relative; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2000; 
    background-color: #EEEEEE; 
    opacity: 0.5; 
} 

.overlay > div { 
    position: relative; 
    text-align: center; 
} 

.overlay > img { 
    vertical-align: middle; 
}

另請參閱this example。

來源

2012-07-30 07:01:28 scessor

嘿，我的朋友！謝謝。我試過你的代碼，似乎工作，但它導致一些CSS問題的選項卡。檢查[LINK]（http://webprolearner.ueuo.com/dropdown-menu/test1.php） – CodingWonders90 2012-07-30 07:52:13

我已經修復了我的答案。 – scessor 2012-07-30 07:54:53

我已經修復了我的答案！ – scessor 2012-07-30 08:01:46

一種替代的方法，你要考慮：你的MySQL查詢不應該需要很長時間的。這些非常簡單的查找;如果他們花費很長時間，可能會缺少索引。在添加預加載邏輯之前，我會看到查詢在後端花了多長時間，並嘗試優化這些查詢。

來源

2012-07-27 19:49:29

Ajax加載器和鏈接選擇框

回答

相關問題