title: JQuery Ajax Script working on Local Machine but not on Server
body: <p>I've exhaustively looked through the internet to find a solution for this problem. <br>
  So I have a jquery ajax script that loads in a csv file and generates some html code incorporating the data in the csv file. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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 = '&lt;table align="center" id="searchData"&gt;';
  
             for(var i = 0; i &lt; 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 &lt; data.length; j += 1) {
  
                var dataFields = data[j].split(',');
                if (dataFields[nameLoc]==0){
                  html += '&lt;/table&gt;';
                  $(html).appendTo('body');
                  break;
                };
  
                html += '&lt;tr&gt;';
                html += '&lt;td class="demo-show"&gt; &lt;h3&gt;' + dataFields[nameLoc] +  '&lt;/h3&gt;';
                html += '&lt;div class="menuBar"&gt; ';
  
                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 += '&lt;a href="' + site + '"&gt;' + 'Request Access' + '&lt;/a&gt;&lt;br&gt;';
                }
                else{
                  html += '&lt;br&gt;&lt;b&gt; ' + dataFields[canRequestLoc+1] + '&lt;/b&gt; &lt;br&gt; &lt;br&gt;';
                };
                html += '&lt;b&gt;Request System: &lt;/b&gt;' + dataFields[siteLoc] + '&lt;br&gt;';
                if (dataFields[siteLoc]=='ECAPS'){
                  html += '&lt;b&gt;ECAPS Classification: &lt;/b&gt;' + dataFields[EClassLoc] + '&lt;br&gt;';
                };
                html += '&lt;b&gt;Type: &lt;/b&gt;' + dataFields[typeLoc] + '&lt;br&gt;';
                html += '&lt;b&gt;Category: &lt;/b&gt;' + dataFields[categoryLoc] + '&lt;br&gt;';
  
                 html += '&lt;b&gt;Description: &lt;/b&gt; ' ;
  
                for (var k=descripLoc; k&lt;dataFields.length; k+=1){
                   html += dataFields[k];
                }
  
                 html += '&lt;br&gt;&lt;br&gt;&lt;/div&gt;';
                html += '&lt;/td&gt; &lt;/tr&gt;';
  
             }
             html += '&lt;/table&gt;';
             $('.app').append(html);
         }        
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So the script loads all the information perfectly but the part </p>
  
  <pre><code>html += '&lt;td class="demo-show"&gt; &lt;h3&gt;' + dataFields[nameLoc] +  '&lt;/h3&gt;';
  </code></pre>
  
  <p>class="demo-show" is supposed to link this to another script where it makes the information between below the  hidden. Like an accordion.</p>
  
  <p>The script for that is (at different part of document):</p>
  
  <pre><code>$(document).ready(function() {
      $('td.demo-show &gt; div').hide();  
      $('td.demo-show &gt; h3').click(function() {
          $(this).next().slideToggle('fast');
      });
  });
  </code></pre>
  
  <p>All of this works in my local machine but when I put it on the server the accordion script doesn't work which is weird because the exact same script is used in another part of the site and it works.</p>
  
  <p>Only the part loaded by the JQuery Ajax part doesn't work.</p>
  
  <p>I've tried everything!! This is my first time ever posting on a forum.
  Please take a look and let me know what you think.</p>
  
  <p>UPDATE: 
  Here is the site. Please try it in IE
  <a href="http://jsolomon9.99k.org/" rel="nofollow">http://jsolomon9.99k.org/</a></p>
  
  <p>The part that's not working is that when you click on "Heading 1" the information below it should also do the accordion effect. Instead it is just static. </p>