サーバー上のJQueryは断続的にしか実行されません.appends（）

Question

以下のように、ページが読み込まれたときにエンドポイントを呼び出して、データを取得してdivに追加します。 localhost上では完全に動作しますが、サーバー上では断続的にしか動作しません。devツールを見ると、ネットワーク・タブには$ .postの動作が示され、データが返されますが、追加はしません。

htmlがレンダリングされる前に$ .postの処理が完了したかどうかは分かりました。したがって、追加するdivはありませんでしたが、これを確認または修正する方法がわかりません。私はhtmlが最初にレンダリングされることを保証するために、htmlページのスクリプトをclose-bodyタグの直前に移動しようとしました。私はまた、$(Document).readyが呼び出される前にJSで関数を定義していることを確認しました。

それはLIVE機能していない表示するには... www.everythingproduct.com - あなたはブログのページ上で複数回クリックしてみてください場合は、時にはそれがハングアップ参照してくださいよ...

$(document).ready(function() { 

    var page = 'blog-articles'; 
    $('#main-body-content').load('site/pages/' + page + '.php'); 
    loadArticlesData(); 

    $.post('endpoint/sendEvent.php', { 
    userID: '<?php echo $uid; ?>', 
    eventType: "pageView", 
    currentURL: window.location.href, 
    referer: '<?php echo $referer; ?>' 
    }); 

}); 

function loadArticlesData() { 
    $('#cover').show(); 
    $.post('endpoint/getArticles.php', { 
    type: "All" 
    }, function(result) { 
    var data = result; 
    $.each(data, function(i, l) { 
     $('#articles').append(
     '<a target="_blank" href="' + l.link + '">' + 
     '<div value="' + l.id + '" class="article">' + 
     '<div class="img">' + 
     '<img src="img/' + l.img + '" height="50px">' + 
     '</div>' + 
     '<div class="article-content">' + 
     '<h2>' + l.title + '</h2>' + 
     '<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' + 
     '</div>' + 
     '</div>' + 
     '</a>' 
    ); 
    }); 
    $('#cover').fadeOut("slow"); 
    }); 

    $.post('endpoint/getTags.php', {}, function(result) { 
    var data = result; 

    $.each(data, function(i, l) { 
     $('#tags').append(
     '<span value="' + l + '" class="tag-word">' + l + '</span> ' 
    ); 
    }); 
    }); 

} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cover"></div> 
<div class="body"> 
    <div class="body-container"> 
    <div class="body-left"> 
     <div style="text-align: left; padding-left: 20px;"> 
     <h1 style="font-weight: normal;">Blog Article Database</h1> 
     </div> 
     <div id="articles" class="articles"></div> 
    </div> 
    <div class="body-right"> 
     <div class="filter-panel"> 
     <h3>Browse (A-Z)</h3> 
     <div id="tags" class="tags"> 
      <span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたがいます非同期要求を妨げる。一つだけを行い、成功に続け

これを試してみてください：

$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData); 

は、最初の要求が完了するまで待機する - その後の終わりに

$.post('endpoint/getTags.php', {}...

を移動2番目のリクエストの成功