2016-01-02 32 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,认证错误是由于我没有登录到我正在测试的移动设备上的网站。这不是一个公共页面。一旦我登录,我可以看到它。 –