5.4/javascript/legacy-api/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  14
  15
  16
  17         <title>Legacy API - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#legacy-javascript-api" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Legacy API
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595     <li class="md-nav__item md-nav__item--nested">
 596
 597
 598         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 599
 600       <label class="md-nav__link" for="__nav_3">
 601         Languages, Templates & CSS
 602         <span class="md-nav__icon md-icon"></span>
 603       </label>
 604       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 605         <label class="md-nav__title" for="__nav_3">
 606           <span class="md-nav__icon md-icon"></span>
 607           Languages, Templates & CSS
 608         </label>
 609         <ul class="md-nav__list" data-md-scrollfix>
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../view/languages/" class="md-nav__link">
 617         Languages
 618       </a>
 619     </li>
 620
 621
 622
 623
 624
 625
 626
 627     <li class="md-nav__item">
 628       <a href="../../view/templates/" class="md-nav__link">
 629         Templates
 630       </a>
 631     </li>
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../view/template-plugins/" class="md-nav__link">
 641         Template Plugins
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item">
 652       <a href="../../view/css/" class="md-nav__link">
 653         CSS
 654       </a>
 655     </li>
 656
 657
 658
 659         </ul>
 660       </nav>
 661     </li>
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 676
 677
 678         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 679
 680       <label class="md-nav__link" for="__nav_4">
 681         TypeScript and JavaScript API
 682         <span class="md-nav__icon md-icon"></span>
 683       </label>
 684       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 685         <label class="md-nav__title" for="__nav_4">
 686           <span class="md-nav__icon md-icon"></span>
 687           TypeScript and JavaScript API
 688         </label>
 689         <ul class="md-nav__list" data-md-scrollfix>
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../general-usage/" class="md-nav__link">
 697         General Usage
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707     <li class="md-nav__item">
 708       <a href="../typescript/" class="md-nav__link">
 709         TypeScript
 710       </a>
 711     </li>
 712
 713
 714
 715
 716
 717
 718
 719
 720     <li class="md-nav__item md-nav__item--nested">
 721
 722
 723         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 724
 725       <label class="md-nav__link" for="__nav_4_3">
 726         New API
 727         <span class="md-nav__icon md-icon"></span>
 728       </label>
 729       <nav class="md-nav" aria-label="New API" data-md-level="2">
 730         <label class="md-nav__title" for="__nav_4_3">
 731           <span class="md-nav__icon md-icon"></span>
 732           New API
 733         </label>
 734         <ul class="md-nav__list" data-md-scrollfix>
 735
 736
 737
 738
 739
 740     <li class="md-nav__item">
 741       <a href="../new-api_writing-a-module/" class="md-nav__link">
 742         Writing a module
 743       </a>
 744     </li>
 745
 746
 747
 748
 749
 750
 751
 752     <li class="md-nav__item">
 753       <a href="../new-api_data-structures/" class="md-nav__link">
 754         Data Structures
 755       </a>
 756     </li>
 757
 758
 759
 760
 761
 762
 763
 764     <li class="md-nav__item">
 765       <a href="../new-api_core/" class="md-nav__link">
 766         Core Functions
 767       </a>
 768     </li>
 769
 770
 771
 772
 773
 774
 775
 776     <li class="md-nav__item">
 777       <a href="../new-api_dom/" class="md-nav__link">
 778         DOM
 779       </a>
 780     </li>
 781
 782
 783
 784
 785
 786
 787
 788     <li class="md-nav__item">
 789       <a href="../new-api_events/" class="md-nav__link">
 790         Event Handling
 791       </a>
 792     </li>
 793
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item">
 801       <a href="../new-api_ajax/" class="md-nav__link">
 802         Ajax
 803       </a>
 804     </li>
 805
 806
 807
 808
 809
 810
 811
 812     <li class="md-nav__item">
 813       <a href="../new-api_dialogs/" class="md-nav__link">
 814         Dialogs
 815       </a>
 816     </li>
 817
 818
 819
 820
 821
 822
 823
 824     <li class="md-nav__item">
 825       <a href="../new-api_browser/" class="md-nav__link">
 826         Browser and Screen Sizes
 827       </a>
 828     </li>
 829
 830
 831
 832
 833
 834
 835
 836     <li class="md-nav__item">
 837       <a href="../new-api_ui/" class="md-nav__link">
 838         User Interface
 839       </a>
 840     </li>
 841
 842
 843
 844         </ul>
 845       </nav>
 846     </li>
 847
 848
 849
 850
 851
 852
 853
 854
 855
 856     <li class="md-nav__item md-nav__item--active">
 857
 858       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 859
 860
 861
 862
 863
 864         <label class="md-nav__link md-nav__link--active" for="__toc">
 865           Legacy API
 866           <span class="md-nav__icon md-icon"></span>
 867         </label>
 868
 869       <a href="./" class="md-nav__link md-nav__link--active">
 870         Legacy API
 871       </a>
 872
 873
 874 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 875
 876
 877
 878
 879
 880
 881     <label class="md-nav__title" for="__toc">
 882       <span class="md-nav__icon md-icon"></span>
 883       Table of contents
 884     </label>
 885     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 886
 887         <li class="md-nav__item">
 888   <a href="#introduction" class="md-nav__link">
 889     Introduction
 890   </a>
 891
 892 </li>
 893
 894         <li class="md-nav__item">
 895   <a href="#classes" class="md-nav__link">
 896     Classes
 897   </a>
 898
 899     <nav class="md-nav" aria-label="Classes">
 900       <ul class="md-nav__list">
 901
 902           <li class="md-nav__item">
 903   <a href="#singletons" class="md-nav__link">
 904     Singletons
 905   </a>
 906
 907 </li>
 908
 909           <li class="md-nav__item">
 910   <a href="#regular-classes" class="md-nav__link">
 911     Regular Classes
 912   </a>
 913
 914     <nav class="md-nav" aria-label="Regular Classes">
 915       <ul class="md-nav__list">
 916
 917           <li class="md-nav__item">
 918   <a href="#inheritance" class="md-nav__link">
 919     Inheritance
 920   </a>
 921
 922 </li>
 923
 924       </ul>
 925     </nav>
 926
 927 </li>
 928
 929       </ul>
 930     </nav>
 931
 932 </li>
 933
 934         <li class="md-nav__item">
 935   <a href="#ajax-requests" class="md-nav__link">
 936     Ajax Requests
 937   </a>
 938
 939 </li>
 940
 941         <li class="md-nav__item">
 942   <a href="#phrases" class="md-nav__link">
 943     Phrases
 944   </a>
 945
 946 </li>
 947
 948         <li class="md-nav__item">
 949   <a href="#event-listener" class="md-nav__link">
 950     Event-Listener
 951   </a>
 952
 953 </li>
 954
 955     </ul>
 956
 957 </nav>
 958
 959     </li>
 960
 961
 962
 963
 964
 965
 966
 967     <li class="md-nav__item">
 968       <a href="../helper-functions/" class="md-nav__link">
 969         Helper Functions
 970       </a>
 971     </li>
 972
 973
 974
 975
 976
 977
 978
 979     <li class="md-nav__item">
 980       <a href="../code-snippets/" class="md-nav__link">
 981         Code Snippets
 982       </a>
 983     </li>
 984
 985
 986
 987         </ul>
 988       </nav>
 989     </li>
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001     <li class="md-nav__item md-nav__item--nested">
1002
1003
1004         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1005
1006       <label class="md-nav__link" for="__nav_5">
1007         Package Components
1008         <span class="md-nav__icon md-icon"></span>
1009       </label>
1010       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1011         <label class="md-nav__title" for="__nav_5">
1012           <span class="md-nav__icon md-icon"></span>
1013           Package Components
1014         </label>
1015         <ul class="md-nav__list" data-md-scrollfix>
1016
1017
1018
1019
1020
1021     <li class="md-nav__item">
1022       <a href="../../package/package-xml/" class="md-nav__link">
1023         package.xml
1024       </a>
1025     </li>
1026
1027
1028
1029
1030
1031
1032
1033
1034     <li class="md-nav__item md-nav__item--nested">
1035
1036
1037         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1038
1039       <label class="md-nav__link" for="__nav_5_2">
1040         PIPs
1041         <span class="md-nav__icon md-icon"></span>
1042       </label>
1043       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1044         <label class="md-nav__title" for="__nav_5_2">
1045           <span class="md-nav__icon md-icon"></span>
1046           PIPs
1047         </label>
1048         <ul class="md-nav__list" data-md-scrollfix>
1049
1050
1051
1052
1053
1054     <li class="md-nav__item">
1055       <a href="../../package/pip/" class="md-nav__link">
1056         Overview
1057       </a>
1058     </li>
1059
1060
1061
1062
1063
1064
1065
1066     <li class="md-nav__item">
1067       <a href="../../package/pip/acl-option/" class="md-nav__link">
1068         aclOption
1069       </a>
1070     </li>
1071
1072
1073
1074
1075
1076
1077
1078     <li class="md-nav__item">
1079       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1080         acpMenu
1081       </a>
1082     </li>
1083
1084
1085
1086
1087
1088
1089
1090     <li class="md-nav__item">
1091       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1092         acpSearchProvider
1093       </a>
1094     </li>
1095
1096
1097
1098
1099
1100
1101
1102     <li class="md-nav__item">
1103       <a href="../../package/pip/acp-template/" class="md-nav__link">
1104         acpTemplate
1105       </a>
1106     </li>
1107
1108
1109
1110
1111
1112
1113
1114     <li class="md-nav__item">
1115       <a href="../../package/pip/bbcode/" class="md-nav__link">
1116         bbcode
1117       </a>
1118     </li>
1119
1120
1121
1122
1123
1124
1125
1126     <li class="md-nav__item">
1127       <a href="../../package/pip/box/" class="md-nav__link">
1128         box
1129       </a>
1130     </li>
1131
1132
1133
1134
1135
1136
1137
1138     <li class="md-nav__item">
1139       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1140         clipboardAction
1141       </a>
1142     </li>
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item">
1151       <a href="../../package/pip/core-object/" class="md-nav__link">
1152         coreObject
1153       </a>
1154     </li>
1155
1156
1157
1158
1159
1160
1161
1162     <li class="md-nav__item">
1163       <a href="../../package/pip/cronjob/" class="md-nav__link">
1164         cronjob
1165       </a>
1166     </li>
1167
1168
1169
1170
1171
1172
1173
1174     <li class="md-nav__item">
1175       <a href="../../package/pip/database/" class="md-nav__link">
1176         database
1177       </a>
1178     </li>
1179
1180
1181
1182
1183
1184
1185
1186     <li class="md-nav__item">
1187       <a href="../../package/pip/event-listener/" class="md-nav__link">
1188         eventListener
1189       </a>
1190     </li>
1191
1192
1193
1194
1195
1196
1197
1198     <li class="md-nav__item">
1199       <a href="../../package/pip/file/" class="md-nav__link">
1200         file
1201       </a>
1202     </li>
1203
1204
1205
1206
1207
1208
1209
1210     <li class="md-nav__item">
1211       <a href="../../package/pip/language/" class="md-nav__link">
1212         language
1213       </a>
1214     </li>
1215
1216
1217
1218
1219
1220
1221
1222     <li class="md-nav__item">
1223       <a href="../../package/pip/media-provider/" class="md-nav__link">
1224         mediaProvider
1225       </a>
1226     </li>
1227
1228
1229
1230
1231
1232
1233
1234     <li class="md-nav__item">
1235       <a href="../../package/pip/menu/" class="md-nav__link">
1236         menu
1237       </a>
1238     </li>
1239
1240
1241
1242
1243
1244
1245
1246     <li class="md-nav__item">
1247       <a href="../../package/pip/menu-item/" class="md-nav__link">
1248         menuItem
1249       </a>
1250     </li>
1251
1252
1253
1254
1255
1256
1257
1258     <li class="md-nav__item">
1259       <a href="../../package/pip/object-type/" class="md-nav__link">
1260         objectType
1261       </a>
1262     </li>
1263
1264
1265
1266
1267
1268
1269
1270     <li class="md-nav__item">
1271       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1272         objectTypeDefinition
1273       </a>
1274     </li>
1275
1276
1277
1278
1279
1280
1281
1282     <li class="md-nav__item">
1283       <a href="../../package/pip/option/" class="md-nav__link">
1284         option
1285       </a>
1286     </li>
1287
1288
1289
1290
1291
1292
1293
1294     <li class="md-nav__item">
1295       <a href="../../package/pip/page/" class="md-nav__link">
1296         page
1297       </a>
1298     </li>
1299
1300
1301
1302
1303
1304
1305
1306     <li class="md-nav__item">
1307       <a href="../../package/pip/pip/" class="md-nav__link">
1308         pip
1309       </a>
1310     </li>
1311
1312
1313
1314
1315
1316
1317
1318     <li class="md-nav__item">
1319       <a href="../../package/pip/script/" class="md-nav__link">
1320         script
1321       </a>
1322     </li>
1323
1324
1325
1326
1327
1328
1329
1330     <li class="md-nav__item">
1331       <a href="../../package/pip/smiley/" class="md-nav__link">
1332         smiley
1333       </a>
1334     </li>
1335
1336
1337
1338
1339
1340
1341
1342     <li class="md-nav__item">
1343       <a href="../../package/pip/sql/" class="md-nav__link">
1344         sql
1345       </a>
1346     </li>
1347
1348
1349
1350
1351
1352
1353
1354     <li class="md-nav__item">
1355       <a href="../../package/pip/style/" class="md-nav__link">
1356         style
1357       </a>
1358     </li>
1359
1360
1361
1362
1363
1364
1365
1366     <li class="md-nav__item">
1367       <a href="../../package/pip/template/" class="md-nav__link">
1368         template
1369       </a>
1370     </li>
1371
1372
1373
1374
1375
1376
1377
1378     <li class="md-nav__item">
1379       <a href="../../package/pip/template-listener/" class="md-nav__link">
1380         templateListener
1381       </a>
1382     </li>
1383
1384
1385
1386
1387
1388
1389
1390     <li class="md-nav__item">
1391       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1392         userGroupOption
1393       </a>
1394     </li>
1395
1396
1397
1398
1399
1400
1401
1402     <li class="md-nav__item">
1403       <a href="../../package/pip/user-menu/" class="md-nav__link">
1404         userMenu
1405       </a>
1406     </li>
1407
1408
1409
1410
1411
1412
1413
1414     <li class="md-nav__item">
1415       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1416         userNotificationEvent
1417       </a>
1418     </li>
1419
1420
1421
1422
1423
1424
1425
1426     <li class="md-nav__item">
1427       <a href="../../package/pip/user-option/" class="md-nav__link">
1428         userOption
1429       </a>
1430     </li>
1431
1432
1433
1434
1435
1436
1437
1438     <li class="md-nav__item">
1439       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1440         userProfileMenu
1441       </a>
1442     </li>
1443
1444
1445
1446         </ul>
1447       </nav>
1448     </li>
1449
1450
1451
1452
1453
1454
1455
1456     <li class="md-nav__item">
1457       <a href="../../package/database-php-api/" class="md-nav__link">
1458         Database PHP API
1459       </a>
1460     </li>
1461
1462
1463
1464         </ul>
1465       </nav>
1466     </li>
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478     <li class="md-nav__item md-nav__item--nested">
1479
1480
1481         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1482
1483       <label class="md-nav__link" for="__nav_6">
1484         Migration
1485         <span class="md-nav__icon md-icon"></span>
1486       </label>
1487       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1488         <label class="md-nav__title" for="__nav_6">
1489           <span class="md-nav__icon md-icon"></span>
1490           Migration
1491         </label>
1492         <ul class="md-nav__list" data-md-scrollfix>
1493
1494
1495
1496
1497
1498
1499     <li class="md-nav__item md-nav__item--nested">
1500
1501
1502         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1503
1504       <label class="md-nav__link" for="__nav_6_1">
1505         Migrating from WSC 5.3
1506         <span class="md-nav__icon md-icon"></span>
1507       </label>
1508       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1509         <label class="md-nav__title" for="__nav_6_1">
1510           <span class="md-nav__icon md-icon"></span>
1511           Migrating from WSC 5.3
1512         </label>
1513         <ul class="md-nav__list" data-md-scrollfix>
1514
1515
1516
1517
1518
1519     <li class="md-nav__item">
1520       <a href="../../migration/wsc53/php/" class="md-nav__link">
1521         PHP API
1522       </a>
1523     </li>
1524
1525
1526
1527
1528
1529
1530
1531     <li class="md-nav__item">
1532       <a href="../../migration/wsc53/session/" class="md-nav__link">
1533         Session Handling and Authentication
1534       </a>
1535     </li>
1536
1537
1538
1539
1540
1541
1542
1543     <li class="md-nav__item">
1544       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1545         TypeScript and JavaScript
1546       </a>
1547     </li>
1548
1549
1550
1551
1552
1553
1554
1555     <li class="md-nav__item">
1556       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1557         Templates
1558       </a>
1559     </li>
1560
1561
1562
1563
1564
1565
1566
1567     <li class="md-nav__item">
1568       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1569         Third Party Libraries
1570       </a>
1571     </li>
1572
1573
1574
1575         </ul>
1576       </nav>
1577     </li>
1578
1579
1580
1581
1582
1583
1584
1585
1586     <li class="md-nav__item md-nav__item--nested">
1587
1588
1589         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1590
1591       <label class="md-nav__link" for="__nav_6_2">
1592         Migrating from WSC 5.2
1593         <span class="md-nav__icon md-icon"></span>
1594       </label>
1595       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1596         <label class="md-nav__title" for="__nav_6_2">
1597           <span class="md-nav__icon md-icon"></span>
1598           Migrating from WSC 5.2
1599         </label>
1600         <ul class="md-nav__list" data-md-scrollfix>
1601
1602
1603
1604
1605
1606     <li class="md-nav__item">
1607       <a href="../../migration/wsc52/php/" class="md-nav__link">
1608         PHP API
1609       </a>
1610     </li>
1611
1612
1613
1614
1615
1616
1617
1618     <li class="md-nav__item">
1619       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1620         Templates and Languages
1621       </a>
1622     </li>
1623
1624
1625
1626
1627
1628
1629
1630     <li class="md-nav__item">
1631       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1632         Third Party Libraries
1633       </a>
1634     </li>
1635
1636
1637
1638         </ul>
1639       </nav>
1640     </li>
1641
1642
1643
1644
1645
1646
1647
1648
1649     <li class="md-nav__item md-nav__item--nested">
1650
1651
1652         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1653
1654       <label class="md-nav__link" for="__nav_6_3">
1655         Migrating from WSC 3.1
1656         <span class="md-nav__icon md-icon"></span>
1657       </label>
1658       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1659         <label class="md-nav__title" for="__nav_6_3">
1660           <span class="md-nav__icon md-icon"></span>
1661           Migrating from WSC 3.1
1662         </label>
1663         <ul class="md-nav__list" data-md-scrollfix>
1664
1665
1666
1667
1668
1669     <li class="md-nav__item">
1670       <a href="../../migration/wsc31/php/" class="md-nav__link">
1671         PHP API
1672       </a>
1673     </li>
1674
1675
1676
1677         </ul>
1678       </nav>
1679     </li>
1680
1681
1682
1683
1684
1685
1686
1687
1688     <li class="md-nav__item md-nav__item--nested">
1689
1690
1691         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1692
1693       <label class="md-nav__link" for="__nav_6_4">
1694         Migrating from WSC 3.0
1695         <span class="md-nav__icon md-icon"></span>
1696       </label>
1697       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1698         <label class="md-nav__title" for="__nav_6_4">
1699           <span class="md-nav__icon md-icon"></span>
1700           Migrating from WSC 3.0
1701         </label>
1702         <ul class="md-nav__list" data-md-scrollfix>
1703
1704
1705
1706
1707
1708     <li class="md-nav__item">
1709       <a href="../../migration/wsc30/php/" class="md-nav__link">
1710         PHP API
1711       </a>
1712     </li>
1713
1714
1715
1716
1717
1718
1719
1720     <li class="md-nav__item">
1721       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1722         JavaScript API
1723       </a>
1724     </li>
1725
1726
1727
1728
1729
1730
1731
1732     <li class="md-nav__item">
1733       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1734         Templates
1735       </a>
1736     </li>
1737
1738
1739
1740
1741
1742
1743
1744     <li class="md-nav__item">
1745       <a href="../../migration/wsc30/css/" class="md-nav__link">
1746         CSS
1747       </a>
1748     </li>
1749
1750
1751
1752
1753
1754
1755
1756     <li class="md-nav__item">
1757       <a href="../../migration/wsc30/package/" class="md-nav__link">
1758         Package Components
1759       </a>
1760     </li>
1761
1762
1763
1764         </ul>
1765       </nav>
1766     </li>
1767
1768
1769
1770
1771
1772
1773
1774
1775     <li class="md-nav__item md-nav__item--nested">
1776
1777
1778         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1779
1780       <label class="md-nav__link" for="__nav_6_5">
1781         Migrating from WCF 2.1
1782         <span class="md-nav__icon md-icon"></span>
1783       </label>
1784       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1785         <label class="md-nav__title" for="__nav_6_5">
1786           <span class="md-nav__icon md-icon"></span>
1787           Migrating from WCF 2.1
1788         </label>
1789         <ul class="md-nav__list" data-md-scrollfix>
1790
1791
1792
1793
1794
1795     <li class="md-nav__item">
1796       <a href="../../migration/wcf21/php/" class="md-nav__link">
1797         PHP API
1798       </a>
1799     </li>
1800
1801
1802
1803
1804
1805
1806
1807     <li class="md-nav__item">
1808       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1809         Templates
1810       </a>
1811     </li>
1812
1813
1814
1815
1816
1817
1818
1819     <li class="md-nav__item">
1820       <a href="../../migration/wcf21/css/" class="md-nav__link">
1821         CSS
1822       </a>
1823     </li>
1824
1825
1826
1827
1828
1829
1830
1831     <li class="md-nav__item">
1832       <a href="../../migration/wcf21/package/" class="md-nav__link">
1833         Package Components
1834       </a>
1835     </li>
1836
1837
1838
1839         </ul>
1840       </nav>
1841     </li>
1842
1843
1844
1845         </ul>
1846       </nav>
1847     </li>
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859     <li class="md-nav__item md-nav__item--nested">
1860
1861
1862         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1863
1864       <label class="md-nav__link" for="__nav_7">
1865         Tutorials
1866         <span class="md-nav__icon md-icon"></span>
1867       </label>
1868       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1869         <label class="md-nav__title" for="__nav_7">
1870           <span class="md-nav__icon md-icon"></span>
1871           Tutorials
1872         </label>
1873         <ul class="md-nav__list" data-md-scrollfix>
1874
1875
1876
1877
1878
1879
1880     <li class="md-nav__item md-nav__item--nested">
1881
1882
1883         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1884
1885       <label class="md-nav__link" for="__nav_7_1">
1886         Tutorial Series
1887         <span class="md-nav__icon md-icon"></span>
1888       </label>
1889       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1890         <label class="md-nav__title" for="__nav_7_1">
1891           <span class="md-nav__icon md-icon"></span>
1892           Tutorial Series
1893         </label>
1894         <ul class="md-nav__list" data-md-scrollfix>
1895
1896
1897
1898
1899
1900     <li class="md-nav__item">
1901       <a href="../../tutorial/series/overview/" class="md-nav__link">
1902         Overview
1903       </a>
1904     </li>
1905
1906
1907
1908
1909
1910
1911
1912     <li class="md-nav__item">
1913       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1914         Part 1
1915       </a>
1916     </li>
1917
1918
1919
1920
1921
1922
1923
1924     <li class="md-nav__item">
1925       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1926         Part 2
1927       </a>
1928     </li>
1929
1930
1931
1932
1933
1934
1935
1936     <li class="md-nav__item">
1937       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1938         Part 3
1939       </a>
1940     </li>
1941
1942
1943
1944
1945
1946
1947
1948     <li class="md-nav__item">
1949       <a href="../../tutorial/series/part_4/" class="md-nav__link">
1950         Part 4
1951       </a>
1952     </li>
1953
1954
1955
1956         </ul>
1957       </nav>
1958     </li>
1959
1960
1961
1962         </ul>
1963       </nav>
1964     </li>
1965
1966
1967
1968   </ul>
1969 </nav>
1970                   </div>
1971                 </div>
1972               </div>
1973
1974
1975
1976               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1977                 <div class="md-sidebar__scrollwrap">
1978                   <div class="md-sidebar__inner">
1979
1980 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1981
1982
1983
1984
1985
1986
1987     <label class="md-nav__title" for="__toc">
1988       <span class="md-nav__icon md-icon"></span>
1989       Table of contents
1990     </label>
1991     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1992
1993         <li class="md-nav__item">
1994   <a href="#introduction" class="md-nav__link">
1995     Introduction
1996   </a>
1997
1998 </li>
1999
2000         <li class="md-nav__item">
2001   <a href="#classes" class="md-nav__link">
2002     Classes
2003   </a>
2004
2005     <nav class="md-nav" aria-label="Classes">
2006       <ul class="md-nav__list">
2007
2008           <li class="md-nav__item">
2009   <a href="#singletons" class="md-nav__link">
2010     Singletons
2011   </a>
2012
2013 </li>
2014
2015           <li class="md-nav__item">
2016   <a href="#regular-classes" class="md-nav__link">
2017     Regular Classes
2018   </a>
2019
2020     <nav class="md-nav" aria-label="Regular Classes">
2021       <ul class="md-nav__list">
2022
2023           <li class="md-nav__item">
2024   <a href="#inheritance" class="md-nav__link">
2025     Inheritance
2026   </a>
2027
2028 </li>
2029
2030       </ul>
2031     </nav>
2032
2033 </li>
2034
2035       </ul>
2036     </nav>
2037
2038 </li>
2039
2040         <li class="md-nav__item">
2041   <a href="#ajax-requests" class="md-nav__link">
2042     Ajax Requests
2043   </a>
2044
2045 </li>
2046
2047         <li class="md-nav__item">
2048   <a href="#phrases" class="md-nav__link">
2049     Phrases
2050   </a>
2051
2052 </li>
2053
2054         <li class="md-nav__item">
2055   <a href="#event-listener" class="md-nav__link">
2056     Event-Listener
2057   </a>
2058
2059 </li>
2060
2061     </ul>
2062
2063 </nav>
2064                   </div>
2065                 </div>
2066               </div>
2067
2068
2069           <div class="md-content" data-md-component="content">
2070             <article class="md-content__inner md-typeset">
2071
2072
2073                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/legacy-api.md" title="Edit this page" class="md-content__button md-icon">
2074                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2075                   </a>
2076
2077
2078                 <h1 id="legacy-javascript-api">Legacy JavaScript API<a class="headerlink" href="#legacy-javascript-api" title="Permanent link">#</a></h1>
2079 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
2080 <p>The legacy JavaScript API is the original code that was part of the 2.x series
2081 of WoltLab Suite, formerly known as WoltLab Community Framework. It has been
2082 superseded for the most part by the <a href="../new-api_writing-a-module/">ES5/AMD-modules API</a>
2083 introduced with WoltLab Suite 3.0.</p>
2084 <p>Some parts still exist to this day for backwards-compatibility and because some
2085 less important components have not been rewritten yet. The old API is still
2086 supported, but marked as deprecated and will continue to be replaced parts by
2087 part in future releases, up until their entire removal, including jQuery support.</p>
2088 <p>This guide does not provide any explanation on the usage of those legacy components,
2089 but instead serves as a cheat sheet to convert code to use the new API.</p>
2090 <h2 id="classes">Classes<a class="headerlink" href="#classes" title="Permanent link">#</a></h2>
2091 <h3 id="singletons">Singletons<a class="headerlink" href="#singletons" title="Permanent link">#</a></h3>
2092 <p>Singleton instances are designed to provide a unique "instance" of an object
2093 regardless of when its first instance was created. Due to the lack of a <code>class</code>
2094 construct in ES5, they are represented by mere objects that act as an instance.</p>
2095 <div class="highlight"><pre><span></span><code><span class="c1">// App.js</span>
2096 <span class="nb">window</span><span class="p">.</span><span class="nx">App</span> <span class="o">=</span> <span class="p">{};</span>
2097 <span class="nx">App</span><span class="p">.</span><span class="nx">Foo</span> <span class="o">=</span> <span class="p">{</span>
2098   <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2099 <span class="p">};</span>
2100
2101 <span class="c1">// --- NEW API ---</span>
2102
2103 <span class="c1">// App/Foo.js</span>
2104 <span class="nx">define</span><span class="p">([],</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2105   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2106
2107   <span class="k">return</span> <span class="p">{</span>
2108     <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2109   <span class="p">};</span>
2110 <span class="p">});</span>
2111 </code></pre></div>
2112 <h3 id="regular-classes">Regular Classes<a class="headerlink" href="#regular-classes" title="Permanent link">#</a></h3>
2113 <div class="highlight"><pre><span></span><code><span class="c1">// App.js</span>
2114 <span class="nb">window</span><span class="p">.</span><span class="nx">App</span> <span class="o">=</span> <span class="p">{};</span>
2115 <span class="nx">App</span><span class="p">.</span><span class="nx">Foo</span> <span class="o">=</span> <span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
2116   <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2117 <span class="p">});</span>
2118
2119 <span class="c1">// --- NEW API ---</span>
2120
2121 <span class="c1">// App/Foo.js</span>
2122 <span class="nx">define</span><span class="p">([],</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2123   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2124
2125   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{};</span>
2126   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
2127     <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2128   <span class="p">};</span>
2129
2130   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
2131 <span class="p">});</span>
2132 </code></pre></div>
2133 <h4 id="inheritance">Inheritance<a class="headerlink" href="#inheritance" title="Permanent link">#</a></h4>
2134 <div class="highlight"><pre><span></span><code><span class="c1">// App.js</span>
2135 <span class="nb">window</span><span class="p">.</span><span class="nx">App</span> <span class="o">=</span> <span class="p">{};</span>
2136 <span class="nx">App</span><span class="p">.</span><span class="nx">Foo</span> <span class="o">=</span> <span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
2137   <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2138 <span class="p">});</span>
2139 <span class="nx">App</span><span class="p">.</span><span class="nx">Baz</span> <span class="o">=</span> <span class="nx">App</span><span class="p">.</span><span class="nx">Foo</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
2140   <span class="nx">makeSnafucated</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2141 <span class="p">});</span>
2142
2143 <span class="c1">// --- NEW API ---</span>
2144
2145 <span class="c1">// App/Foo.js</span>
2146 <span class="nx">define</span><span class="p">([],</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2147   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2148
2149   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{};</span>
2150   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
2151     <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2152   <span class="p">};</span>
2153
2154   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
2155 <span class="p">});</span>
2156
2157 <span class="c1">// App/Baz.js</span>
2158 <span class="nx">define</span><span class="p">([</span><span class="s2">&quot;Core&quot;</span><span class="p">,</span> <span class="s2">&quot;./Foo&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Core</span><span class="p">,</span> <span class="nx">Foo</span><span class="p">)</span> <span class="p">{</span>
2159   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2160
2161   <span class="kd">function</span> <span class="nx">Baz</span><span class="p">()</span> <span class="p">{};</span>
2162   <span class="nx">Core</span><span class="p">.</span><span class="nx">inherit</span><span class="p">(</span><span class="nx">Baz</span><span class="p">,</span> <span class="nx">Foo</span><span class="p">,</span> <span class="p">{</span>
2163     <span class="nx">makeSnafucated</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{}</span>
2164   <span class="p">});</span>
2165
2166   <span class="k">return</span> <span class="nx">Baz</span><span class="p">;</span>
2167 <span class="p">});</span>
2168 </code></pre></div>
2169 <h2 id="ajax-requests">Ajax Requests<a class="headerlink" href="#ajax-requests" title="Permanent link">#</a></h2>
2170 <div class="highlight"><pre><span></span><code><span class="c1">// App.js</span>
2171 <span class="nx">App</span><span class="p">.</span><span class="nx">Foo</span> <span class="o">=</span> <span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
2172   <span class="nx">_proxy</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
2173
2174   <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2175     <span class="k">this</span><span class="p">.</span><span class="nx">_proxy</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WCF</span><span class="p">.</span><span class="nx">Action</span><span class="p">.</span><span class="nb">Proxy</span><span class="p">({</span>
2176       <span class="nx">success</span><span class="o">:</span> <span class="nx">$</span><span class="p">.</span><span class="nx">proxy</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_success</span><span class="p">,</span> <span class="k">this</span><span class="p">)</span>
2177     <span class="p">});</span>
2178   <span class="p">},</span>
2179
2180   <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2181     <span class="k">this</span><span class="p">.</span><span class="nx">_proxy</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="s2">&quot;data&quot;</span><span class="p">,</span> <span class="p">{</span>
2182       <span class="nx">actionName</span><span class="o">:</span> <span class="s2">&quot;baz&quot;</span><span class="p">,</span>
2183       <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;app\\foo\\FooAction&quot;</span><span class="p">,</span>
2184       <span class="nx">objectIDs</span><span class="o">:</span> <span class="p">[</span><span class="mf">1</span><span class="p">,</span> <span class="mf">2</span><span class="p">,</span> <span class="mf">3</span><span class="p">],</span>
2185       <span class="nx">parameters</span><span class="o">:</span> <span class="p">{</span>
2186         <span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span><span class="p">,</span>
2187         <span class="nx">baz</span><span class="o">:</span> <span class="kc">true</span>
2188       <span class="p">}</span>
2189     <span class="p">});</span>
2190     <span class="k">this</span><span class="p">.</span><span class="nx">_proxy</span><span class="p">.</span><span class="nx">sendRequest</span><span class="p">();</span>
2191   <span class="p">},</span>
2192
2193   <span class="nx">_success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
2194     <span class="c1">// ajax request result</span>
2195   <span class="p">}</span>
2196 <span class="p">});</span>
2197
2198 <span class="c1">// --- NEW API ---</span>
2199
2200 <span class="c1">// App/Foo.js</span>
2201 <span class="nx">define</span><span class="p">([</span><span class="s2">&quot;Ajax&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Ajax</span><span class="p">)</span> <span class="p">{</span>
2202   <span class="s2">&quot;use strict&quot;</span><span class="p">;</span>
2203
2204   <span class="kd">function</span> <span class="nx">Foo</span><span class="p">()</span> <span class="p">{}</span>
2205   <span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
2206     <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2207       <span class="nx">Ajax</span><span class="p">.</span><span class="nx">api</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="p">{</span>
2208         <span class="nx">objectIDs</span><span class="o">:</span> <span class="p">[</span><span class="mf">1</span><span class="p">,</span> <span class="mf">2</span><span class="p">,</span> <span class="mf">3</span><span class="p">],</span>
2209         <span class="nx">parameters</span><span class="o">:</span> <span class="p">{</span>
2210           <span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span><span class="p">,</span>
2211           <span class="nx">baz</span><span class="o">:</span> <span class="kc">true</span>
2212         <span class="p">}</span>
2213       <span class="p">});</span>
2214     <span class="p">},</span>
2215
2216     <span class="c1">// magic method!</span>
2217     <span class="nx">_ajaxSuccess</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
2218       <span class="c1">// ajax request result</span>
2219     <span class="p">},</span>
2220
2221     <span class="c1">// magic method!</span>
2222     <span class="nx">_ajaxSetup</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2223       <span class="k">return</span> <span class="p">{</span>
2224         <span class="nx">actionName</span><span class="o">:</span> <span class="s2">&quot;baz&quot;</span><span class="p">,</span>
2225         <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;app\\foo\\FooAction&quot;</span>
2226       <span class="p">}</span>
2227     <span class="p">}</span>
2228   <span class="p">}</span>
2229
2230   <span class="k">return</span> <span class="nx">Foo</span><span class="p">;</span>
2231 <span class="p">});</span>
2232 </code></pre></div>
2233 <h2 id="phrases">Phrases<a class="headerlink" href="#phrases" title="Permanent link">#</a></h2>
2234 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
2235 <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2236   <span class="nx">WCF</span><span class="p">.</span><span class="nx">Language</span><span class="p">.</span><span class="nx">addObject</span><span class="p">({</span>
2237     <span class="s1">&#39;app.foo.bar&#39;</span><span class="o">:</span> <span class="s1">&#39;{lang}app.foo.bar{/lang}&#39;</span>
2238   <span class="p">});</span>
2239
2240   <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">WCF</span><span class="p">.</span><span class="nx">Language</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">));</span>
2241 <span class="p">});</span>
2242 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2243
2244 <span class="c">&lt;!-- NEW API --&gt;</span>
2245
2246 <span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
2247 <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Language&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Language</span><span class="p">)</span> <span class="p">{</span>
2248   <span class="nx">Language</span><span class="p">.</span><span class="nx">addObject</span><span class="p">({</span>
2249     <span class="s1">&#39;app.foo.bar&#39;</span><span class="o">:</span> <span class="s1">&#39;{jslang}app.foo.bar{/jslang}&#39;</span>
2250   <span class="p">});</span>
2251
2252   <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Language</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">));</span>
2253 <span class="p">});</span>
2254 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2255 </code></pre></div>
2256 <h2 id="event-listener">Event-Listener<a class="headerlink" href="#event-listener" title="Permanent link">#</a></h2>
2257 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
2258 <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2259   <span class="nx">WCF</span><span class="p">.</span><span class="nx">System</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">,</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
2260     <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Event was invoked.&quot;</span><span class="p">);</span>
2261   <span class="p">});</span>
2262
2263   <span class="nx">WCF</span><span class="p">.</span><span class="nx">System</span><span class="p">.</span><span class="nx">Event</span><span class="p">.</span><span class="nx">fireEvent</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">,</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">some</span><span class="o">:</span> <span class="s2">&quot;data&quot;</span> <span class="p">});</span>
2264 <span class="p">});</span>
2265 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2266
2267 <span class="c">&lt;!-- NEW API --&gt;</span>
2268
2269 <span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
2270 <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;EventHandler&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">EventHandler</span><span class="p">)</span> <span class="p">{</span>
2271   <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">,</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
2272     <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Event was invoked&quot;</span><span class="p">);</span>
2273   <span class="p">});</span>
2274
2275   <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="s2">&quot;app.foo.bar&quot;</span><span class="p">,</span> <span class="s2">&quot;makeSnafucated&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">some</span><span class="o">:</span> <span class="s2">&quot;data&quot;</span> <span class="p">});</span>
2276 <span class="p">});</span>
2277 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2278 </code></pre></div>
2279
2280
2281
2282
2283 <hr>
2284 <div class="md-source-date">
2285   <small>
2286
2287       Last update: 2021-01-08
2288
2289   </small>
2290 </div>
2291
2292
2293
2294
2295
2296
2297
2298
2299             </article>
2300           </div>
2301         </div>
2302
2303       </main>
2304
2305
2306 <footer class="md-footer">
2307
2308     <nav class="md-footer__inner md-grid" aria-label="Footer">
2309
2310         <a href="../new-api_ui/" class="md-footer__link md-footer__link--prev" rel="prev">
2311           <div class="md-footer__button md-icon">
2312             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2313           </div>
2314           <div class="md-footer__title">
2315             <div class="md-ellipsis">
2316               <span class="md-footer__direction">
2317                 Previous
2318               </span>
2319               User Interface
2320             </div>
2321           </div>
2322         </a>
2323
2324
2325         <a href="../helper-functions/" class="md-footer__link md-footer__link--next" rel="next">
2326           <div class="md-footer__title">
2327             <div class="md-ellipsis">
2328               <span class="md-footer__direction">
2329                 Next
2330               </span>
2331               Helper Functions
2332             </div>
2333           </div>
2334           <div class="md-footer__button md-icon">
2335             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2336           </div>
2337         </a>
2338
2339     </nav>
2340
2341   <div class="md-footer-meta md-typeset">
2342     <div class="md-footer-meta__inner md-grid">
2343       <div class="md-footer-copyright">
2344
2345           <div class="md-footer-copyright__highlight">
2346             Copyright © 2020 WoltLab GmbH
2347           </div>
2348
2349         Made with
2350         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2351           Material for MkDocs
2352         </a>
2353
2354       </div>
2355       <div class="md-footer-copyright">
2356         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2357         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2358 </div>
2359     </div>
2360   </div>
2361 </footer>
2362
2363     </div>
2364     <div class="md-dialog" data-md-component="dialog">
2365       <div class="md-dialog__inner md-typeset"></div>
2366     </div>
2367     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2368
2369
2370       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2371
2372
2373   </body>
2374 </html>