Я пытаюсь загрузить gif-изображение, пока ajax не загрузит данные и не покажет их. но я чувствую себя утешенным.
Надеюсь, вы можете мне помочь. Это мой код для предварительного поиска.
Теперь я хочу добавить gip для загрузки.
$.ajax({ type: 'POST', url: base_rul+'site/advancedsearch', data: { keyValues: keyValues }, dataType: 'json', success: function(data) { var content = ['']; if(data.status=='1') { //for(var k=1;k<=2;k++){ //for chapter1 starts if( data.item.chapter[1] && data.item.chapter[1].length>=1){ for(i=0;i<data.item.chapter[1].length;i++){ var obj = data.item.chapter[1][i]; //alert(data.item.chapter[1][0].chapter_row); if(data.item.chapter[1][i].chapter_row==0){ content.push('<h3>Chapter 18 New Health Care Occupancy</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter1 ends //for chapter2 starts if( data.item.chapter[2] && data.item.chapter[2].length>=1){ for(i=0;i<data.item.chapter[2].length;i++){ var obj = data.item.chapter[2][i]; //alert(data.item.chapter[1][0].chapter_row); if(data.item.chapter[2][i].chapter_row==0){ content.push('<h3>Chapter 19 Existing Health Care Occupancy</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter2 ends //for chapter3 starts if( data.item.chapter[3] && data.item.chapter[3].length>=1){ for(i=0;i<data.item.chapter[3].length;i++){ var obj = data.item.chapter[3][i]; if(data.item.chapter[3][i].chapter_row==0){ content.push('<h3>Chapter 20 New Ambulatory Health Care Occupancy</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter3 ends //for chapter4 starts if( data.item.chapter[4] && data.item.chapter[4].length>=1){ for(i=0;i<data.item.chapter[4].length;i++){ var obj = data.item.chapter[4][i]; if(data.item.chapter[4][i].chapter_row==0){ content.push('<h3>Chapter 21 Existing Ambulatory Health Care Occupancy</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter4 ends //for chapter5 starts if( data.item.chapter[5] && data.item.chapter[5].length>=1){ for(i=0;i<data.item.chapter[5].length;i++){ var obj = data.item.chapter[5][i]; if(data.item.chapter[5][i].chapter_row==0){ content.push('<h3>Chapter 32 New Residential Board and Care</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter5 ends //for chapter6 starts if( data.item.chapter[6] && data.item.chapter[6].length>=1){ for(i=0;i<data.item.chapter[6].length;i++){ var obj = data.item.chapter[6][i]; if(data.item.chapter[6][i].chapter_row==0){ content.push('<h3>Chapter 33 Existing Residential Board and Care</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter6 ends //for chapter7 starts if( data.item.chapter[7] && data.item.chapter[7].length>=1){ for(i=0;i<data.item.chapter[7].length;i++){ var obj = data.item.chapter[7][i]; if(data.item.chapter[7][i].chapter_row==0){ content.push('<h3>Chapter 18 New Health Care Occupancies</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter7 ends //for chapter8 starts if( data.item.chapter[8] && data.item.chapter[8].length>=1){ for(i=0;i<data.item.chapter[8].length;i++){ var obj = data.item.chapter[8][i]; if(data.item.chapter[8][i].chapter_row==0){ content.push('<h3>Chapter 19 Existing Health Care Occupancies</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter8 ends //for chapter9 starts if( data.item.chapter[9] && data.item.chapter[9].length>=1){ for(i=0;i<data.item.chapter[9].length;i++){ var obj = data.item.chapter[9][i]; if(data.item.chapter[9][i].chapter_row==0){ content.push('<h3>Chapter 20 New Amulatory Health Care Occupancies</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter9 ends //for chapter10 starts if( data.item.chapter[10] && data.item.chapter[10].length>=1){ for(i=0;i<data.item.chapter[10].length;i++){ var obj = data.item.chapter[10][i]; if(data.item.chapter[10][i].chapter_row==0){ content.push('<h3>Chapter 21 Existing Amulatory Health Care Occupancies</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter10 ends //for chapter11 starts if( data.item.chapter[11] && data.item.chapter[11].length>=1){ for(i=0;i<data.item.chapter[11].length;i++){ var obj = data.item.chapter[11][i]; if(data.item.chapter[11][i].chapter_row==0){ content.push('<h3>Chapter 32 New Residential board</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter11 ends //for chapter12 starts if( data.item.chapter[12] && data.item.chapter[12].length>=1){ for(i=0;i<data.item.chapter[12].length;i++){ var obj = data.item.chapter[12][i]; if(data.item.chapter[12][i].chapter_row==0){ content.push('<h3>Chapter 33 Existing Residential board</h3>'); } content.push('<ul><li><div>'); content.push('<p>'+obj.section_number +' '+ obj.title+'</p>'); content.push('</div></li></ul>'); }//end for each loop }//end if //for chapter12 ends //}//end k loop }//if condition ends else { content.push('<ul><li><div>'); content.push('<p>No records found.</p>'); content.push('</div></li></ul>'); } $('#advanced_search_display').html(content.join('')); $('#filter').css("display","none") ; $('#active_filters').css("display","none"); } }); }//end function В jQuery ajax есть метод, называемый beforeSend, используйте его!
Пример:
$.ajax({ url: someurl.php, data: data, beforeSend: function() { $('#image_id').show(); }, success: function() { $('#image_id').hide(); // ... } });
Вы можете добавить изображение на страницу загрузки. Когда ajax автоматически загружает его, записывает изображение и отображает выход ajax.
<script> var DisplayIMge = document.getElementById("ajaxdiv"); DisplayIMge.innerHTML = "<img src='cdn/images/ajax-loader.gif' /><h3>Please wait while we load</h3>" </script>
Надеюсь, это сработает для вас!
Один из способов сделать это:
Прямо перед $.ajax({ });
Write: $("#showImage").html("<img src="url"/>");
В:
$.ajax({ type: 'POST', url: base_rul+'site/advancedsearch', data: { keyValues: keyValues }, dataType: 'json', success: function(data) { //here add $("#showImage").html(""); // your content here } });
Перед загрузкой контента добавлено изображение и после успешного вызова очищено это изображение.
И вы можете исправить свой код (как @icktoofay say) следующим образом:
var aTitles = [ 'Chapter 18 New Health Care Occupancy', 'Chapter 19 Existing Health Care Occupancy', ... ]; var outSomeResults = function(content, data, id) { for(var i=0; i < data.length; i++){ var obj = data[i]; if( obj.chapter_row == 0 ) { content.push('<h3>'+aTitles[id]+'</h3>'); } content.push( '<ul><li>' + '<div><p>'+obj.section_number +' '+ obj.title+'</p></div>' + '</li></ul>' ); } } .... success: function(data) { var content = ['']; if(data.status=='1') { for(var i=0; i<data.item.chapter.length; i++ ) { if( data.item.chapter[i+1] && data.item.chapter[i+1].length>=1 ) { outSomeResults(content, data.item.chapter[i+1], i); } } }