jqxwindow inputs not included in $("form").serialize()

[cainellinParticipant]

Hi,
I would use a jqxwindow for gets some parameters by $(‘form’).serialize() but in serialized string I can’t found the inputs
this is my code:

HTML CODE:

<div id=”results”></div>

<form>
<br>

First name: <input type=”text” name=”fname”><br><br>
Last name: <input type=”text” name=”lname”><br>
<br>

<input type=”button” value=”Button” id=’jqxButton’ />
<input type=”button” value=”Filter” id=’jqxButtonFilter’ />
<br><br>

<div id=”filterDialog”>
<div id=”filterDialogHeader”>
<span id=”filteDialogCaption” style=”float: left”>Filtro avanzato</span>
</div>
<div id=”filterDialogContent” >
<div>

<br>

First name: <input type=”text” name=”fnameFilter”><br><br>
Last name: <input type=”text” name=”lnameFilter”><br>
<br></div>
<div>
<input type=”radio” name=”sex” value=”M”>Male<br>
<input type=”radio” name=”sex” value=”F” >Female<br>
<input type=”radio” name=”sex” value=”A” checked>All
</div>
<div>
<div style=”float: right; margin-top: 15px;”>
<input type=”button” id=”ok” value=”OK” style=”margin-right: 10px” />
<input type=”button” id=”cancel” value=”Cancel” />
</div>
</div>
</div>
</div>

</form>

JAVASCRIPT CODE:

$(document).ready(function ()
{

// Create jqxButton widgets.
$(“#jqxButton”).jqxButton({ width: 120, height: 40 });
$(“#jqxButtonFilter”).jqxButton({ width: 120, height: 40 });

$(“#jqxButton”).on(‘click’, function ()
{
$(“#results”).text($(“form”).serialize());
});

$(“#jqxButtonFilter”).on(‘click’, function ()
{
$(“#filterDialog”).jqxWindow(‘open’);
});

var jqxWidget = $(‘#jqxButton’);
var offset = jqxWidget.offset();

$(‘#filterDialog’).jqxWindow({
position: { x: offset.left + 150, y: offset.top + 150 },
autoOpen: false,
maxHeight: 600,
maxWidth: 280,
minHeight: 30,
minWidth: 250,
height: ‘auto’,
width: 270,
resizable: false,
isModal: true,
modalOpacity: 0.3,

okButton: $(‘#ok’), cancelButton: $(‘#cancel’),
initContent: function () {
$(‘#ok’).jqxButton({ width: ’65px’ });
$(‘#cancel’).jqxButton({ width: ’65px’ });
$(‘#ok’).focus();
}
});

$(‘#filterDialog’).on(‘close’, function (event)
{
if (event.type === ‘close’)
{
if (event.args.dialogResult.OK) { $(“#results”).text($(“form”).serialize());}
}
});

});

[cainellinParticipant]

Sorry I solved,
I put 2 times the <FORM></FORM> tag like this:

HTML CODE:

<div id=”results”></div>
<form id=”mainForm”>
<br>

First name: <input type=”text” name=”fname”><br><br>
Last name: <input type=”text” name=”lname”><br>

</form>

<br>
<input type=”button” value=”Button” id=’jqxButton’ />
<input type=”button” value=”Filter” id=’jqxButtonFilter’ />
<br><br>

<div id=”filterDialog”>
<div id=”filterDialogHeader”>
<span id=”filteDialogCaption” style=”float: left”>Filtro avanzato</span>
</div>
<div id=”filterDialogContent” >
<form id=”modalForm”>
<div>
<br>
First name: <input type=”text” name=”fnameFilter”><br><br>
Last name: <input type=”text” name=”lnameFilter”><br>
<br></div>
<div>
<input type=”radio” name=”sex” value=”M”>Male<br>
<input type=”radio” name=”sex” value=”F” >Female<br>
<input type=”radio” name=”sex” value=”A” checked>All
</div>
</form>
<div>
<div style=”float: right; margin-top: 15px;”>
<input type=”button” id=”ok” value=”OK” style=”margin-right: 10px” />
<input type=”button” id=”cancel” value=”Cancel” />
</div>
</div>
</div>
</div>

[Author]

Posts