0

この問題の解決策を見つけるために、インターネットを徹底的に調べました。
したがって、csvファイルにロードし、csvファイルにデータを組み込んだhtmlコードを生成するjquery ajaxスクリプトがあります。

<script type="text/javascript">
    $(document).ready(function() {
    $.ajax({

       type: "GET",
       url: "database.csv",
       dataType: "html",
       data: {},
       success: function(text) {
           // Location of key information
           var nameLoc;
           var siteLoc;
           var typeLoc;
           var categoryLoc;
           var descripLoc;
           var canRequestLoc;
           var EClassLoc;
           var description='';
           var temp = "Y";
           var charTemp;
           var site;
           var len;
           var fields = text.split(/\n/);
           fields.pop(fields.length-1);

           var headers = fields[0].split(','), html = '<table align="center" id="searchData">';

           for(var i = 0; i < headers.length; i += 1) {
              switch (headers[i]){
                case 'Name':
                    nameLoc = i;
                 break;
                case 'RequestSystem':
                    siteLoc = i;
                break;
                case 'Type':
                    typeLoc = i;
                break;
                case 'Category':
                    categoryLoc = i;
                break;
                case 'canRequest':
                    canRequestLoc = i;
                break;
                case 'ECAPSClassification':
                    EClassLoc = i;
                break;
                case 'Description':
                    descripLoc = i;
                break;
              };
           }
           descripLoc = canRequestLoc + 2;

           var data = fields.slice(1, fields.length);

           for(var j = 0; j < data.length; j += 1) {

              var dataFields = data[j].split(',');
              if (dataFields[nameLoc]==0){
                html += '</table>';
                $(html).appendTo('body');
                break;
              };

              html += '<tr>';
              html += '<td class="demo-show"> <h3>' + dataFields[nameLoc] +  '</h3>';
              html += '<div class="menuBar"> ';

              charTemp = dataFields[canRequestLoc];
              if (charTemp=='Y'){
                switch (dataFields[siteLoc]){
                    case 'Service Now':
                        site = 'https://ccsn.service-now.com/'; 
                        break;
                    case 'CCR IdM':
                        site = 'http://idm.na.cokecce.com'; 
                        break;
                    case 'ECAPS':
                        site = 'https://ecaps.cokeccr.com/ecaps';   
                        break;
                    case 'KO IdM':
                        site = 'https://apps.ko.com/idm';   
                        break;
                    default:
                        site = 'default';   
                        break;
                };
                html += '<a href="' + site + '">' + 'Request Access' + '</a><br>';
              }
              else{
                html += '<br><b> ' + dataFields[canRequestLoc+1] + '</b> <br> <br>';
              };
              html += '<b>Request System: </b>' + dataFields[siteLoc] + '<br>';
              if (dataFields[siteLoc]=='ECAPS'){
                html += '<b>ECAPS Classification: </b>' + dataFields[EClassLoc] + '<br>';
              };
              html += '<b>Type: </b>' + dataFields[typeLoc] + '<br>';
              html += '<b>Category: </b>' + dataFields[categoryLoc] + '<br>';

               html += '<b>Description: </b> ' ;

              for (var k=descripLoc; k<dataFields.length; k+=1){
                 html += dataFields[k];
              }

               html += '<br><br></div>';
              html += '</td> </tr>';

           }
           html += '</table>';
           $('.app').append(html);
       }        
    });
});
</script>

したがって、スクリプトはすべての情報を完全にロードしますが、一部

html += '<td class="demo-show"> <h3>' + dataFields[nameLoc] +  '</h3>';

class="demo-show" は、これを別のスクリプトにリンクして、下の情報を非表示にすることになっています。アコーディオンのように。

そのためのスクリプトは（ドキュメントの別の部分にあります）：

$(document).ready(function() {
    $('td.demo-show > div').hide();  
    $('td.demo-show > h3').click(function() {
        $(this).next().slideToggle('fast');
    });
});

これはすべてローカル マシンで機能しますが、サーバーに配置すると、アコーディオン スクリプトが機能しません。これは、まったく同じスクリプトがサイトの別の部分で使用され、機能するためです。

JQuery Ajax 部分によってロードされた部分だけが機能しません。

全部試しました！！フォーラムに投稿するのはこれが初めてです。ご覧になり、ご意見をお聞かせください。

更新: サイトはこちらです。IEで試してみてください http://jsolomon9.99k.org/

機能していない部分は、「Heading 1」をクリックすると、その下の情報もアコーディオン効果を行う必要があることです。代わりに、それは単なる静的です。

4

1 に答える 1

0

私はあなたのソースを見て、これがあなたが追加したjsファイルです

<script src="files/jquery.js" type="text/javascript"></script>
<script src="files/more-show.js" type="text/javascript"></script>
<script type="text/javascript" src="files/jquery.min.js"></script>

2 つの jquery ファイルを追加するのではなく、削除してページの上部にfiles/jquery.js移動する必要があります。files/jquery.min.jsこのようにしてから試してください

<script type="text/javascript" src="files/jquery.min.js"></script>
<script src="files/more-show.js" type="text/javascript"></script>
于 2012-07-18T20:18:03.343 に答える