Initialising jqxinput in jqxwindow pop up in Docking layout

[benjamin.deveParticipant]

hello,
I have a context menu that pops up and when choose an option a pop up window come up with a input field.
when I try to initialise the input field by using jqwidgets.createInstance inside a popup window within a Docking Layout but i get this error. maybe its a small thing im missing, im not sure.

The instance for the input is – const windowInputInstance – not working
the instance for the window is – const windowEditInstance – working fine

here is the ERROR;

DockingLayoutComponent.html:2 ERROR Error: jqxInput: Missing Text Input in the Input Group
at b.(anonymous function).render (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxinput.js:7:1153)
at b.(anonymous function).createInstance (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxinput.js:7:766)
at Object.a.jqx.applyWidget (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:7670)
at HTMLDivElement.eval (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:12098)
at Function.each (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:7:6099)
at init.each (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:7:2367)
at init.a.fn.(anonymous function) [as jqxInput] (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:12021)
at Object.createInstance (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:683)
at Object.initContent (webpack-internal:///../../../../../src/app/docking-layout/docking-layout.component.ts:139:65)
at b.(anonymous function).initContent (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxlayout.js:7:19939)

my HTML CODE IS HERE (Taken from the Docking layout IDE example):
<!–documentGroup–>
<div data-container=”Document1Panel”>
<div style=”padding: 5px;”>
<div id=”Document1TextArea” style=”padding: 10px;”></div>
<div id=”myWindowEdit”>
<div>Rename Folder</div>
<div style=”overflow: hidden”>
<table>
<tbody>
<tr>
<td align=’right’>New Name: </td>
<td align=’left’>
<div id=”firstNameEdit”></div>
</td>
</tr>

<tr>
<td align=’right’></td>
<td style=”padding-top: 10px” align=’right’>
<div id=”saveBtn” style=”float: left”></div>
<div id=”cancelBtn” style=”float: left”></div>

</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>

my Docking layout initialisation is HERE:
contentContainer: ‘Document1Panel’,
initContent: () => {
/*
* This the initialisation of the context menu inside the grid view
* */
const menuGridInstance = jqwidgets.createInstance(‘#myMenuGridView’, ‘jqxMenu’,
{
width: 120, height: 80, autoOpenPopup: false, mode: ‘popup’
});

/*
* This the initialisation of the window where a user can customise a new folder name inside the grid view
* */
const windowEditInstance = jqwidgets.createInstance(‘#myWindowEdit’, ‘jqxWindow’,
{
width: 300, height: 120, modalOpacity: ‘0.01’,
resizable: false, isModal: true, autoOpen: false
});

/*
* This the initialisation of the buttons sued in the window when a user edits a folder
* */
const windowInputInstance = jqwidgets.createInstance(‘#firstNameEdit’, ‘jqxInput’,
{
width: 200, height: 50
});

menuGridInstance.addEventHandler(‘itemclick’, event => {
const item = event.args.innerText;
switch (item) {
case ‘Add Item’:

this.fileSystemService.addGridItem(gridItemParent);

break;
case ‘Remove Item’:

this.fileSystemService.removeGridItem(gridItemParent);

break;
case ‘Rename’:
// do some validation here and open window
windowEditInstance.open();
break;
}
});

}

[Ivo ZhulevParticipant]

Hi benjamin,

Check this topic:
https://www.jqwidgets.com/community/topic/jqxinput-missing-text-input-in-the-input-group/

I don’t see your HTML tag for the input in the code provided. So please check this out.

Best Regards,
Ivo

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

[benjamin.deveParticipant]

Thank you,

I got it to work now.
I had a missing input tag (<input type=”text”/>) in my declaration.

This is the docking-layout instance.
———————————-
contentContainer: ‘DocumentPanel’,
initContent: () => {
const inputInstance = jqwidgets.createInstance (
‘#myInput’,
‘jqxInput’,
{ width: 200, height: 50});
}

HTML section
——————–
<div data-container=DocumentPanel”>
<div id=”myInput”>
<input type=”text”/>
</div>
</div>

[Author]

Posts