Javascript file nachladen

  • JavaScript

Es gibt 8 Antworten in diesem Thema. Der letzte Beitrag () ist von BlackNetworkBit.

    Javascript file nachladen

    Hi freunde,

    ich habe ein Problem mit dem erstellen einer datatable unter moodle 3.1+,dies soll über jquery angelegt werden (datatables.net/examples/styling/bootstrap.html)

    ich benutze momentan folgenden code um die nötigen javascript dateien nachzuladen :

    Quellcode

    1. var bootstrapDataTableCSS = 'https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css';
    2. var bootstrapDataTableJsjquery = 'https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js';
    3. var bootstrapDataTableJsbootstrap = 'https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js';
    4. function loadDataTable(){
    5. $("<link/>", {
    6. rel: "stylesheet",
    7. type: "text/css",
    8. href: bootstrapDataTableCSS
    9. }).appendTo("head");
    10. $.getScript(bootstrapDataTableJsjquery, function(data, textStatus, jqxhr) {
    11. $.getScript(bootstrapDataTableJsbootstrap, function(data, textStatus, jqxhr) {
    12. $('#experiencestable').DataTable();
    13. $('#officiallinkstable').DataTable();
    14. });
    15. });
    16. }


    jedoch erhalte ich diesen Fehler :

    Quellcode

    1. TypeError: $(...).DataTable is not a function


    nach ein paar google suchen wurde mir mehrfach vorgeschlagen die jquery files zuerst geladen werden müssen da dies moodle standardmäßig aber tut kann dies nicht das Problem sein.

    nun wollte ich erfragen ob jemand von euch eventuell einen Lösungsvorschlag hat ( das plugin soll ein mod_datapreset werden)

    MFG BlackNetworkBit
    MFG 0x426c61636b4e6574776f726b426974
    InOffical VB-Paradise IRC-Server
    webchat.freenode.net/
    Channel : ##vbparadise
    Jap wenn du per JS HTML nachlädst, werden die Events nicht daran gebunden.
    Entweder nimmst du Delegates für den Übergeordneten Container oder nimmst deine Events als <script>code</script> mit in deine zu ladendes HTML.


    LG Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:
    Könntest du mir ein Beispiel dafür geben,
    bin was JavaScript angeht nicht Grade der fitteste :)
    MFG 0x426c61636b4e6574776f726b426974
    InOffical VB-Paradise IRC-Server
    webchat.freenode.net/
    Channel : ##vbparadise
    Ich frage mich wieso du die notwendigen Dateien per JS nachladen willst.
    Als Link in dein HTML klappt das doch ohne weiteres :huh:

    Wichtig ist die Reihenfolge in der du die JS-Files lädst.
    Erst jQuery, dann das DataTable-JS-File (setzt auf jQuery auf) und zum Schluss Bootstrap.
    Deshalb kam bei mir auch anfangs der Fehler.

    Hier mal der Code von deinem Link in einem HTML File.

    Spoiler anzeigen

    HTML-Quellcode

    1. <head>
    2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    3. <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    4. <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    5. <script>
    6. $(document).ready(function()
    7. {
    8. $('#example').DataTable();
    9. });
    10. </script>
    11. <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    12. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
    13. </head>
    14. <body>
    15. <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    16. <thead>
    17. <tr>
    18. <th>Name</th>
    19. <th>Position</th>
    20. <th>Office</th>
    21. <th>Age</th>
    22. <th>Start date</th>
    23. <th>Salary</th>
    24. </tr>
    25. </thead>
    26. <tfoot>
    27. <tr>
    28. <th>Name</th>
    29. <th>Position</th>
    30. <th>Office</th>
    31. <th>Age</th>
    32. <th>Start date</th>
    33. <th>Salary</th>
    34. </tr>
    35. </tfoot>
    36. <tbody>
    37. <tr>
    38. <td>Tiger Nixon</td>
    39. <td>System Architect</td>
    40. <td>Edinburgh</td>
    41. <td>61</td>
    42. <td>2011/04/25</td>
    43. <td>$320,800</td>
    44. </tr>
    45. <tr>
    46. <td>Garrett Winters</td>
    47. <td>Accountant</td>
    48. <td>Tokyo</td>
    49. <td>63</td>
    50. <td>2011/07/25</td>
    51. <td>$170,750</td>
    52. </tr>
    53. <tr>
    54. <td>Ashton Cox</td>
    55. <td>Junior Technical Author</td>
    56. <td>San Francisco</td>
    57. <td>66</td>
    58. <td>2009/01/12</td>
    59. <td>$86,000</td>
    60. </tr>
    61. <tr>
    62. <td>Cedric Kelly</td>
    63. <td>Senior Javascript Developer</td>
    64. <td>Edinburgh</td>
    65. <td>22</td>
    66. <td>2012/03/29</td>
    67. <td>$433,060</td>
    68. </tr>
    69. <tr>
    70. <td>Airi Satou</td>
    71. <td>Accountant</td>
    72. <td>Tokyo</td>
    73. <td>33</td>
    74. <td>2008/11/28</td>
    75. <td>$162,700</td>
    76. </tr>
    77. <tr>
    78. <td>Brielle Williamson</td>
    79. <td>Integration Specialist</td>
    80. <td>New York</td>
    81. <td>61</td>
    82. <td>2012/12/02</td>
    83. <td>$372,000</td>
    84. </tr>
    85. <tr>
    86. <td>Herrod Chandler</td>
    87. <td>Sales Assistant</td>
    88. <td>San Francisco</td>
    89. <td>59</td>
    90. <td>2012/08/06</td>
    91. <td>$137,500</td>
    92. </tr>
    93. <tr>
    94. <td>Rhona Davidson</td>
    95. <td>Integration Specialist</td>
    96. <td>Tokyo</td>
    97. <td>55</td>
    98. <td>2010/10/14</td>
    99. <td>$327,900</td>
    100. </tr>
    101. <tr>
    102. <td>Colleen Hurst</td>
    103. <td>Javascript Developer</td>
    104. <td>San Francisco</td>
    105. <td>39</td>
    106. <td>2009/09/15</td>
    107. <td>$205,500</td>
    108. </tr>
    109. <tr>
    110. <td>Sonya Frost</td>
    111. <td>Software Engineer</td>
    112. <td>Edinburgh</td>
    113. <td>23</td>
    114. <td>2008/12/13</td>
    115. <td>$103,600</td>
    116. </tr>
    117. <tr>
    118. <td>Jena Gaines</td>
    119. <td>Office Manager</td>
    120. <td>London</td>
    121. <td>30</td>
    122. <td>2008/12/19</td>
    123. <td>$90,560</td>
    124. </tr>
    125. <tr>
    126. <td>Quinn Flynn</td>
    127. <td>Support Lead</td>
    128. <td>Edinburgh</td>
    129. <td>22</td>
    130. <td>2013/03/03</td>
    131. <td>$342,000</td>
    132. </tr>
    133. <tr>
    134. <td>Charde Marshall</td>
    135. <td>Regional Director</td>
    136. <td>San Francisco</td>
    137. <td>36</td>
    138. <td>2008/10/16</td>
    139. <td>$470,600</td>
    140. </tr>
    141. <tr>
    142. <td>Haley Kennedy</td>
    143. <td>Senior Marketing Designer</td>
    144. <td>London</td>
    145. <td>43</td>
    146. <td>2012/12/18</td>
    147. <td>$313,500</td>
    148. </tr>
    149. <tr>
    150. <td>Tatyana Fitzpatrick</td>
    151. <td>Regional Director</td>
    152. <td>London</td>
    153. <td>19</td>
    154. <td>2010/03/17</td>
    155. <td>$385,750</td>
    156. </tr>
    157. <tr>
    158. <td>Michael Silva</td>
    159. <td>Marketing Designer</td>
    160. <td>London</td>
    161. <td>66</td>
    162. <td>2012/11/27</td>
    163. <td>$198,500</td>
    164. </tr>
    165. <tr>
    166. <td>Paul Byrd</td>
    167. <td>Chief Financial Officer (CFO)</td>
    168. <td>New York</td>
    169. <td>64</td>
    170. <td>2010/06/09</td>
    171. <td>$725,000</td>
    172. </tr>
    173. <tr>
    174. <td>Gloria Little</td>
    175. <td>Systems Administrator</td>
    176. <td>New York</td>
    177. <td>59</td>
    178. <td>2009/04/10</td>
    179. <td>$237,500</td>
    180. </tr>
    181. <tr>
    182. <td>Bradley Greer</td>
    183. <td>Software Engineer</td>
    184. <td>London</td>
    185. <td>41</td>
    186. <td>2012/10/13</td>
    187. <td>$132,000</td>
    188. </tr>
    189. <tr>
    190. <td>Dai Rios</td>
    191. <td>Personnel Lead</td>
    192. <td>Edinburgh</td>
    193. <td>35</td>
    194. <td>2012/09/26</td>
    195. <td>$217,500</td>
    196. </tr>
    197. <tr>
    198. <td>Jenette Caldwell</td>
    199. <td>Development Lead</td>
    200. <td>New York</td>
    201. <td>30</td>
    202. <td>2011/09/03</td>
    203. <td>$345,000</td>
    204. </tr>
    205. <tr>
    206. <td>Yuri Berry</td>
    207. <td>Chief Marketing Officer (CMO)</td>
    208. <td>New York</td>
    209. <td>40</td>
    210. <td>2009/06/25</td>
    211. <td>$675,000</td>
    212. </tr>
    213. <tr>
    214. <td>Caesar Vance</td>
    215. <td>Pre-Sales Support</td>
    216. <td>New York</td>
    217. <td>21</td>
    218. <td>2011/12/12</td>
    219. <td>$106,450</td>
    220. </tr>
    221. <tr>
    222. <td>Doris Wilder</td>
    223. <td>Sales Assistant</td>
    224. <td>Sidney</td>
    225. <td>23</td>
    226. <td>2010/09/20</td>
    227. <td>$85,600</td>
    228. </tr>
    229. <tr>
    230. <td>Angelica Ramos</td>
    231. <td>Chief Executive Officer (CEO)</td>
    232. <td>London</td>
    233. <td>47</td>
    234. <td>2009/10/09</td>
    235. <td>$1,200,000</td>
    236. </tr>
    237. <tr>
    238. <td>Gavin Joyce</td>
    239. <td>Developer</td>
    240. <td>Edinburgh</td>
    241. <td>42</td>
    242. <td>2010/12/22</td>
    243. <td>$92,575</td>
    244. </tr>
    245. <tr>
    246. <td>Jennifer Chang</td>
    247. <td>Regional Director</td>
    248. <td>Singapore</td>
    249. <td>28</td>
    250. <td>2010/11/14</td>
    251. <td>$357,650</td>
    252. </tr>
    253. <tr>
    254. <td>Brenden Wagner</td>
    255. <td>Software Engineer</td>
    256. <td>San Francisco</td>
    257. <td>28</td>
    258. <td>2011/06/07</td>
    259. <td>$206,850</td>
    260. </tr>
    261. <tr>
    262. <td>Fiona Green</td>
    263. <td>Chief Operating Officer (COO)</td>
    264. <td>San Francisco</td>
    265. <td>48</td>
    266. <td>2010/03/11</td>
    267. <td>$850,000</td>
    268. </tr>
    269. <tr>
    270. <td>Shou Itou</td>
    271. <td>Regional Marketing</td>
    272. <td>Tokyo</td>
    273. <td>20</td>
    274. <td>2011/08/14</td>
    275. <td>$163,000</td>
    276. </tr>
    277. <tr>
    278. <td>Michelle House</td>
    279. <td>Integration Specialist</td>
    280. <td>Sidney</td>
    281. <td>37</td>
    282. <td>2011/06/02</td>
    283. <td>$95,400</td>
    284. </tr>
    285. <tr>
    286. <td>Suki Burks</td>
    287. <td>Developer</td>
    288. <td>London</td>
    289. <td>53</td>
    290. <td>2009/10/22</td>
    291. <td>$114,500</td>
    292. </tr>
    293. <tr>
    294. <td>Prescott Bartlett</td>
    295. <td>Technical Author</td>
    296. <td>London</td>
    297. <td>27</td>
    298. <td>2011/05/07</td>
    299. <td>$145,000</td>
    300. </tr>
    301. <tr>
    302. <td>Gavin Cortez</td>
    303. <td>Team Leader</td>
    304. <td>San Francisco</td>
    305. <td>22</td>
    306. <td>2008/10/26</td>
    307. <td>$235,500</td>
    308. </tr>
    309. <tr>
    310. <td>Martena Mccray</td>
    311. <td>Post-Sales support</td>
    312. <td>Edinburgh</td>
    313. <td>46</td>
    314. <td>2011/03/09</td>
    315. <td>$324,050</td>
    316. </tr>
    317. <tr>
    318. <td>Unity Butler</td>
    319. <td>Marketing Designer</td>
    320. <td>San Francisco</td>
    321. <td>47</td>
    322. <td>2009/12/09</td>
    323. <td>$85,675</td>
    324. </tr>
    325. <tr>
    326. <td>Howard Hatfield</td>
    327. <td>Office Manager</td>
    328. <td>San Francisco</td>
    329. <td>51</td>
    330. <td>2008/12/16</td>
    331. <td>$164,500</td>
    332. </tr>
    333. <tr>
    334. <td>Hope Fuentes</td>
    335. <td>Secretary</td>
    336. <td>San Francisco</td>
    337. <td>41</td>
    338. <td>2010/02/12</td>
    339. <td>$109,850</td>
    340. </tr>
    341. <tr>
    342. <td>Vivian Harrell</td>
    343. <td>Financial Controller</td>
    344. <td>San Francisco</td>
    345. <td>62</td>
    346. <td>2009/02/14</td>
    347. <td>$452,500</td>
    348. </tr>
    349. <tr>
    350. <td>Timothy Mooney</td>
    351. <td>Office Manager</td>
    352. <td>London</td>
    353. <td>37</td>
    354. <td>2008/12/11</td>
    355. <td>$136,200</td>
    356. </tr>
    357. <tr>
    358. <td>Jackson Bradshaw</td>
    359. <td>Director</td>
    360. <td>New York</td>
    361. <td>65</td>
    362. <td>2008/09/26</td>
    363. <td>$645,750</td>
    364. </tr>
    365. <tr>
    366. <td>Olivia Liang</td>
    367. <td>Support Engineer</td>
    368. <td>Singapore</td>
    369. <td>64</td>
    370. <td>2011/02/03</td>
    371. <td>$234,500</td>
    372. </tr>
    373. <tr>
    374. <td>Bruno Nash</td>
    375. <td>Software Engineer</td>
    376. <td>London</td>
    377. <td>38</td>
    378. <td>2011/05/03</td>
    379. <td>$163,500</td>
    380. </tr>
    381. <tr>
    382. <td>Sakura Yamamoto</td>
    383. <td>Support Engineer</td>
    384. <td>Tokyo</td>
    385. <td>37</td>
    386. <td>2009/08/19</td>
    387. <td>$139,575</td>
    388. </tr>
    389. <tr>
    390. <td>Thor Walton</td>
    391. <td>Developer</td>
    392. <td>New York</td>
    393. <td>61</td>
    394. <td>2013/08/11</td>
    395. <td>$98,540</td>
    396. </tr>
    397. <tr>
    398. <td>Finn Camacho</td>
    399. <td>Support Engineer</td>
    400. <td>San Francisco</td>
    401. <td>47</td>
    402. <td>2009/07/07</td>
    403. <td>$87,500</td>
    404. </tr>
    405. <tr>
    406. <td>Serge Baldwin</td>
    407. <td>Data Coordinator</td>
    408. <td>Singapore</td>
    409. <td>64</td>
    410. <td>2012/04/09</td>
    411. <td>$138,575</td>
    412. </tr>
    413. <tr>
    414. <td>Zenaida Frank</td>
    415. <td>Software Engineer</td>
    416. <td>New York</td>
    417. <td>63</td>
    418. <td>2010/01/04</td>
    419. <td>$125,250</td>
    420. </tr>
    421. <tr>
    422. <td>Zorita Serrano</td>
    423. <td>Software Engineer</td>
    424. <td>San Francisco</td>
    425. <td>56</td>
    426. <td>2012/06/01</td>
    427. <td>$115,000</td>
    428. </tr>
    429. <tr>
    430. <td>Jennifer Acosta</td>
    431. <td>Junior Javascript Developer</td>
    432. <td>Edinburgh</td>
    433. <td>43</td>
    434. <td>2013/02/01</td>
    435. <td>$75,650</td>
    436. </tr>
    437. <tr>
    438. <td>Cara Stevens</td>
    439. <td>Sales Assistant</td>
    440. <td>New York</td>
    441. <td>46</td>
    442. <td>2011/12/06</td>
    443. <td>$145,600</td>
    444. </tr>
    445. <tr>
    446. <td>Hermione Butler</td>
    447. <td>Regional Director</td>
    448. <td>London</td>
    449. <td>47</td>
    450. <td>2011/03/21</td>
    451. <td>$356,250</td>
    452. </tr>
    453. <tr>
    454. <td>Lael Greer</td>
    455. <td>Systems Administrator</td>
    456. <td>London</td>
    457. <td>21</td>
    458. <td>2009/02/27</td>
    459. <td>$103,500</td>
    460. </tr>
    461. <tr>
    462. <td>Jonas Alexander</td>
    463. <td>Developer</td>
    464. <td>San Francisco</td>
    465. <td>30</td>
    466. <td>2010/07/14</td>
    467. <td>$86,500</td>
    468. </tr>
    469. <tr>
    470. <td>Shad Decker</td>
    471. <td>Regional Director</td>
    472. <td>Edinburgh</td>
    473. <td>51</td>
    474. <td>2008/11/13</td>
    475. <td>$183,000</td>
    476. </tr>
    477. <tr>
    478. <td>Michael Bruce</td>
    479. <td>Javascript Developer</td>
    480. <td>Singapore</td>
    481. <td>29</td>
    482. <td>2011/06/27</td>
    483. <td>$183,000</td>
    484. </tr>
    485. <tr>
    486. <td>Donna Snider</td>
    487. <td>Customer Support</td>
    488. <td>New York</td>
    489. <td>27</td>
    490. <td>2011/01/25</td>
    491. <td>$112,000</td>
    492. </tr>
    493. </tbody>
    494. </table>
    495. </body>


    Was ist der Grund für das manuelle Laden der Files, wenn man fragen darf?
    Hast du es so wie in meinem Spoiler schon einmal zum laufen gebracht?

    LG Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Acr0most“ ()

    Ja das hatte ich auch in einem externen HTML File. Unter Moodle jedoch wird bei diesem Plugin Type keine Möglichkeit gegeben die Skripte in den head zu schreiben. Funktioniert dies auch im Body ?

    Wenn ja dann werde ich das heute Mal probieren :)
    Erstmal vielen Dank für deine hilfreiche Antwort :)
    MFG 0x426c61636b4e6574776f726b426974
    InOffical VB-Paradise IRC-Server
    webchat.freenode.net/
    Channel : ##vbparadise
    Im Grunde ja, wie du siehst habe ich oben auch die Body Tags Vergessen :D
    Füge ich jetzt noch ein.

    Aber auch ohne Head-Tag werden Style- und Script-Files geladen.
    Ob das die feine Englische ist, ist die andere Frage.


    Woher kommt dann bei deinem Plugin das jQuery?
    Du verwendest bei deinem Code-Snippet vom #1 Post bereits jQuery-Syntax, das Script musst du ja auch irgendwo eingebunden haben.


    LG Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:
    Also ich hab noch ein wenig was gedreht und komme zu folgendem Ergebnis:

    Wenn du in einer document.ready function die Scripts nachlädst mit $.getScript() und gleich danach $('#example').DataTable() ausführst, dann geht das bei mir in die Brüche.
    Wenn du jedoch dieses $('#example').DataTable() in ein Event (bspw. Button Click) legst, funktioniert es erstmal ohne Probleme.

    Wenn du es nicht so machst die Scripts in den Body mit zu ziehen, ist dies vllt. eine Alternative.


    LG Acr0most
    Wenn das Leben wirklich nur aus Nullen und Einsen besteht, dann laufen sicherlich genügen Nullen frei herum. :D
    Signature-Move 8o
    kein Problem mit privaten Konversationen zu Thema XY :thumbup:
    Okay, ich probiere Mal ob ich das irgendwie einbauen kann. Jedoch soll der Script eine Tabelle aufteilen was direkt nach document ready passieren sollte.

    Edit :
    Habe es jetzt ohne hinbekommen das nachladen hinbekommen, habe die Sachen per HTML laden lassen und dann bei der jquery die Tabelle in einen seperaten Script Tag gepackt
    MFG 0x426c61636b4e6574776f726b426974
    InOffical VB-Paradise IRC-Server
    webchat.freenode.net/
    Channel : ##vbparadise

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „BlackNetworkBit“ ()