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