2013-04-29 3 views
0

Я пытаюсь использовать DataTables на своей странице, и по какой-то причине я получаю ошибки «JQuery undefined» при просмотре ошибок в моем браузере. Вот мой HTML код:Справка по JavaScript - JQuery не определен

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<script type="text/javascript" charset="utf-8" src="/CensusDatabase/js/jquery.dataTables-1.9.4.min.js" ></script> 
<script type="text/javascript" src="/CensusDatabase/js/DrawTable.js" ></script> 

<head> 
    <title>My Census Data</title> 
    <style type="text/css"> 
     body { 
      color: black; 
      background-color: #ffaacc; 
      font-family: "Trebuchet MS", "Calibri", sans-serif 
     } 
     h1 { 
      font-family: "Trebuchet MS", "Calibri", sans-serif 
     } 

    </style> 

</head> 

<body> 

    <h1>My Census Data</h1> 

    <div class="census"> 

     <div id="block-system-main"> 
      <h2>Reports</h2> 
       <ul> 
        <li><a href="#" onclick="nationalAgeGender()">National age and gender data</a></li> 
        <li><a href="#" onclick="arizonaAgeGender()">Arizona age and gender data</a></li> 
        <li><a href="#" onclick="combinedAgeGender()">Combined age and gender data</a></li> 
        <li><a href="#" onclick="nationalRace()">National race data</a></li> 
        <li><a href="#" onclick="arizonaRace()">Arizona race data</a></li> 
        <li><a href="#" onclick="combinedRace()">Combined race data</a></li> 
       </ul> 
     <div id="reportsData"><i>Please select a list to display.</i></div> 
    </div> 
    </div> 

А вот мой код JavaScript:

function nationalAgeGender() { 
    (function($) { 
     $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
      $('#data-entry').dataTable({ 
       "bProcessing": true, 
       "bScrollInfinite": true, 
       "sScrollX": "160%", 
       "bScrollCollapse": true , 
       "bAutoWidth": false, 
       "sScrollY": "100%",  
       "iDisplayLength": -1, 
       "sDom": '<"top">rt<"bottom">', 
       "aaSorting": [], 
       "sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php", 
       "aoColumns": [ 
        { "sTitle": "Age group" }, 
        { "sTitle": "Total population (both genders)" }, 
        { "sTitle": "Male population" }, 
        { "sTitle": "Female population" }, 
        { "sTitle": "% (both genders)" }, 
        { "sTitle": "Male %" }, 
        { "sTitle": "Female %" } 
       ] 

      }); 
     })(jQuery); 
} 

function arizonaAgeGender() { 
(function($) { 
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
    $('#data-entry').dataTable({ 
     "bProcessing": true, 
     "bScrollInfinite": true, 
     "sScrollX": "160%", 
     "bScrollCollapse": true , 
     "bAutoWidth": false, 
     "sScrollY": "100%",  
     "iDisplayLength": -1, 
     "sDom": '<"top">rt<"bottom">', 
     "aaSorting": [], 
     "sAjaxSource": "/CensusDatabase/database_scripts/ArizonaAgeGender.php", 
     "aoColumns": [ 
      { "sTitle": "Age group" }, 
      { "sTitle": "Total population (both genders)" }, 
      { "sTitle": "Male population" }, 
      { "sTitle": "Female population" }, 
      { "sTitle": "% (both genders)" }, 
      { "sTitle": "Male %" }, 
      { "sTitle": "Female %" } 

     ] 

    }); 
})(jQuery); 
} 

function combinedAgeGender() { 
(function($) { 
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
    $('#data-entry').dataTable({ 
     "bProcessing": true, 
     "bScrollInfinite": true, 
     "sScrollX": "160%", 
     "bScrollCollapse": true , 
     "bAutoWidth": false, 
     "sScrollY": "100%",  
     "iDisplayLength": -1, 
     "sDom": '<"top">rt<"bottom">', 
     "aaSorting": [], 
     "sAjaxSource": "/CensusDatabase/database_scripts/CombinedAgeGender.php", 
     "aoColumns": [ 
      { "sTitle": "Age group" }, 
      { "sTitle": "National total population (both genders)" }, 
      { "sTitle": "National male population" }, 
      { "sTitle": "National female population" }, 
      { "sTitle": "National % (both genders)" }, 
      { "sTitle": "National male %" }, 
      { "sTitle": "National female %" }, 
      { "sTitle": "Arizona total population (both genders)" }, 
      { "sTitle": "Arizona male population" }, 
      { "sTitle": "Arizona female population" }, 
      { "sTitle": "Arizona % (both genders)" }, 
      { "sTitle": "Arizona male %" }, 
      { "sTitle": "Arizona female %" } 
     ] 

    }); 
})(jQuery); 
} 

function nationalRace() { 
(function($) { 
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
    $('#data-entry').dataTable({ 
     "bProcessing": true, 
     "bScrollInfinite": true, 
     "sScrollX": "160%", 
     "bScrollCollapse": true , 
     "bAutoWidth": false, 
     "sScrollY": "100%",  
     "iDisplayLength": -1, 
     "sDom": '<"top">rt<"bottom">', 
     "aaSorting": [], 
     "sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php", 
     "aoColumns": [ 
      { "sTitle": "Category" }, 
      { "sTitle": "White" }, 
      { "sTitle": "White %" }, 
      { "sTitle": "Black or African-American" }, 
      { "sTitle": "Black or African-American %" }, 
      { "sTitle": "Native American" }, 
      { "sTitle": "Native American %" }, 
      { "sTitle": "Asian" }, 
      { "sTitle": "Asian %" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander %" }, 
      { "sTitle": "Some other race" }, 
      { "sTitle": "Some other race %" } 
     ] 

    }); 
})(jQuery); 
} 

function arizonaRace() { 
(function($) { 
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
    $('#data-entry').dataTable({ 
     "bProcessing": true, 
     "bScrollInfinite": true, 
     "sScrollX": "160%", 
     "bScrollCollapse": true , 
     "bAutoWidth": false, 
     "sScrollY": "100%",  
     "iDisplayLength": -1, 
     "sDom": '<"top">rt<"bottom">', 
     "aaSorting": [], 
     "sAjaxSource": "/CensusDatabase/database_scripts/ArizonaRace.php", 
     "aoColumns": [ 
      { "sTitle": "Category" }, 
      { "sTitle": "White" }, 
      { "sTitle": "White %" }, 
      { "sTitle": "Black or African-American" }, 
      { "sTitle": "Black or African-American %" }, 
      { "sTitle": "Native American" }, 
      { "sTitle": "Native American %" }, 
      { "sTitle": "Asian" }, 
      { "sTitle": "Asian %" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander %" }, 
      { "sTitle": "Some other race" }, 
      { "sTitle": "Some other race %" } 
     ] 

    }); 
})(jQuery); 
} 

function combinedRace() { 
(function($) { 
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>'); 
    $('#data-entry').dataTable({ 
     "bProcessing": true, 
     "bScrollInfinite": true, 
     "sScrollX": "160%", 
     "bScrollCollapse": true , 
     "bAutoWidth": false, 
     "sScrollY": "100%",  
     "iDisplayLength": -1, 
     "sDom": '<"top">rt<"bottom">', 
     "aaSorting": [], 
     "sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php", 
     "aoColumns": [ 
      { "sTitle": "Category" }, 
      { "sTitle": "White (National)" }, 
      { "sTitle": "White % (National)" }, 
      { "sTitle": "Black or African-American (National)" }, 
      { "sTitle": "Black or African-American % (National)" }, 
      { "sTitle": "Native American (National)" }, 
      { "sTitle": "Native American % (National)" }, 
      { "sTitle": "Asian (National)" }, 
      { "sTitle": "Asian % (National)" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander (National)" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander % (National)" }, 
      { "sTitle": "Some other race (National)" }, 
      { "sTitle": "Some other race % (National)" },, 
      { "sTitle": "White (Arizona)" }, 
      { "sTitle": "White % (Arizona)" }, 
      { "sTitle": "Black or African-American (Arizona)" }, 
      { "sTitle": "Black or African-American % (Arizona)" }, 
      { "sTitle": "Native American (Arizona)" }, 
      { "sTitle": "Native American % (Arizona)" }, 
      { "sTitle": "Asian (Arizona)" }, 
      { "sTitle": "Asian % (Arizona)" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander (Arizona)" }, 
      { "sTitle": "Native Hawaiian or Pacific Islander % (Arizona)" }, 
      { "sTitle": "Some other race (Arizona)" }, 
      { "sTitle": "Some other race % (Arizona)" } 
     ] 

    }); 
})(jQuery); 
} 

Кто-нибудь знает, что здесь не так?

+2

Я не вижу, что вы на самом деле включены в JQuery этой странице. – j08691

+0

Я рекомендую прочитать http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery. –

+0

Вам также не хватает тега ''. – Pointy

ответ

6

Кажись, как будто вы не включают JQuery библиотеку:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
+0

Обратите внимание, что это должно появиться ** перед ** любым кодом, который использует jQuery, что не всегда очевидно для всех (что означает, что перед двумя внешними файлами, включенными на страницу) – Ian

Смежные вопросы