2016-01-02 51 views
0

我有一個HTML5模板,我用動態jQuery/ajax生成的內容替換靜態內容。內容在Chrome等桌面瀏覽器上顯示得很好。當我嘗試在iPhone或iPad等移動設備上查看內容時,動態生成的內容不會顯示出來。我將發佈靜態內容和動態內容。動態jQuery內容沒有顯示在移動HTML5

靜態內容

\t \t \t \t \t <div class="col-lg-6 wow fadeInLeft"> 
 
         <article class="row row-no-gutter blog-post"> 
 
          <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image" 
 
           style="background-image: url('images/page-1_img09.jpg')" data-equal-group="1"> 
 
          </div> 
 
          <div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="1"> 
 
          
 
           <div class="blog-post__cnt"> 
 
           \t 
 
            <h5>some text</h5> 
 
            <hr class="sm sm--inset-2 sm-default"/> 
 
            
 
            <p>some text</p> 
 

 
            <p>some text</p> 
 
            <a href="#" class="btn-link">READ MORE</a> 
 
           </div> 
 
          </div> 
 
         </article> 
 
        </div> 
 
        <div class="col-lg-6 wow fadeInRight"> 
 
         <article class="row row-no-gutter blog-post"> 
 
          <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right pull-lg-left" 
 
           style="background-image: url('images/page-1_img10.jpg')" data-equal-group="1"></div> 
 
          <div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="1"> 
 
          
 
           <div class="blog-post__cnt"> 
 
            <h5>some text</h5> 
 
            <hr class="sm sm--inset-2 sm-default"/> 
 
            
 
            <p>some text</p> 
 
            <a href="#" class="btn-link">READ MORE</a> 
 
           </div> 
 
          </div> 
 
         </article> 
 
        </div> 
 
        <div class="col-lg-6 wow fadeInLeft"> 
 
         <article class="row row-no-gutter blog-post"> 
 
          <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-lg-right" 
 
           style="background-image: url('images/page-1_img11.jpg')" data-equal-group="2"></div> 
 
          <div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="2"> 
 
          
 
           <div class="blog-post__cnt"> 
 
            <h5>some text</h5> 
 
            <hr class="sm sm--inset-2 sm-default"/> 
 
            
 
            <p>some text</p> 
 
            <a href="#" class="btn-link">READ MORE</a> 
 
           </div> 
 
          </div> 
 
         </article> 
 
        </div> 
 
        <div class="col-lg-6 wow fadeInRight"> 
 
         <article class="row row-no-gutter blog-post"> 
 
          <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right" 
 
           style="background-image: url('images/page-1_img12.jpg')" data-equal-group="2"></div> 
 
          <div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="2"> 
 
           <div class="blog-post__cnt"> 
 
            <h5>some text</h5> 
 
            <hr class="sm sm--inset-2 sm-default"/> 
 
            
 
            <p>some text</p> 
 
            <a href="#" class="btn-link">READ MORE</a> 
 
           </div> 
 
          </div> 
 
         </article> 
 
        </div>

動態內容

<script type="text/javascript"> 
 
\t \t var html = ""; 
 
\t 
 
\t \t function assetsPost() { 
 
\t \t $.ajax({ 
 
\t \t \t cache: false, 
 
\t \t \t type:'GET', 
 
\t \t \t url:'cfc/cfc_Forum.cfc?method=getMessages&returnformat=json', 
 
\t \t \t dataType: "json", 
 
\t \t \t data: { 
 
\t \t \t \t maxRows: 4, 
 
\t \t \t \t origin: 1, 
 
\t \t \t \t }, 
 
\t \t \t success:function(data) { 
 
\t \t \t \t if(data) { // DO SOMETHING 
 
\t \t \t \t jQuery.each(data, function(i, val) {  
 
\t \t \t \t \t $('#messages').html(data[i].annotation); 
 
\t \t \t \t \t var threadID = data[i].thread; 
 
\t \t \t \t \t var BodyText = data[i].body; 
 
\t \t \t \t \t var name \t \t = data[i].name; 
 
\t \t \t \t \t var MessageID \t = data[i].MessageID; 
 
\t \t \t \t \t var photo \t \t = data[i].photo; 
 
\t \t \t \t \t var annotation = data[i].annotation; 
 
\t \t \t \t \t \t if(i == 0) { 
 
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInLeft'>"; 
 
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image' style='background-image: url(" + photo + ")' data-equal-group='1'></div>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='1'>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t else if(i == 1) { 
 
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInRight'>"; 
 
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right pull-lg-left' style='background-image: url(" + photo + ")' data-equal-group='1'></div>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='1'>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t else if(i == 2){ 
 
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInLeft'>"; 
 
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-lg-right' style='background-image: url(" + photo + ")' data-equal-group='1'></div>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='2'>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t else if(i == 3){ 
 
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInRight'>"; 
 
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right' style='background-image: url(" + photo + ")' data-equal-group='1'></div>"; 
 
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='2'>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t html += "<div class='blog-post__cnt'>"; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t html += "<h5>" + name + "</h5>" 
 
\t \t \t \t \t \t html += "<hr class='sm sm--inset-2 sm-default'/>"; 
 
\t \t \t \t \t \t html += "<p>" + BodyText.substr(0, 400) + "</p>"; 
 
\t \t \t \t \t \t html += "<a href='#' class='btn-link'>READ MORE</a>"; \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t html += "</div>"; 
 
\t \t \t \t \t html += "</div>"; 
 
\t \t \t \t \t html += "</article>"; 
 
\t \t \t \t \t html += "</div>"; 
 
\t \t \t \t }); 
 
\t \t \t \t \t $('#qMessage').html(html); 
 
\t \t \t \t } else { // DO SOMETHING 
 
\t \t \t } 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
\t assetsPost(); 
 
\t </script>

任何幫助很受讚賞。

+0

我剛剛意識到內容不會顯示在Firefox中。 arg ... –

+0

發現我自己的問題。這是coldfusion用戶認證的問題。代碼沒有錯!是! –

回答

0

發現我自己的問題。這是coldfusion用戶認證的問題。

+1

您是否有任何關於如何發現身份驗證錯誤的信息。獲得這些信息將使這個問題和答案更有用。 –

+0

James,認證錯誤是由於我沒有登錄到我正在測試的移動設備上的網站。這不是一個公共頁面。一旦我登錄,我可以看到它。 –