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