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