3

初めてページをロードすると、すべてのコンテンツが正しくロードされます。(コンテンツを更新するために) Ajax を使用してページの同じセクションを再度読み込むと、Jquery が完全に読み込まれません。

これは、Jquery が「ページの読み込み時」などによって初めてア​​クティブ化されたため、ajax ウィンドウで開いたときに、ページが実際にリロードされていないため、Jquery がアクティブ化されていないためですか?

問題の原因と思われるコードは次のとおりです.. ajax divで開いたときにアクティブ化する必要がありますか?

<!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($){
      var handler = $('#tiles li');

      handler.wookmark({
          // Prepare layout options.
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 5, // Optional, the distance between grid items
          outerOffset: 0, // Optional, the distance to the containers border
          itemWidth: 178 // Optional, the width of a grid item
      });

        // Update the layout.
        handler.wookmark();
      });
    })(jQuery);
  </script>

Jquery はスタイリング上の理由で使用されていることに言及しておく必要があります (ページ コンテンツを巧みにスタイル設定します)。handler.wookmark();がアクティブ化されたときに発生すると思います。ajaxウィンドウでこれをアクティブにするにはどうすればよいですか?

ajax コードを提供するように求められたので、以下に示します。

<!-- ajax script -->
<script>
window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var otherClasses = favorites.className;
        if (otherClasses.contains("Active")) {
            everyone.className = 'filterOptionActive';
            favorites.className = 'filterOption';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var otherClasses = everyone.className;
        if (otherClasses.contains("Active")) {
            favorites.className = 'filterOptionActive';
            everyone.className = 'filterOption';
        }
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","../home/" + pageName + ".php",true);
        xmlhttp.send();
        }
}
</script>
<!-- ends ajax script -->
4

2 に答える 2

2

私はおかしな天才です、私は自分の問題を解決しました！(これは今までになかった:D)

ajax コーディングに JavaScript を追加する必要があったため、ajax が更新されたら再読み込みされました。

答え：

<!-- ajax script -->
<script>
window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var otherClasses = favorites.className;
        if (otherClasses.contains("Active")) {
            everyone.className = 'filterOptionActive';
            favorites.className = 'filterOption';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var otherClasses = everyone.className;
        if (otherClasses.contains("Active")) {
            favorites.className = 'filterOptionActive';
            everyone.className = 'filterOption';
        }
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;






// this is the content that needed adding!
(function ($){
          var handler = $('#tiles li');

          handler.wookmark({
              // Prepare layout options.
              autoResize: true, // This will auto-update the layout when the browser window is resized.
              container: $('#main'), // Optional, used for some extra CSS styling
              offset: 5, // Optional, the distance between grid items
              outerOffset: 0, // Optional, the distance to the containers border
              itemWidth: 178 // Optional, the width of a grid item
          });

          // Capture clicks on grid items.
          handler.click(function(){
            // Randomize the height of the clicked item.
            var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
            $(this).css('height', newHeight+'px');

            // Update the layout.
            handler.wookmark();
          });
        })(jQuery);






                }
              }
            xmlhttp.open("GET","../home/" + pageName + ".php",true);
            xmlhttp.send();
            }
    }
    </script>
    <!-- ends ajax script -->
于 2013-11-06T16:32:08.433 に答える