6.0/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         <link rel="canonical" href="https://docs.woltlab.com/6.0/migration/wsc30/javascript/">
  12
  13       <link rel="icon" href="../../../assets/default.favicon.ico">
  14       <meta name="generator" content="mkdocs-1.3.1, mkdocs-material-8.4.2">
  15
  16
  17
  18         <title>JavaScript API - WoltLab Suite Documentation</title>
  19
  20
  21
  22       <link rel="stylesheet" href="../../../assets/stylesheets/main.69437709.min.css">
  23
  24
  25         <link rel="stylesheet" href="../../../assets/stylesheets/palette.cbb835fc.min.css">
  26
  27
  28
  29           <meta name="theme-color" content="#009485">
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39       <link rel="stylesheet" href="../../../stylesheets/extra.css">
  40
  41     <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
  42
  43
  44
  45
  46
  47   </head>
  48
  49
  50
  51
  52
  53
  54
  55     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  56
  57
  58
  59     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  60     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  61     <label class="md-overlay" for="__drawer"></label>
  62     <div data-md-component="skip">
  63
  64
  65         <a href="#migrating-from-wsc-30-javascript" class="md-skip">
  66           Skip to content
  67         </a>
  68
  69     </div>
  70     <div data-md-component="announce">
  71
  72         <aside class="md-banner">
  73           <div class="md-banner__inner md-grid md-typeset">
  74
  75
  76     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  77
  78           </div>
  79
  80         </aside>
  81
  82     </div>
  83
  84       <div data-md-component="outdated" hidden>
  85
  86       </div>
  87
  88
  89
  90
  91 <header class="md-header" data-md-component="header">
  92   <nav class="md-header__inner md-grid" aria-label="Header">
  93     <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  94
  95   <img src="../../../assets/logo.png" alt="logo">
  96
  97     </a>
  98     <label class="md-header__button md-icon" for="__drawer">
  99       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
 100     </label>
 101     <div class="md-header__title" data-md-component="header-title">
 102       <div class="md-header__ellipsis">
 103         <div class="md-header__topic">
 104           <span class="md-ellipsis">
 105             WoltLab Suite Documentation
 106           </span>
 107         </div>
 108         <div class="md-header__topic" data-md-component="header-topic">
 109           <span class="md-ellipsis">
 110
 111               JavaScript API
 112
 113           </span>
 114         </div>
 115       </div>
 116     </div>
 117
 118
 119
 120       <label class="md-header__button 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       </label>
 123       <div class="md-search" data-md-component="search" role="dialog">
 124   <label class="md-search__overlay" for="__search"></label>
 125   <div class="md-search__inner" role="search">
 126     <form class="md-search__form" name="search">
 127       <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" required>
 128       <label class="md-search__icon md-icon" for="__search">
 129         <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>
 130         <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>
 131       </label>
 132       <nav class="md-search__options" aria-label="Search">
 133
 134         <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 135           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
 136         </button>
 137       </nav>
 138
 139     </form>
 140     <div class="md-search__output">
 141       <div class="md-search__scrollwrap" data-md-scrollfix>
 142         <div class="md-search-result" data-md-component="search-result">
 143           <div class="md-search-result__meta">
 144             Initializing search
 145           </div>
 146           <ol class="md-search-result__list"></ol>
 147         </div>
 148       </div>
 149     </div>
 150   </div>
 151 </div>
 152
 153
 154       <div class="md-header__source">
 155         <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 156   <div class="md-source__icon md-icon">
 157
 158     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 159   </div>
 160   <div class="md-source__repository">
 161     GitHub
 162   </div>
 163 </a>
 164       </div>
 165
 166   </nav>
 167
 168 </header>
 169
 170     <div class="md-container" data-md-component="container">
 171
 172
 173
 174
 175
 176
 177       <main class="md-main" data-md-component="main">
 178         <div class="md-main__inner md-grid">
 179
 180
 181
 182               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 183                 <div class="md-sidebar__scrollwrap">
 184                   <div class="md-sidebar__inner">
 185
 186
 187
 188 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 189   <label class="md-nav__title" for="__drawer">
 190     <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 191
 192   <img src="../../../assets/logo.png" alt="logo">
 193
 194     </a>
 195     WoltLab Suite Documentation
 196   </label>
 197
 198     <div class="md-nav__source">
 199       <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 200   <div class="md-source__icon md-icon">
 201
 202     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 203   </div>
 204   <div class="md-source__repository">
 205     GitHub
 206   </div>
 207 </a>
 208     </div>
 209
 210   <ul class="md-nav__list" data-md-scrollfix>
 211
 212
 213
 214
 215
 216
 217
 218
 219     <li class="md-nav__item">
 220       <a href="../../../getting-started/" class="md-nav__link">
 221         Getting Started
 222       </a>
 223     </li>
 224
 225
 226
 227
 228
 229
 230
 231
 232
 233
 234
 235     <li class="md-nav__item md-nav__item--nested">
 236
 237
 238         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 239
 240
 241
 242
 243         <label class="md-nav__link" for="__nav_2">
 244           PHP API
 245           <span class="md-nav__icon md-icon"></span>
 246         </label>
 247
 248       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 249         <label class="md-nav__title" for="__nav_2">
 250           <span class="md-nav__icon md-icon"></span>
 251           PHP API
 252         </label>
 253         <ul class="md-nav__list" data-md-scrollfix>
 254
 255
 256
 257
 258
 259
 260     <li class="md-nav__item">
 261       <a href="../../../php/pages/" class="md-nav__link">
 262         Pages
 263       </a>
 264     </li>
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274     <li class="md-nav__item">
 275       <a href="../../../php/database-objects/" class="md-nav__link">
 276         Database Objects
 277       </a>
 278     </li>
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288     <li class="md-nav__item">
 289       <a href="../../../php/database-access/" class="md-nav__link">
 290         Database Access
 291       </a>
 292     </li>
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302     <li class="md-nav__item">
 303       <a href="../../../php/exceptions/" class="md-nav__link">
 304         Exceptions
 305       </a>
 306     </li>
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317     <li class="md-nav__item md-nav__item--nested">
 318
 319
 320         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 321
 322
 323
 324
 325         <label class="md-nav__link" for="__nav_2_5">
 326           API
 327           <span class="md-nav__icon md-icon"></span>
 328         </label>
 329
 330       <nav class="md-nav" aria-label="API" data-md-level="2">
 331         <label class="md-nav__title" for="__nav_2_5">
 332           <span class="md-nav__icon md-icon"></span>
 333           API
 334         </label>
 335         <ul class="md-nav__list" data-md-scrollfix>
 336
 337
 338
 339
 340
 341
 342
 343     <li class="md-nav__item md-nav__item--nested">
 344
 345
 346         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 347
 348
 349
 350
 351         <label class="md-nav__link" for="__nav_2_5_1">
 352           Caches
 353           <span class="md-nav__icon md-icon"></span>
 354         </label>
 355
 356       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 357         <label class="md-nav__title" for="__nav_2_5_1">
 358           <span class="md-nav__icon md-icon"></span>
 359           Caches
 360         </label>
 361         <ul class="md-nav__list" data-md-scrollfix>
 362
 363
 364
 365
 366
 367
 368     <li class="md-nav__item">
 369       <a href="../../../php/api/caches/" class="md-nav__link">
 370         Overview
 371       </a>
 372     </li>
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382     <li class="md-nav__item">
 383       <a href="../../../php/api/caches_persistent-caches/" class="md-nav__link">
 384         Persistent Caches
 385       </a>
 386     </li>
 387
 388
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../../php/api/caches_runtime-caches/" class="md-nav__link">
 398         Runtime Caches
 399       </a>
 400     </li>
 401
 402
 403
 404
 405         </ul>
 406       </nav>
 407     </li>
 408
 409
 410
 411
 412
 413
 414
 415
 416
 417     <li class="md-nav__item">
 418       <a href="../../../php/api/comments/" class="md-nav__link">
 419         Comments
 420       </a>
 421     </li>
 422
 423
 424
 425
 426
 427
 428
 429
 430
 431     <li class="md-nav__item">
 432       <a href="../../../php/api/cronjobs/" class="md-nav__link">
 433         Cronjobs
 434       </a>
 435     </li>
 436
 437
 438
 439
 440
 441
 442
 443
 444
 445     <li class="md-nav__item">
 446       <a href="../../../php/api/events/" class="md-nav__link">
 447         Events
 448       </a>
 449     </li>
 450
 451
 452
 453
 454
 455
 456
 457
 458
 459
 460     <li class="md-nav__item md-nav__item--nested">
 461
 462
 463         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 464
 465
 466
 467
 468         <label class="md-nav__link" for="__nav_2_5_5">
 469           Form Builder
 470           <span class="md-nav__icon md-icon"></span>
 471         </label>
 472
 473       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 474         <label class="md-nav__title" for="__nav_2_5_5">
 475           <span class="md-nav__icon md-icon"></span>
 476           Form Builder
 477         </label>
 478         <ul class="md-nav__list" data-md-scrollfix>
 479
 480
 481
 482
 483
 484
 485     <li class="md-nav__item">
 486       <a href="../../../php/api/form_builder/overview/" class="md-nav__link">
 487         Overview
 488       </a>
 489     </li>
 490
 491
 492
 493
 494
 495
 496
 497
 498
 499     <li class="md-nav__item">
 500       <a href="../../../php/api/form_builder/structure/" class="md-nav__link">
 501         Structure
 502       </a>
 503     </li>
 504
 505
 506
 507
 508
 509
 510
 511
 512
 513     <li class="md-nav__item">
 514       <a href="../../../php/api/form_builder/form_fields/" class="md-nav__link">
 515         Fields
 516       </a>
 517     </li>
 518
 519
 520
 521
 522
 523
 524
 525
 526
 527     <li class="md-nav__item">
 528       <a href="../../../php/api/form_builder/validation_data/" class="md-nav__link">
 529         Validation and Data
 530       </a>
 531     </li>
 532
 533
 534
 535
 536
 537
 538
 539
 540
 541     <li class="md-nav__item">
 542       <a href="../../../php/api/form_builder/dependencies/" class="md-nav__link">
 543         Dependencies
 544       </a>
 545     </li>
 546
 547
 548
 549
 550         </ul>
 551       </nav>
 552     </li>
 553
 554
 555
 556
 557
 558
 559
 560
 561
 562     <li class="md-nav__item">
 563       <a href="../../../php/api/package_installation_plugins/" class="md-nav__link">
 564         Package Installation Plugins
 565       </a>
 566     </li>
 567
 568
 569
 570
 571
 572
 573
 574
 575
 576     <li class="md-nav__item">
 577       <a href="../../../php/api/user_activity_points/" class="md-nav__link">
 578         User Activity Points
 579       </a>
 580     </li>
 581
 582
 583
 584
 585
 586
 587
 588
 589
 590     <li class="md-nav__item">
 591       <a href="../../../php/api/user_notifications/" class="md-nav__link">
 592         User Notifications
 593       </a>
 594     </li>
 595
 596
 597
 598
 599
 600
 601
 602
 603
 604     <li class="md-nav__item">
 605       <a href="../../../php/api/sitemaps/" class="md-nav__link">
 606         Sitemaps
 607       </a>
 608     </li>
 609
 610
 611
 612
 613         </ul>
 614       </nav>
 615     </li>
 616
 617
 618
 619
 620
 621
 622
 623
 624
 625     <li class="md-nav__item">
 626       <a href="../../../php/code-style/" class="md-nav__link">
 627         Code Style
 628       </a>
 629     </li>
 630
 631
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../../php/apps/" class="md-nav__link">
 641         Apps
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651
 652
 653     <li class="md-nav__item">
 654       <a href="../../../php/gdpr/" class="md-nav__link">
 655         GDPR
 656       </a>
 657     </li>
 658
 659
 660
 661
 662         </ul>
 663       </nav>
 664     </li>
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675
 676     <li class="md-nav__item md-nav__item--nested">
 677
 678
 679         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 680
 681
 682
 683
 684         <label class="md-nav__link" for="__nav_3">
 685           Languages, Templates & CSS
 686           <span class="md-nav__icon md-icon"></span>
 687         </label>
 688
 689       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 690         <label class="md-nav__title" for="__nav_3">
 691           <span class="md-nav__icon md-icon"></span>
 692           Languages, Templates & CSS
 693         </label>
 694         <ul class="md-nav__list" data-md-scrollfix>
 695
 696
 697
 698
 699
 700
 701     <li class="md-nav__item">
 702       <a href="../../../view/languages/" class="md-nav__link">
 703         Languages
 704       </a>
 705     </li>
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715     <li class="md-nav__item">
 716       <a href="../../../view/templates/" class="md-nav__link">
 717         Templates
 718       </a>
 719     </li>
 720
 721
 722
 723
 724
 725
 726
 727
 728
 729     <li class="md-nav__item">
 730       <a href="../../../view/template-plugins/" class="md-nav__link">
 731         Template Plugins
 732       </a>
 733     </li>
 734
 735
 736
 737
 738
 739
 740
 741
 742
 743     <li class="md-nav__item">
 744       <a href="../../../view/css/" class="md-nav__link">
 745         CSS
 746       </a>
 747     </li>
 748
 749
 750
 751
 752         </ul>
 753       </nav>
 754     </li>
 755
 756
 757
 758
 759
 760
 761
 762
 763
 764
 765
 766     <li class="md-nav__item md-nav__item--nested">
 767
 768
 769         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 770
 771
 772
 773
 774         <label class="md-nav__link" for="__nav_4">
 775           TypeScript and JavaScript API
 776           <span class="md-nav__icon md-icon"></span>
 777         </label>
 778
 779       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 780         <label class="md-nav__title" for="__nav_4">
 781           <span class="md-nav__icon md-icon"></span>
 782           TypeScript and JavaScript API
 783         </label>
 784         <ul class="md-nav__list" data-md-scrollfix>
 785
 786
 787
 788
 789
 790
 791     <li class="md-nav__item">
 792       <a href="../../../javascript/general-usage/" class="md-nav__link">
 793         General Usage
 794       </a>
 795     </li>
 796
 797
 798
 799
 800
 801
 802
 803
 804
 805     <li class="md-nav__item">
 806       <a href="../../../javascript/typescript/" class="md-nav__link">
 807         TypeScript
 808       </a>
 809     </li>
 810
 811
 812
 813
 814
 815
 816
 817
 818
 819
 820     <li class="md-nav__item md-nav__item--nested">
 821
 822
 823         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 824
 825
 826
 827
 828         <label class="md-nav__link" for="__nav_4_3">
 829           New API
 830           <span class="md-nav__icon md-icon"></span>
 831         </label>
 832
 833       <nav class="md-nav" aria-label="New API" data-md-level="2">
 834         <label class="md-nav__title" for="__nav_4_3">
 835           <span class="md-nav__icon md-icon"></span>
 836           New API
 837         </label>
 838         <ul class="md-nav__list" data-md-scrollfix>
 839
 840
 841
 842
 843
 844
 845     <li class="md-nav__item">
 846       <a href="../../../javascript/new-api_writing-a-module/" class="md-nav__link">
 847         Writing a module
 848       </a>
 849     </li>
 850
 851
 852
 853
 854
 855
 856
 857
 858
 859     <li class="md-nav__item">
 860       <a href="../../../javascript/new-api_data-structures/" class="md-nav__link">
 861         Data Structures
 862       </a>
 863     </li>
 864
 865
 866
 867
 868
 869
 870
 871
 872
 873     <li class="md-nav__item">
 874       <a href="../../../javascript/new-api_core/" class="md-nav__link">
 875         Core Functions
 876       </a>
 877     </li>
 878
 879
 880
 881
 882
 883
 884
 885
 886
 887     <li class="md-nav__item">
 888       <a href="../../../javascript/new-api_dom/" class="md-nav__link">
 889         DOM
 890       </a>
 891     </li>
 892
 893
 894
 895
 896
 897
 898
 899
 900
 901     <li class="md-nav__item">
 902       <a href="../../../javascript/new-api_events/" class="md-nav__link">
 903         Event Handling
 904       </a>
 905     </li>
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915     <li class="md-nav__item">
 916       <a href="../../../javascript/new-api_ajax/" class="md-nav__link">
 917         Ajax
 918       </a>
 919     </li>
 920
 921
 922
 923
 924
 925
 926
 927
 928
 929     <li class="md-nav__item">
 930       <a href="../../../javascript/new-api_dialogs/" class="md-nav__link">
 931         Dialogs
 932       </a>
 933     </li>
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943     <li class="md-nav__item">
 944       <a href="../../../javascript/new-api_browser/" class="md-nav__link">
 945         Browser and Screen Sizes
 946       </a>
 947     </li>
 948
 949
 950
 951
 952
 953
 954
 955
 956
 957     <li class="md-nav__item">
 958       <a href="../../../javascript/new-api_ui/" class="md-nav__link">
 959         User Interface
 960       </a>
 961     </li>
 962
 963
 964
 965
 966         </ul>
 967       </nav>
 968     </li>
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978     <li class="md-nav__item">
 979       <a href="../../../javascript/legacy-api/" class="md-nav__link">
 980         Legacy API
 981       </a>
 982     </li>
 983
 984
 985
 986
 987
 988
 989
 990
 991
 992     <li class="md-nav__item">
 993       <a href="../../../javascript/helper-functions/" class="md-nav__link">
 994         Helper Functions
 995       </a>
 996     </li>
 997
 998
 999
1000
1001
1002
1003
1004
1005
1006     <li class="md-nav__item">
1007       <a href="../../../javascript/code-snippets/" class="md-nav__link">
1008         Code Snippets
1009       </a>
1010     </li>
1011
1012
1013
1014
1015         </ul>
1016       </nav>
1017     </li>
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029     <li class="md-nav__item md-nav__item--nested">
1030
1031
1032         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1033
1034
1035
1036
1037         <label class="md-nav__link" for="__nav_5">
1038           Package Components
1039           <span class="md-nav__icon md-icon"></span>
1040         </label>
1041
1042       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1043         <label class="md-nav__title" for="__nav_5">
1044           <span class="md-nav__icon md-icon"></span>
1045           Package Components
1046         </label>
1047         <ul class="md-nav__list" data-md-scrollfix>
1048
1049
1050
1051
1052
1053
1054     <li class="md-nav__item">
1055       <a href="../../../package/package-xml/" class="md-nav__link">
1056         package.xml
1057       </a>
1058     </li>
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069     <li class="md-nav__item md-nav__item--nested">
1070
1071
1072         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1073
1074
1075
1076
1077         <label class="md-nav__link" for="__nav_5_2">
1078           PIPs
1079           <span class="md-nav__icon md-icon"></span>
1080         </label>
1081
1082       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1083         <label class="md-nav__title" for="__nav_5_2">
1084           <span class="md-nav__icon md-icon"></span>
1085           PIPs
1086         </label>
1087         <ul class="md-nav__list" data-md-scrollfix>
1088
1089
1090
1091
1092
1093
1094     <li class="md-nav__item">
1095       <a href="../../../package/pip/" class="md-nav__link">
1096         Overview
1097       </a>
1098     </li>
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108     <li class="md-nav__item">
1109       <a href="../../../package/pip/acl-option/" class="md-nav__link">
1110         aclOption
1111       </a>
1112     </li>
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122     <li class="md-nav__item">
1123       <a href="../../../package/pip/acp-menu/" class="md-nav__link">
1124         acpMenu
1125       </a>
1126     </li>
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../../../package/pip/acp-search-provider/" class="md-nav__link">
1138         acpSearchProvider
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item">
1151       <a href="../../../package/pip/acp-template/" class="md-nav__link">
1152         acpTemplate
1153       </a>
1154     </li>
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164     <li class="md-nav__item">
1165       <a href="../../../package/pip/acp-template-delete/" class="md-nav__link">
1166         acpTemplateDelete
1167       </a>
1168     </li>
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178     <li class="md-nav__item">
1179       <a href="../../../package/pip/bbcode/" class="md-nav__link">
1180         bbcode
1181       </a>
1182     </li>
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192     <li class="md-nav__item">
1193       <a href="../../../package/pip/box/" class="md-nav__link">
1194         box
1195       </a>
1196     </li>
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206     <li class="md-nav__item">
1207       <a href="../../../package/pip/clipboard-action/" class="md-nav__link">
1208         clipboardAction
1209       </a>
1210     </li>
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220     <li class="md-nav__item">
1221       <a href="../../../package/pip/core-object/" class="md-nav__link">
1222         coreObject
1223       </a>
1224     </li>
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234     <li class="md-nav__item">
1235       <a href="../../../package/pip/cronjob/" class="md-nav__link">
1236         cronjob
1237       </a>
1238     </li>
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248     <li class="md-nav__item">
1249       <a href="../../../package/pip/database/" class="md-nav__link">
1250         database
1251       </a>
1252     </li>
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262     <li class="md-nav__item">
1263       <a href="../../../package/pip/event-listener/" class="md-nav__link">
1264         eventListener
1265       </a>
1266     </li>
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276     <li class="md-nav__item">
1277       <a href="../../../package/pip/file/" class="md-nav__link">
1278         file
1279       </a>
1280     </li>
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290     <li class="md-nav__item">
1291       <a href="../../../package/pip/file-delete/" class="md-nav__link">
1292         fileDelete
1293       </a>
1294     </li>
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304     <li class="md-nav__item">
1305       <a href="../../../package/pip/language/" class="md-nav__link">
1306         language
1307       </a>
1308     </li>
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318     <li class="md-nav__item">
1319       <a href="../../../package/pip/media-provider/" class="md-nav__link">
1320         mediaProvider
1321       </a>
1322     </li>
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332     <li class="md-nav__item">
1333       <a href="../../../package/pip/menu/" class="md-nav__link">
1334         menu
1335       </a>
1336     </li>
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346     <li class="md-nav__item">
1347       <a href="../../../package/pip/menu-item/" class="md-nav__link">
1348         menuItem
1349       </a>
1350     </li>
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360     <li class="md-nav__item">
1361       <a href="../../../package/pip/object-type/" class="md-nav__link">
1362         objectType
1363       </a>
1364     </li>
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374     <li class="md-nav__item">
1375       <a href="../../../package/pip/object-type-definition/" class="md-nav__link">
1376         objectTypeDefinition
1377       </a>
1378     </li>
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388     <li class="md-nav__item">
1389       <a href="../../../package/pip/option/" class="md-nav__link">
1390         option
1391       </a>
1392     </li>
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402     <li class="md-nav__item">
1403       <a href="../../../package/pip/page/" class="md-nav__link">
1404         page
1405       </a>
1406     </li>
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416     <li class="md-nav__item">
1417       <a href="../../../package/pip/pip/" class="md-nav__link">
1418         pip
1419       </a>
1420     </li>
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430     <li class="md-nav__item">
1431       <a href="../../../package/pip/script/" class="md-nav__link">
1432         script
1433       </a>
1434     </li>
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444     <li class="md-nav__item">
1445       <a href="../../../package/pip/smiley/" class="md-nav__link">
1446         smiley
1447       </a>
1448     </li>
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458     <li class="md-nav__item">
1459       <a href="../../../package/pip/sql/" class="md-nav__link">
1460         sql
1461       </a>
1462     </li>
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472     <li class="md-nav__item">
1473       <a href="../../../package/pip/style/" class="md-nav__link">
1474         style
1475       </a>
1476     </li>
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486     <li class="md-nav__item">
1487       <a href="../../../package/pip/template/" class="md-nav__link">
1488         template
1489       </a>
1490     </li>
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500     <li class="md-nav__item">
1501       <a href="../../../package/pip/template-delete/" class="md-nav__link">
1502         templateDelete
1503       </a>
1504     </li>
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514     <li class="md-nav__item">
1515       <a href="../../../package/pip/template-listener/" class="md-nav__link">
1516         templateListener
1517       </a>
1518     </li>
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528     <li class="md-nav__item">
1529       <a href="../../../package/pip/user-group-option/" class="md-nav__link">
1530         userGroupOption
1531       </a>
1532     </li>
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542     <li class="md-nav__item">
1543       <a href="../../../package/pip/user-menu/" class="md-nav__link">
1544         userMenu
1545       </a>
1546     </li>
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556     <li class="md-nav__item">
1557       <a href="../../../package/pip/user-notification-event/" class="md-nav__link">
1558         userNotificationEvent
1559       </a>
1560     </li>
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570     <li class="md-nav__item">
1571       <a href="../../../package/pip/user-option/" class="md-nav__link">
1572         userOption
1573       </a>
1574     </li>
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584     <li class="md-nav__item">
1585       <a href="../../../package/pip/user-profile-menu/" class="md-nav__link">
1586         userProfileMenu
1587       </a>
1588     </li>
1589
1590
1591
1592
1593         </ul>
1594       </nav>
1595     </li>
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605     <li class="md-nav__item">
1606       <a href="../../../package/database-php-api/" class="md-nav__link">
1607         Database PHP API
1608       </a>
1609     </li>
1610
1611
1612
1613
1614         </ul>
1615       </nav>
1616     </li>
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1631
1632
1633         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" checked>
1634
1635
1636
1637
1638         <label class="md-nav__link" for="__nav_6">
1639           Migration
1640           <span class="md-nav__icon md-icon"></span>
1641         </label>
1642
1643       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1644         <label class="md-nav__title" for="__nav_6">
1645           <span class="md-nav__icon md-icon"></span>
1646           Migration
1647         </label>
1648         <ul class="md-nav__list" data-md-scrollfix>
1649
1650
1651
1652
1653
1654
1655
1656     <li class="md-nav__item md-nav__item--nested">
1657
1658
1659         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1660
1661
1662
1663
1664         <label class="md-nav__link" for="__nav_6_1">
1665           From WoltLab Suite 5.5
1666           <span class="md-nav__icon md-icon"></span>
1667         </label>
1668
1669       <nav class="md-nav" aria-label="From WoltLab Suite 5.5" data-md-level="2">
1670         <label class="md-nav__title" for="__nav_6_1">
1671           <span class="md-nav__icon md-icon"></span>
1672           From WoltLab Suite 5.5
1673         </label>
1674         <ul class="md-nav__list" data-md-scrollfix>
1675
1676
1677
1678
1679
1680
1681     <li class="md-nav__item">
1682       <a href="../../wsc55/php/" class="md-nav__link">
1683         PHP API
1684       </a>
1685     </li>
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695     <li class="md-nav__item">
1696       <a href="../../wsc55/javascript/" class="md-nav__link">
1697         TypeScript and JavaScript
1698       </a>
1699     </li>
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709     <li class="md-nav__item">
1710       <a href="../../wsc55/templates/" class="md-nav__link">
1711         Templates
1712       </a>
1713     </li>
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723     <li class="md-nav__item">
1724       <a href="../../wsc55/libraries/" class="md-nav__link">
1725         Third Party Libraries
1726       </a>
1727     </li>
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737     <li class="md-nav__item">
1738       <a href="../../wsc55/deprecations_removals/" class="md-nav__link">
1739         Deprecations and Removals
1740       </a>
1741     </li>
1742
1743
1744
1745
1746         </ul>
1747       </nav>
1748     </li>
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759     <li class="md-nav__item md-nav__item--nested">
1760
1761
1762         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1763
1764
1765
1766
1767         <label class="md-nav__link" for="__nav_6_2">
1768           From WoltLab Suite 5.4
1769           <span class="md-nav__icon md-icon"></span>
1770         </label>
1771
1772       <nav class="md-nav" aria-label="From WoltLab Suite 5.4" data-md-level="2">
1773         <label class="md-nav__title" for="__nav_6_2">
1774           <span class="md-nav__icon md-icon"></span>
1775           From WoltLab Suite 5.4
1776         </label>
1777         <ul class="md-nav__list" data-md-scrollfix>
1778
1779
1780
1781
1782
1783
1784     <li class="md-nav__item">
1785       <a href="../../wsc54/php/" class="md-nav__link">
1786         PHP API
1787       </a>
1788     </li>
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798     <li class="md-nav__item">
1799       <a href="../../wsc54/javascript/" class="md-nav__link">
1800         TypeScript and JavaScript
1801       </a>
1802     </li>
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812     <li class="md-nav__item">
1813       <a href="../../wsc54/templates/" class="md-nav__link">
1814         Templates
1815       </a>
1816     </li>
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826     <li class="md-nav__item">
1827       <a href="../../wsc54/libraries/" class="md-nav__link">
1828         Third Party Libraries
1829       </a>
1830     </li>
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840     <li class="md-nav__item">
1841       <a href="../../wsc54/deprecations_removals/" class="md-nav__link">
1842         Deprecations and Removals
1843       </a>
1844     </li>
1845
1846
1847
1848
1849         </ul>
1850       </nav>
1851     </li>
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862     <li class="md-nav__item md-nav__item--nested">
1863
1864
1865         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1866
1867
1868
1869
1870         <label class="md-nav__link" for="__nav_6_3">
1871           From WoltLab Suite 5.3
1872           <span class="md-nav__icon md-icon"></span>
1873         </label>
1874
1875       <nav class="md-nav" aria-label="From WoltLab Suite 5.3" data-md-level="2">
1876         <label class="md-nav__title" for="__nav_6_3">
1877           <span class="md-nav__icon md-icon"></span>
1878           From WoltLab Suite 5.3
1879         </label>
1880         <ul class="md-nav__list" data-md-scrollfix>
1881
1882
1883
1884
1885
1886
1887     <li class="md-nav__item">
1888       <a href="../../wsc53/php/" class="md-nav__link">
1889         PHP API
1890       </a>
1891     </li>
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901     <li class="md-nav__item">
1902       <a href="../../wsc53/session/" class="md-nav__link">
1903         Session Handling and Authentication
1904       </a>
1905     </li>
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915     <li class="md-nav__item">
1916       <a href="../../wsc53/javascript/" class="md-nav__link">
1917         TypeScript and JavaScript
1918       </a>
1919     </li>
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929     <li class="md-nav__item">
1930       <a href="../../wsc53/templates/" class="md-nav__link">
1931         Templates
1932       </a>
1933     </li>
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943     <li class="md-nav__item">
1944       <a href="../../wsc53/libraries/" class="md-nav__link">
1945         Third Party Libraries
1946       </a>
1947     </li>
1948
1949
1950
1951
1952         </ul>
1953       </nav>
1954     </li>
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965     <li class="md-nav__item md-nav__item--nested">
1966
1967
1968         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1969
1970
1971
1972
1973         <label class="md-nav__link" for="__nav_6_4">
1974           From WoltLab Suite 5.2
1975           <span class="md-nav__icon md-icon"></span>
1976         </label>
1977
1978       <nav class="md-nav" aria-label="From WoltLab Suite 5.2" data-md-level="2">
1979         <label class="md-nav__title" for="__nav_6_4">
1980           <span class="md-nav__icon md-icon"></span>
1981           From WoltLab Suite 5.2
1982         </label>
1983         <ul class="md-nav__list" data-md-scrollfix>
1984
1985
1986
1987
1988
1989
1990     <li class="md-nav__item">
1991       <a href="../../wsc52/php/" class="md-nav__link">
1992         PHP API
1993       </a>
1994     </li>
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004     <li class="md-nav__item">
2005       <a href="../../wsc52/templates/" class="md-nav__link">
2006         Templates and Languages
2007       </a>
2008     </li>
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018     <li class="md-nav__item">
2019       <a href="../../wsc52/libraries/" class="md-nav__link">
2020         Third Party Libraries
2021       </a>
2022     </li>
2023
2024
2025
2026
2027         </ul>
2028       </nav>
2029     </li>
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040     <li class="md-nav__item md-nav__item--nested">
2041
2042
2043         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
2044
2045
2046
2047
2048         <label class="md-nav__link" for="__nav_6_5">
2049           From WoltLab Suite 3.1
2050           <span class="md-nav__icon md-icon"></span>
2051         </label>
2052
2053       <nav class="md-nav" aria-label="From WoltLab Suite 3.1" data-md-level="2">
2054         <label class="md-nav__title" for="__nav_6_5">
2055           <span class="md-nav__icon md-icon"></span>
2056           From WoltLab Suite 3.1
2057         </label>
2058         <ul class="md-nav__list" data-md-scrollfix>
2059
2060
2061
2062
2063
2064
2065     <li class="md-nav__item">
2066       <a href="../../wsc31/php/" class="md-nav__link">
2067         PHP API
2068       </a>
2069     </li>
2070
2071
2072
2073
2074         </ul>
2075       </nav>
2076     </li>
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
2090
2091
2092         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_6" type="checkbox" id="__nav_6_6" checked>
2093
2094
2095
2096
2097         <label class="md-nav__link" for="__nav_6_6">
2098           From WoltLab Suite 3.0
2099           <span class="md-nav__icon md-icon"></span>
2100         </label>
2101
2102       <nav class="md-nav" aria-label="From WoltLab Suite 3.0" data-md-level="2">
2103         <label class="md-nav__title" for="__nav_6_6">
2104           <span class="md-nav__icon md-icon"></span>
2105           From WoltLab Suite 3.0
2106         </label>
2107         <ul class="md-nav__list" data-md-scrollfix>
2108
2109
2110
2111
2112
2113
2114     <li class="md-nav__item">
2115       <a href="../php/" class="md-nav__link">
2116         PHP API
2117       </a>
2118     </li>
2119
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130     <li class="md-nav__item md-nav__item--active">
2131
2132       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
2133
2134
2135
2136
2137
2138         <label class="md-nav__link md-nav__link--active" for="__toc">
2139           JavaScript API
2140           <span class="md-nav__icon md-icon"></span>
2141         </label>
2142
2143       <a href="./" class="md-nav__link md-nav__link--active">
2144         JavaScript API
2145       </a>
2146
2147
2148
2149 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2150
2151
2152
2153
2154
2155
2156     <label class="md-nav__title" for="__toc">
2157       <span class="md-nav__icon md-icon"></span>
2158       Table of contents
2159     </label>
2160     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2161
2162         <li class="md-nav__item">
2163   <a href="#accelerated-guest-view-tiny-builds" class="md-nav__link">
2164     Accelerated Guest View / Tiny Builds
2165   </a>
2166
2167     <nav class="md-nav" aria-label="Accelerated Guest View / Tiny Builds">
2168       <ul class="md-nav__list">
2169
2170           <li class="md-nav__item">
2171   <a href="#code-templates-for-tiny-builds" class="md-nav__link">
2172     Code Templates for Tiny Builds
2173   </a>
2174
2175     <nav class="md-nav" aria-label="Code Templates for Tiny Builds">
2176       <ul class="md-nav__list">
2177
2178           <li class="md-nav__item">
2179   <a href="#legacy-javascript" class="md-nav__link">
2180     Legacy JavaScript
2181   </a>
2182
2183 </li>
2184
2185           <li class="md-nav__item">
2186   <a href="#requirejs-modules" class="md-nav__link">
2187     require.js Modules
2188   </a>
2189
2190 </li>
2191
2192       </ul>
2193     </nav>
2194
2195 </li>
2196
2197           <li class="md-nav__item">
2198   <a href="#including-tinified-builds-through-js" class="md-nav__link">
2199     Including tinified builds through {js}
2200   </a>
2201
2202 </li>
2203
2204       </ul>
2205     </nav>
2206
2207 </li>
2208
2209         <li class="md-nav__item">
2210   <a href="#real-error-messages-for-ajax-responses" class="md-nav__link">
2211     Real Error Messages for AJAX Responses
2212   </a>
2213
2214     <nav class="md-nav" aria-label="Real Error Messages for AJAX Responses">
2215       <ul class="md-nav__list">
2216
2217           <li class="md-nav__item">
2218   <a href="#example-code" class="md-nav__link">
2219     Example Code
2220   </a>
2221
2222 </li>
2223
2224       </ul>
2225     </nav>
2226
2227 </li>
2228
2229         <li class="md-nav__item">
2230   <a href="#simplified-form-submit-in-dialogs" class="md-nav__link">
2231     Simplified Form Submit in Dialogs
2232   </a>
2233
2234 </li>
2235
2236         <li class="md-nav__item">
2237   <a href="#helper-function-for-inline-error-messages" class="md-nav__link">
2238     Helper Function for Inline Error Messages
2239   </a>
2240
2241     <nav class="md-nav" aria-label="Helper Function for Inline Error Messages">
2242       <ul class="md-nav__list">
2243
2244           <li class="md-nav__item">
2245   <a href="#example-code_1" class="md-nav__link">
2246     Example Code
2247   </a>
2248
2249 </li>
2250
2251       </ul>
2252     </nav>
2253
2254 </li>
2255
2256     </ul>
2257
2258 </nav>
2259
2260     </li>
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270     <li class="md-nav__item">
2271       <a href="../templates/" class="md-nav__link">
2272         Templates
2273       </a>
2274     </li>
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284     <li class="md-nav__item">
2285       <a href="../css/" class="md-nav__link">
2286         CSS
2287       </a>
2288     </li>
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298     <li class="md-nav__item">
2299       <a href="../package/" class="md-nav__link">
2300         Package Components
2301       </a>
2302     </li>
2303
2304
2305
2306
2307         </ul>
2308       </nav>
2309     </li>
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320     <li class="md-nav__item md-nav__item--nested">
2321
2322
2323         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_7" type="checkbox" id="__nav_6_7" >
2324
2325
2326
2327
2328         <label class="md-nav__link" for="__nav_6_7">
2329           From WCF 2.1
2330           <span class="md-nav__icon md-icon"></span>
2331         </label>
2332
2333       <nav class="md-nav" aria-label="From WCF 2.1" data-md-level="2">
2334         <label class="md-nav__title" for="__nav_6_7">
2335           <span class="md-nav__icon md-icon"></span>
2336           From WCF 2.1
2337         </label>
2338         <ul class="md-nav__list" data-md-scrollfix>
2339
2340
2341
2342
2343
2344
2345     <li class="md-nav__item">
2346       <a href="../../wcf21/php/" class="md-nav__link">
2347         PHP API
2348       </a>
2349     </li>
2350
2351
2352
2353
2354
2355
2356
2357
2358
2359     <li class="md-nav__item">
2360       <a href="../../wcf21/templates/" class="md-nav__link">
2361         Templates
2362       </a>
2363     </li>
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373     <li class="md-nav__item">
2374       <a href="../../wcf21/css/" class="md-nav__link">
2375         CSS
2376       </a>
2377     </li>
2378
2379
2380
2381
2382
2383
2384
2385
2386
2387     <li class="md-nav__item">
2388       <a href="../../wcf21/package/" class="md-nav__link">
2389         Package Components
2390       </a>
2391     </li>
2392
2393
2394
2395
2396         </ul>
2397       </nav>
2398     </li>
2399
2400
2401
2402
2403         </ul>
2404       </nav>
2405     </li>
2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417     <li class="md-nav__item md-nav__item--nested">
2418
2419
2420         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
2421
2422
2423
2424
2425         <label class="md-nav__link" for="__nav_7">
2426           Tutorials
2427           <span class="md-nav__icon md-icon"></span>
2428         </label>
2429
2430       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
2431         <label class="md-nav__title" for="__nav_7">
2432           <span class="md-nav__icon md-icon"></span>
2433           Tutorials
2434         </label>
2435         <ul class="md-nav__list" data-md-scrollfix>
2436
2437
2438
2439
2440
2441
2442
2443     <li class="md-nav__item md-nav__item--nested">
2444
2445
2446         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
2447
2448
2449
2450
2451         <label class="md-nav__link" for="__nav_7_1">
2452           Tutorial Series
2453           <span class="md-nav__icon md-icon"></span>
2454         </label>
2455
2456       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
2457         <label class="md-nav__title" for="__nav_7_1">
2458           <span class="md-nav__icon md-icon"></span>
2459           Tutorial Series
2460         </label>
2461         <ul class="md-nav__list" data-md-scrollfix>
2462
2463
2464
2465
2466
2467
2468     <li class="md-nav__item">
2469       <a href="../../../tutorial/series/overview/" class="md-nav__link">
2470         Overview
2471       </a>
2472     </li>
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482     <li class="md-nav__item">
2483       <a href="../../../tutorial/series/part_1/" class="md-nav__link">
2484         Part 1
2485       </a>
2486     </li>
2487
2488
2489
2490
2491
2492
2493
2494
2495
2496     <li class="md-nav__item">
2497       <a href="../../../tutorial/series/part_2/" class="md-nav__link">
2498         Part 2
2499       </a>
2500     </li>
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510     <li class="md-nav__item">
2511       <a href="../../../tutorial/series/part_3/" class="md-nav__link">
2512         Part 3
2513       </a>
2514     </li>
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524     <li class="md-nav__item">
2525       <a href="../../../tutorial/series/part_4/" class="md-nav__link">
2526         Part 4
2527       </a>
2528     </li>
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538     <li class="md-nav__item">
2539       <a href="../../../tutorial/series/part_5/" class="md-nav__link">
2540         Part 5
2541       </a>
2542     </li>
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552     <li class="md-nav__item">
2553       <a href="../../../tutorial/series/part_6/" class="md-nav__link">
2554         Part 6
2555       </a>
2556     </li>
2557
2558
2559
2560
2561         </ul>
2562       </nav>
2563     </li>
2564
2565
2566
2567
2568         </ul>
2569       </nav>
2570     </li>
2571
2572
2573
2574   </ul>
2575 </nav>
2576                   </div>
2577                 </div>
2578               </div>
2579
2580
2581
2582               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2583                 <div class="md-sidebar__scrollwrap">
2584                   <div class="md-sidebar__inner">
2585
2586
2587 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2588
2589
2590
2591
2592
2593
2594     <label class="md-nav__title" for="__toc">
2595       <span class="md-nav__icon md-icon"></span>
2596       Table of contents
2597     </label>
2598     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2599
2600         <li class="md-nav__item">
2601   <a href="#accelerated-guest-view-tiny-builds" class="md-nav__link">
2602     Accelerated Guest View / Tiny Builds
2603   </a>
2604
2605     <nav class="md-nav" aria-label="Accelerated Guest View / Tiny Builds">
2606       <ul class="md-nav__list">
2607
2608           <li class="md-nav__item">
2609   <a href="#code-templates-for-tiny-builds" class="md-nav__link">
2610     Code Templates for Tiny Builds
2611   </a>
2612
2613     <nav class="md-nav" aria-label="Code Templates for Tiny Builds">
2614       <ul class="md-nav__list">
2615
2616           <li class="md-nav__item">
2617   <a href="#legacy-javascript" class="md-nav__link">
2618     Legacy JavaScript
2619   </a>
2620
2621 </li>
2622
2623           <li class="md-nav__item">
2624   <a href="#requirejs-modules" class="md-nav__link">
2625     require.js Modules
2626   </a>
2627
2628 </li>
2629
2630       </ul>
2631     </nav>
2632
2633 </li>
2634
2635           <li class="md-nav__item">
2636   <a href="#including-tinified-builds-through-js" class="md-nav__link">
2637     Including tinified builds through {js}
2638   </a>
2639
2640 </li>
2641
2642       </ul>
2643     </nav>
2644
2645 </li>
2646
2647         <li class="md-nav__item">
2648   <a href="#real-error-messages-for-ajax-responses" class="md-nav__link">
2649     Real Error Messages for AJAX Responses
2650   </a>
2651
2652     <nav class="md-nav" aria-label="Real Error Messages for AJAX Responses">
2653       <ul class="md-nav__list">
2654
2655           <li class="md-nav__item">
2656   <a href="#example-code" class="md-nav__link">
2657     Example Code
2658   </a>
2659
2660 </li>
2661
2662       </ul>
2663     </nav>
2664
2665 </li>
2666
2667         <li class="md-nav__item">
2668   <a href="#simplified-form-submit-in-dialogs" class="md-nav__link">
2669     Simplified Form Submit in Dialogs
2670   </a>
2671
2672 </li>
2673
2674         <li class="md-nav__item">
2675   <a href="#helper-function-for-inline-error-messages" class="md-nav__link">
2676     Helper Function for Inline Error Messages
2677   </a>
2678
2679     <nav class="md-nav" aria-label="Helper Function for Inline Error Messages">
2680       <ul class="md-nav__list">
2681
2682           <li class="md-nav__item">
2683   <a href="#example-code_1" class="md-nav__link">
2684     Example Code
2685   </a>
2686
2687 </li>
2688
2689       </ul>
2690     </nav>
2691
2692 </li>
2693
2694     </ul>
2695
2696 </nav>
2697                   </div>
2698                 </div>
2699               </div>
2700
2701
2702           <div class="md-content" data-md-component="content">
2703             <article class="md-content__inner md-typeset">
2704
2705
2706   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/6.0/docs/migration/wsc30/javascript.md" title="Edit this page" class="md-content__button md-icon">
2707     <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>
2708   </a>
2709
2710
2711
2712 <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>
2713 <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>
2714 <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>
2715 <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>
2716 <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>
2717 <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>
2718 <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>
2719 <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>
2720 <h4 id="legacy-javascript">Legacy JavaScript<a class="headerlink" href="#legacy-javascript" title="Permanent link">#</a></h4>
2721 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2722 <span class="normal"> 2</span>
2723 <span class="normal"> 3</span>
2724 <span class="normal"> 4</span>
2725 <span class="normal"> 5</span>
2726 <span class="normal"> 6</span>
2727 <span class="normal"> 7</span>
2728 <span class="normal"> 8</span>
2729 <span class="normal"> 9</span>
2730 <span class="normal">10</span>
2731 <span class="normal">11</span>
2732 <span class="normal">12</span>
2733 <span class="normal">13</span>
2734 <span class="normal">14</span>
2735 <span class="normal">15</span>
2736 <span class="normal">16</span>
2737 <span class="normal">17</span>
2738 <span class="normal">18</span>
2739 <span class="normal">19</span>
2740 <span class="normal">20</span>
2741 <span class="normal">21</span>
2742 <span class="normal">22</span>
2743 <span class="normal">23</span>
2744 <span class="normal">24</span>
2745 <span class="normal">25</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">COMPILER_TARGET_DEFAULT</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2746 <span class="w">  </span><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="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2747 <span class="w">    </span><span class="nx">makeSnafucated</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2748 <span class="w">      </span><span class="k">return</span><span class="w"> </span><span class="s2">&quot;Hello World&quot;</span><span class="p">;</span><span class="w"></span>
2749 <span class="w">    </span><span class="p">}</span><span class="w"></span>
2750 <span class="w">  </span><span class="p">};</span><span class="w"></span>
2751
2752 <span class="w">  </span><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="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span><span class="w"></span>
2753 <span class="w">    </span><span class="nx">foobar</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;baz&quot;</span><span class="p">,</span><span class="w"></span>
2754
2755 <span class="w">    </span><span class="nx">foo</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">$bar</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2756 <span class="w">      </span><span class="k">return</span><span class="w"> </span><span class="nx">$bar</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">foobar</span><span class="p">;</span><span class="w"></span>
2757 <span class="w">    </span><span class="p">}</span><span class="w"></span>
2758 <span class="w">  </span><span class="p">});</span><span class="w"></span>
2759 <span class="p">}</span><span class="w"></span>
2760 <span class="k">else</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2761 <span class="w">  </span><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="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2762 <span class="w">    </span><span class="nx">makeSnafucated</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{}</span><span class="w"></span>
2763 <span class="w">  </span><span class="p">};</span><span class="w"></span>
2764
2765 <span class="w">  </span><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="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Class</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span><span class="w"></span>
2766 <span class="w">    </span><span class="nx">foobar</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span><span class="w"></span>
2767 <span class="w">    </span><span class="nx">foo</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{}</span><span class="w"></span>
2768 <span class="w">  </span><span class="p">});</span><span class="w"></span>
2769 <span class="p">}</span><span class="w"></span>
2770 </code></pre></div></td></tr></table></div>
2771 <h4 id="requirejs-modules">require.js Modules<a class="headerlink" href="#requirejs-modules" title="Permanent link">#</a></h4>
2772 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2773 <span class="normal"> 2</span>
2774 <span class="normal"> 3</span>
2775 <span class="normal"> 4</span>
2776 <span class="normal"> 5</span>
2777 <span class="normal"> 6</span>
2778 <span class="normal"> 7</span>
2779 <span class="normal"> 8</span>
2780 <span class="normal"> 9</span>
2781 <span class="normal">10</span>
2782 <span class="normal">11</span>
2783 <span class="normal">12</span>
2784 <span class="normal">13</span>
2785 <span class="normal">14</span>
2786 <span class="normal">15</span>
2787 <span class="normal">16</span>
2788 <span class="normal">17</span>
2789 <span class="normal">18</span>
2790 <span class="normal">19</span>
2791 <span class="normal">20</span>
2792 <span class="normal">21</span>
2793 <span class="normal">22</span>
2794 <span class="normal">23</span>
2795 <span class="normal">24</span>
2796 <span class="normal">25</span>
2797 <span class="normal">26</span>
2798 <span class="normal">27</span></pre></div></td><td class="code"><div><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="w"> </span><span class="s2">&quot;fancy&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;dependencies&quot;</span><span class="p">],</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">Some</span><span class="p">,</span><span class="w"> </span><span class="nx">Fancy</span><span class="p">,</span><span class="w"> </span><span class="nx">Dependencies</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2799 <span class="w">  </span><span class="s2">&quot;use strict&quot;</span><span class="p">;</span><span class="w"></span>
2800
2801 <span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">COMPILER_TARGET_DEFAULT</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2802 <span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">Fake</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{};</span><span class="w"></span>
2803 <span class="w">    </span><span class="nx">Fake</span><span class="p">.</span><span class="nx">prototype</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2804 <span class="w">      </span><span class="nx">init</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{},</span><span class="w"></span>
2805 <span class="w">      </span><span class="nx">makeSnafucated</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{}</span><span class="w"></span>
2806 <span class="w">    </span><span class="p">};</span><span class="w"></span>
2807 <span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">Fake</span><span class="p">;</span><span class="w"></span>
2808 <span class="w">  </span><span class="p">}</span><span class="w"></span>
2809
2810 <span class="w">  </span><span class="kd">function</span><span class="w"> </span><span class="nx">MyAwesomeClass</span><span class="p">(</span><span class="nx">niceArgument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </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="w"> </span><span class="p">}</span><span class="w"></span>
2811 <span class="w">  </span><span class="nx">MyAwesomeClass</span><span class="p">.</span><span class="nx">prototype</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2812 <span class="w">    </span><span class="nx">init</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">niceArgument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2813 <span class="w">      </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">niceArgument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2814 <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">makeSnafucated</span><span class="p">();</span><span class="w"></span>
2815 <span class="w">      </span><span class="p">}</span><span class="w"></span>
2816 <span class="w">    </span><span class="p">},</span><span class="w"></span>
2817
2818 <span class="w">    </span><span class="nx">makeSnafucated</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2819 <span class="w">      </span><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><span class="w"></span>
2820 <span class="w">    </span><span class="p">}</span><span class="w"></span>
2821 <span class="w">  </span><span class="p">}</span><span class="w"></span>
2822
2823 <span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">MyAwesomeClass</span><span class="p">;</span><span class="w"></span>
2824 <span class="p">});</span><span class="w"></span>
2825 </code></pre></div></td></tr></table></div>
2826 <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>
2827 <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>
2828 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code>{js application=&#39;wcf&#39; file=&#39;WCF.Example&#39; hasTiny=true}
2829 </code></pre></div></td></tr></table></div>
2830 <p>This line generates a different output depending on the debug mode and the user login-state.</p>
2831 <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>
2832 <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>
2833 <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>
2834 <h3 id="example-code">Example Code<a class="headerlink" href="#example-code" title="Permanent link">#</a></h3>
2835 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
2836 <span class="normal">2</span>
2837 <span class="normal">3</span>
2838 <span class="normal">4</span>
2839 <span class="normal">5</span>
2840 <span class="normal">6</span>
2841 <span class="normal">7</span>
2842 <span class="normal">8</span>
2843 <span class="normal">9</span></pre></div></td><td class="code"><div><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="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">Ajax</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2844 <span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2845 <span class="w">    </span><span class="c1">// ...</span><span class="w"></span>
2846 <span class="w">    </span><span class="nx">_ajaxFailure</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">responseData</span><span class="p">,</span><span class="w"> </span><span class="nx">responseText</span><span class="p">,</span><span class="w"> </span><span class="nx">xhr</span><span class="p">,</span><span class="w"> </span><span class="nx">requestData</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2847 <span class="w">      </span><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><span class="w"></span>
2848 <span class="w">    </span><span class="p">}</span><span class="w"></span>
2849 <span class="w">    </span><span class="c1">// ...</span><span class="w"></span>
2850 <span class="w">  </span><span class="p">};</span><span class="w"></span>
2851 <span class="p">});</span><span class="w"></span>
2852 </code></pre></div></td></tr></table></div>
2853 <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>
2854 <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>
2855 <p>WoltLab Suite 3.1 offers automatic form submit that is enabled through a set of specific conditions and data attributes:</p>
2856 <ol>
2857 <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>
2858 <li>The dialog object provided to <code>UiDialog.open()</code> implements the method <code>_dialogSubmit()</code>.</li>
2859 <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>
2860 </ol>
2861 <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>
2862 <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>
2863 <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>
2864 <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>
2865 <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>
2866 <p>Hiding messages is done by setting the 2nd parameter to <code>false</code> or an empty string:</p>
2867 <ul>
2868 <li><code>elInnerError(elementRef, false)</code></li>
2869 <li><code>elInnerError(elementRef, '')</code></li>
2870 </ul>
2871 <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>
2872 <ul>
2873 <li><code>elInnerError(elementRef, null)</code></li>
2874 <li><code>elInnerError(elementRef)</code></li>
2875 </ul>
2876 <h3 id="example-code_1">Example Code<a class="headerlink" href="#example-code_1" title="Permanent link">#</a></h3>
2877 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2878 <span class="normal"> 2</span>
2879 <span class="normal"> 3</span>
2880 <span class="normal"> 4</span>
2881 <span class="normal"> 5</span>
2882 <span class="normal"> 6</span>
2883 <span class="normal"> 7</span>
2884 <span class="normal"> 8</span>
2885 <span class="normal"> 9</span>
2886 <span class="normal">10</span>
2887 <span class="normal">11</span>
2888 <span class="normal">12</span>
2889 <span class="normal">13</span>
2890 <span class="normal">14</span></pre></div></td><td class="code"><div><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="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">Language</span><span class="p">))</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2891 <span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">input</span><span class="w"> </span><span class="o">=</span><span class="w"> </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><span class="w"></span>
2892 <span class="w">  </span><span class="k">if</span><span class="w"> </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="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2893 <span class="w">    </span><span class="c1">// displays a new inline error or replaces the message if there is one already</span><span class="w"></span>
2894 <span class="w">    </span><span class="nx">elInnerError</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span><span class="w"> </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="w"></span>
2895 <span class="w">  </span><span class="p">}</span><span class="w"></span>
2896 <span class="w">  </span><span class="k">else</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
2897 <span class="w">    </span><span class="c1">// removes the inline error if it exists</span><span class="w"></span>
2898 <span class="w">    </span><span class="nx">elInnerError</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">);</span><span class="w"></span>
2899 <span class="w">  </span><span class="p">}</span><span class="w"></span>
2900
2901 <span class="w">  </span><span class="c1">// the above condition is equivalent to this:</span><span class="w"></span>
2902 <span class="w">  </span><span class="nx">elInnerError</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span><span class="w"> </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="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </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="w"> </span><span class="o">:</span><span class="w"> </span><span class="kc">false</span><span class="p">));</span><span class="w"></span>
2903 <span class="p">}</span><span class="w"></span>
2904 </code></pre></div></td></tr></table></div>
2905
2906   <hr>
2907 <div class="md-source-file">
2908   <small>
2909
2910       Last update:
2911       2021-01-08
2912
2913   </small>
2914 </div>
2915
2916
2917
2918
2919
2920             </article>
2921
2922           </div>
2923         </div>
2924
2925       </main>
2926
2927         <footer class="md-footer">
2928
2929
2930     <nav class="md-footer__inner md-grid" aria-label="Footer" >
2931
2932
2933         <a href="../php/" class="md-footer__link md-footer__link--prev" aria-label="Previous: PHP API" rel="prev">
2934           <div class="md-footer__button md-icon">
2935             <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>
2936           </div>
2937           <div class="md-footer__title">
2938             <div class="md-ellipsis">
2939               <span class="md-footer__direction">
2940                 Previous
2941               </span>
2942               PHP API
2943             </div>
2944           </div>
2945         </a>
2946
2947
2948
2949         <a href="../templates/" class="md-footer__link md-footer__link--next" aria-label="Next: Templates" rel="next">
2950           <div class="md-footer__title">
2951             <div class="md-ellipsis">
2952               <span class="md-footer__direction">
2953                 Next
2954               </span>
2955               Templates
2956             </div>
2957           </div>
2958           <div class="md-footer__button md-icon">
2959             <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>
2960           </div>
2961         </a>
2962
2963     </nav>
2964
2965   <div class="md-footer-meta md-typeset">
2966     <div class="md-footer-meta__inner md-grid">
2967       <div class="md-copyright">
2968
2969     <div class="md-copyright__highlight">
2970       Copyright © 2020 WoltLab GmbH
2971     </div>
2972
2973
2974     Made with
2975     <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2976       Material for MkDocs
2977     </a>
2978
2979 </div>
2980
2981         <div class="md-copyright">
2982         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2983         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2984 </div>
2985
2986     </div>
2987   </div>
2988 </footer>
2989
2990     </div>
2991     <div class="md-dialog" data-md-component="dialog">
2992       <div class="md-dialog__inner md-typeset"></div>
2993     </div>
2994
2995     <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tracking"], "search": "../../../assets/javascripts/workers/search.ecf98df9.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "version": {"provider": "mike"}}</script>
2996
2997
2998       <script src="../../../assets/javascripts/bundle.9c69f0bc.min.js"></script>
2999
3000
3001   </body>
3002 </html>