ReferenceError: b is not defined in JqxSlpitLayout

[rmk3200Participant]

When trying to use splitlayout as per your document.

main.js:1 ERROR Error: Uncaught (in promise): ReferenceError: b is not defined
ReferenceError: b is not defined
at re (35.js:1:2987)
at 449 (35.js:1:6676)
at r (runtime.js:1:143)
at 35 (35.js:1:199)
at Function.r (runtime.js:1:143)
at tt.invoke (polyfills.js:1:8693)
at Object.onInvoke (main.js:1:267607)
at tt.invoke (polyfills.js:1:8631)
at tt.run (polyfills.js:1:3621)
at polyfills.js:1:19875
at er (polyfills.js:1:19020)
at er (polyfills.js:1:18512)
at polyfills.js:1:19919
at tt.invokeTask (polyfills.js:1:9385)
at Object.onInvokeTask (main.js:1:267423)
at tt.invokeTask (polyfills.js:1:9305)
at tt.runTask (polyfills.js:1:4313)
at Gt (polyfills.js:1:11845)
handleError @ main.js:1

when exploring in 35.js:1:2987 the below code was like

        function re(p) {
            var h = "function" == typeof Map ? new Map : void 0;
            return b = function(o) {
                if (null === o || !function de(p) {
                    return -1 !== Function.toString.call(p).indexOf("[native code]")
                }(o))
                    return o;
                if ("function" != typeof o)
                    throw new TypeError("Super expression must either be null or a function");
                if (typeof h < "u") {
                    if (h.has(o))
                        return h.get(o);
                    h.set(o, e)
                }
                function e() {
                    return function S(p, h, d) {
                        return te() ? a = Reflect.construct : a = function(e, t, i) {
                            var r = [null];
                            r.push.apply(r, t);
                            var u = new (Function.bind.apply(e, r));
                            return i && T(u, i.prototype),
                            u
                        }
                        ,
                        a.apply(null, arguments)
                    }(o, arguments, B(this).constructor)
                }
                return e.prototype = Object.create(o.prototype, {
                    constructor: {
                        value: e,
                        enumerable: !1,
                        writable: !0,
                        configurable: !0
                    }
                }),
                T(e, o)
            }
            ,
            b(p)
        }

[svetoslav_borislavovParticipant]

Hi,

Could you share your code of setting up the layout?

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[rmk3200Participant]

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PrintDesignRoutingModule } from './print-design-routing.module';
import { PrintDesignComponent } from './print-design.component';
import { jqxSplitLayoutModule } from 'jqwidgets-ng/jqxsplitlayout';
import { jqxTreeModule } from 'jqwidgets-ng/jqxtree';
@NgModule({
  declarations: [
    PrintDesignComponent
  ],
  imports: [
    CommonModule,
    PrintDesignRoutingModule,
    jqxSplitLayoutModule,
    jqxTreeModule
  ]
})
export class PrintDesignModule { }

Component

import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
@Component({
  selector: 'app-print-design',
  templateUrl: './print-design.component.html',
  styleUrls: ['./print-design.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class PrintDesignComponent implements AfterViewInit{
  @ViewChild('myLayout', { static: false }) myLayout: jqxSplitLayoutComponent;

  dataSource = [
     {
       type: 'tabs',
       size: '80%',
       items: [
         {
           label: 'My Milan Notes',
           content: 

<textarea class=”input”>The massive Cathedral of Santa Maria Nascente, which the Milanese call just “Il Duomo” is among the world’s largest (it holds up to 40,000 people) and most magnificent churches, the ultimate example of the Flamboyant Gothic style. It was begun in the 14th century, but its façade was not completed until the early 1800s, under Napoleon. The roof is topped by 135 delicately carved stone pinnacles and the exterior is decorated with 2,245 marble statues. The dim interior, in striking contrast to the brilliant and richly patterned exterior, makes a powerful impression with its 52 gigantic pillars. The stained-glass windows in the nave (mostly 15th-16th centuries) are the largest in the world; the earliest of them are in the south aisle. Highlights include the seven-branched bronze candelabrum by Nicholas of Verdun (c. 1200) in the north transept, the 16th-century tomb of Gian Giacomo Medici, and the jeweled gold reliquary of San Carlo Borromeo in the octagonal Borromeo Chapel leading off the crypt. Behind the high altar, the choir has deeply carved panels, and misericords under the seats.
In the south sacristy is the treasury with gold and silver work dating from the fourth to the 17th century. A walk on the roof of the cathedral is an impressive experience, offering views across the city and extending on clear days to the snow-covered Alps. (An elevator ascends all but the last 73 steps to the platform of the dome). At the front of the Duomo, near the central doorway, you can descend under Piazza del Duomo into the foundations of the Basilica di Santa Tecla (fourth-fifth and seventh century) and the fourth-century baptistery, Battistero di San Giovanni alle Fonti, which were discovered during the construction of the Milan Metro system.
</textarea>`
},
{
label: “Milan City Map”,
content: <div id="map"></div>
}
]
},
{
type: ‘tabs’,
position: “right”,
items: [
{
label: “Explorer”,
content: <div id="tree"></div>
},
{
label: “About Milan”,
content: ` <p>
Milan, a metropolis in Italy’s northern Lombardy region, is a global capital of fashion and design.
Home to the national stock exchange, it’s a financial hub also known for its high-end restaurants
and shops. The Gothic Duomo di Milano cathedral and the Santa Maria delle Grazie convent, housing
Leonardo da Vinci’s mural “The Last Supper,” testify to centuries of art and culture.
</p>`
}
]
}
]

treeSource = [
{
icon: “https://www.jqwidgets.com/angular/images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “https://www.jqwidgets.com/angular/images/calendarIcon.png”, label: “Calendar” },
{ icon: “https://www.jqwidgets.com/angular/images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{
icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Admin” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Corporate” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Finance” },
{ icon: “https://www.jqwidgets.com/angular/images/folder.png”, label: “Other” }
]
},
{ icon: “https://www.jqwidgets.com/angular/images/recycle.png”, label: “Deleted Items” },
{ icon: “https://www.jqwidgets.com/angular/images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “https://www.jqwidgets.com/angular/images/settings.png”, label: “Settings” },
{ icon: “https://www.jqwidgets.com/angular/images/favorites.png”, label: “Favorites” }
];

setup(): void {
const that = this;

jqwidgets.createInstance(#tree, ‘jqxTree’, {
source: that.treeSource
});

window[“initializeMaps”] = function () {
new window[“google”].maps.Map(document.getElementById(‘map’), {
center: new window[“google”].maps.LatLng(45.4642, 9.1900),
zoom: 8,
mapTypeId: window[“google”].maps.MapTypeId.ROADMAP
});
}

const script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘https://maps.googleapis.com/maps/api/js?key=AIzaSyDLNo8WFhrz_4zuLdl423WX9h5Kh0SedHQ&callback=initializeMaps’;
document.body.appendChild(script);
}

ngAfterViewInit(): void {
const that = this;

if (document.readyState === “complete”) {
that.setup();
}
else {
window.onload = function() {
that.setup();
}
}
}
}
`
Html

<p>print-design works!</p>
<jqxSplitLayout id=”layout” [dataSource]=”dataSource” #myLayout>
</jqxSplitLayout>

[svetoslav_borislavovParticipant]

Hi,

Thank you for reporting that, I have opened an issue for it!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[rmk3200Participant]

Will this splitLayout produce? attributes modified html code when resize events.
The positions of divs and elements?

[svetoslav_borislavovParticipant]

Hi,

I think I don’t understand your question. Can you explain it again?
The split layout is the same as from the jQuery Default Functionality demo.
You may test it here:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitlayout/index.htm#demos/jqxsplitlayout/defaultfunctionality.htm

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts