jQuery UI Widgets › Forums › Editors › CheckBox, RadioButton › radio button without value
Tagged: change event, jqxRadioButton, radiobutton, val
This topic contains 8 replies, has 3 voices, and was last updated by cpuin 9 years, 7 months ago.
-
Author
-
I have two similar windows with different IDs and same functionality.
Both have two radio buttons also with different IDs.When first opens and select a button and close it and open another one, there is no selected button. Vise verse , when select a button on the other window and open the first one there is no selected value.
My question is WHY when these are radio buttons with totally different IDs?
Here is the full code:
// INIT -------------------------------------------------------------------------------------- var start = $('#startDate').val(); var end = $('#endDate').val(); var url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end; createTable(); // CREATE TABLE ------------------------------------------------------------------------------------ function createTable() { var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int'}, { name: 'Acct', type: 'int'}, { name: 'InvoiceNumber', type: 'string'}, { name: 'partnerName' , type: 'string'}, { name: 'ObjectID' , type: 'string'}, { name: 'InvoiceDate' , type: 'string'} ], url: url, cache: false, addRow: function (rowID, rowData, position, commit) { var data = "insert=true&" + $.param(rowData); $.ajax({ dataType: 'json', url: 'json_documents.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function (jqXHR, textStatus, errorThrown) { commit(false); alert(errorThrown); } }); }, updateRow: function (rowID, rowData, commit) { var data = "" + $.param(rowData); $.ajax({ dataType: 'json', url: '', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function (jqXHR, textStatus, errorThrown) { commit(false); alert('Does not work :('); } }); }, deleteRow: function (rowID, commit) { // synchronize with the server - send delete command // call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failed. commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); this.editrow = -1; $("#dataTable").jqxDataTable( { width: 750, pageable: true, pagerButtonsCount: 10, source: dataAdapter, filterable: true, filterMode: 'simple', sortable: true, selectionMode: 'none', enableHover:false, columnsResize: false, altRows: true, showAggregates: false, aggregatesHeight: 60, rendered: function () { //PRINT DOWNLOAD ------------------------------------- $(".printButtons").jqxButton({ width: 90, template: "inverse" }); $(".printButtons").on('click', function (event) { if (event.target.tagName =="BUTTON") { var row = $(event.target).attr('data-row'); var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct'); //CREATE WINDOW $('#eventWindow').jqxWindow({ maxHeight: 180, maxWidth: 280, minHeight: 30, minWidth: 250, height: 180, width: 270, resizable: false, isModal: true, modalOpacity: 0.3, okButton: $('#print'), cancelButton: $('#cancel'), initContent: function () { $("#bg").jqxRadioButton({ width: 120, height: 25, checked: true}); $("#en").jqxRadioButton({ width: 120, height: 25, checked: false}); $('#print').jqxButton({ width: '80px' }); $('#download').jqxButton({ width: '80px' }); $('#cancel').jqxButton({ width: '80px' }); $('#print').focus(); } }); //OPEN THE WINDOW $("#eventWindow").jqxWindow('open'); $("#eventWindow").css('visibility', 'visible'); $("#print").off("mousedown"); $("#print").on("mousedown",function() { $("#eventWindow").jqxWindow('close'); //print PDF //var saleNumber = $("#invAcct").val(); var saleNumber = cellValueAcct; if ($("#bg").val()==true) { //BG var url = "invoicebg.php?saleNumber=" + saleNumber; var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700"); myWindow.focus(); myWindow.print(); } else { //EN var url = "invoiceen.php?saleNumber=" + saleNumber; var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700"); myWindow.focus(); myWindow.print(); } }); } }); //PDF DOWNLOAD --------------------------------------- $(".pdfButtons").jqxButton({ width: 90, template: "success" }); $(".pdfButtons").on('click', function (event) { if (event.target.tagName =="BUTTON") { var row = $(event.target).attr('data-row'); var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct'); } //CREATE WINDOW $('#pdfWindow').jqxWindow({ maxHeight: 180, maxWidth: 280, minHeight: 30, minWidth: 250, height: 180, width: 270, resizable: false, isModal: true, modalOpacity: 0.3, okButton: $('#print_pdf'), cancelButton: $('#cancel_pdf'), initContent: function () { $("#bg_pdf").jqxRadioButton({ width: 120, height: 25, checked: true}); $("#en_pdf").jqxRadioButton({ width: 120, height: 25, checked: false}); $('#print_pdf').jqxButton({ width: '80px' }); $('#download_pdf').jqxButton({ width: '80px' }); $('#cancel_pdf').jqxButton({ width: '80px' }); $('#print_pdf').focus(); } }); //OPEN THE WINDOW $("#pdfWindow").jqxWindow('open'); $("#pdfWindow").css('visibility', 'visible'); $("#print_pdf").off("mousedown"); $("#print_pdf").on("mousedown",function() { $("#pdfWindow").jqxWindow('close'); var saleNumber = cellValueAcct; if ($("#bg_pdf").val()==true) { //BG var url = "invoicebg.php?saleNumber=" + saleNumber; var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700"); myWindow.focus(); myWindow.print(); } else { //EN var url = "invoiceen.php?saleNumber=" + saleNumber; var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700"); myWindow.focus(); myWindow.print(); } }); }); //PDF DOWNLOAD END ----------------------------------- }, columns: [ { text: 'Дата:', dataField: 'InvoiceDate' , width: 150}, //{ text: 'Acct:', dataField: 'Acct' , width: 100}, { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 }, { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 }, { text: 'Партньор:', dataField: 'partnerName', width:150}, { text: '', cellsAlign: 'center', columnType: 'none', width:100, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) { // render custom column. return "<button data-row='" + row + "' class='printButtons'>Печат</button>"; } }, { text: '', cellsAlign: 'center', columnType: 'none', width:100, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) { // render custom column. return "<button data-row='" + row + "' class='pdfButtons'>PDF</button>"; } } ] }); //HIDE COLUMN //$("#dataTable").jqxDataTable('hideColumn','Acct'); } // EVENT DIALOG -------------------------------------------------------------------------------------- // CREATE DATE WIDGETS ------------------------------------------------------------------------------- $("#startDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"}); $("#endDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"}); // CREATE SUBIMT BUTTON ------------------------------------------------------------------------------ $("#submitButton").jqxButton({width: '100px', height: '25px'}); $("#submitButton").mousedown(function() { var start = $('#startDate').val(); var end = $('#endDate').val(); //check which arguments are selected url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end; createTable(); //window.alert(url); }); // CREATE EXPORT and PRINT BUTTONS of the TABLE ------------------------------------------------------ $("#excelExport").jqxButton(); $("#xmlExport").jqxButton(); $("#csvExport").jqxButton(); $("#tsvExport").jqxButton(); $("#htmlExport").jqxButton(); $("#jsonExport").jqxButton(); $("#excelExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'xls'); }); $("#xmlExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'xml'); }); $("#csvExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'csv'); }); $("#tsvExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'tsv'); }); $("#htmlExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'html'); }); $("#jsonExport").click(function () { $("#dataTable").jqxDataTable('exportData', 'json'); }); $("#printButton").jqxButton({ width: 100 }); $("#printButton").click(function () { var gridContent = $("#dataTable").jqxDataTable('exportData', 'html'); var newWindow = window.open('', '', 'width=800, height=500'), document = newWindow.document.open(), pageContent = '<!DOCTYPE html>' + '<html>' + '<head>' + '<meta charset="utf-8" />' + '<title>jQWidgets DataTable</title>' + '</head>' + '<body>' + gridContent + '</body></html>'; document.write(pageContent); document.close(); newWindow.print(); }); //ADD DIALOG ----------------------------------------------------------------------------------------- }); </script> <div style='margin-top: 20px;'> <div style='float: left;' id="startDate" type="date" name="startdate"></div> <div style='float: left;' id="endDate" type="date" name="endDate" /></div> <input type="button" value="Изпрати" id='submitButton' /> </div> <br> <div id="dataTable"></div> <div style='margin-top: 20px;'> <div style='float: left;'> <input type="button" value="Export to Excel" id='excelExport' /> <br /> <br /> <input type="button" value="Export to XML" id='xmlExport' /> </div> <div style='margin-left: 10px; float: left;'> <input type="button" value="Export to CSV" id='csvExport' /> <br /> <br /> <input type="button" value="Export to TSV" id='tsvExport' /> </div> <div style='margin-left: 10px; float: left;'> <input type="button" value="Export to HTML" id='htmlExport' /> <br /> <br /> <input type="button" value="Export to JSON" id='jsonExport' /> </div> </div> <div style='margin-top: 20px;'> <div style='margin-left: 10px; float: left;'> <input type="button" value="Print" id='printButton' /> </div> </div> <div id="eventWindow" style="visibility: hidden;"> <div id="windowHeader"> <span> <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" /> </span> </div> <div> <table width="100%"> <tr> <td valign="center" align="center" height="30" colspan="3"><font color="green">Изберете език на документа:</font></td> </tr> <tr> <td width="80" valign="center" align="center" height="70" colspan="3"> <div id="bg">BG(BGN)</div> <div id="en">EN(EUR)</div> </td> </tr> <tr> <td width="80"><button id="print">Принтирай</button></td> <td width="80"><button id="download">PDF</button></td> <td width="80" colspan="2"><button id="cancel">Отказ</button></td> </tr> </table> </div> </div> <div id="pdfWindow" style="visibility: hidden;"> <div id="windowHeader2"> <span> <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" /> </span> </div> <div> <table width="100%"> <tr> <td valign="center" align="center" height="30" colspan="3"><font color="green">Изберете език за PDF документа:</font></td> </tr> <tr> <td width="80" valign="center" align="center" height="70" colspan="3"> <div id="bg_pdf">BG(BGN)</div> <div id="en_pdf">EN(EUR)</div> </td> </tr> <tr> <td width="80"><button id="print_pdf">Принтирай</button></td> <td width="80"><button id="download_pdf">PDF</button></td> <td width="80" colspan="2"><button id="cancel_pdf">Отказ</button></td> </tr> </table> </div> </div>
Hello cpuin,
jqxRadioButton always has value (true or false). If you have more than one radioButton on your page and want to select them by id you should use different id for each radioButton.
Please, find the following example which shows how to get value of radioButton.<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true }); $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25 }); var RadioButtonValue = $("#jqxRadioButton").jqxRadioButton('val'); alert(RadioButtonValue); $("#jqxRadioButton").on('change', function (event) { var checked = event.args.checked; if (checked) { $("#events").prepend('<div><span>Checked: 12 Months Contract</span></div>'); } else $("#events").prepend('<div><span>Unchecked: 12 Months Contract</span></div>'); }); $("#jqxRadioButton2").on('change', function (event) { var checked = event.args.checked; if (checked) { $("#events").prepend('<div><span>Checked: 6 Months Contract</span></div>'); } else $("#events").prepend('<div><span>Unchecked: 6 Months Contract</span></div>'); }); }); </script> </head> <body class='default'> <div id='jqxWidget' style='font-family: Verdana Arial; font-size: 12px; width: 400px;'> <div style='margin-top: 10px;' id='jqxRadioButton'> 12 Months Contract </div> <div style='margin-top: 10px;' id='jqxRadioButton2'> <span>6 Months Contract</span> </div> <div style='margin-top: 10px;'> <div> Events: </div> <div id='events'> </div> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Dear Nadhezda,
As you can see in the code i’m providing i use different IDs for the buttons! I get the value w/out problem.
What is happening is that when close the window with first button and than open another window with other buttons, no button is selected!The ring is empty. If i select some and close and than open the other the same happens.Hi cpuin,
Here is a working example: http://jsfiddle.net/gc5yysb2/.
We will investigate this behaviour and if we confirm it as an issue, we will fix it as soon as possible.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi cpuin,
In your scenario you should Group your Radio Buttons, because in general when you select a Radio button, other Buttons are unchecked. If you have 2 Groups of Radio Buttons and do not wish one Group to affect another Group of Buttons like in your Case where you have 2 Radio Buttons in one window and 2 more Radio Buttons in a different window, you should use the groupName property. Example: http://jsfiddle.net/jqwidgets/XH6ch/
Hope this helps!
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you a lot!! It took a week trying to debug this.
-
AuthorPosts
You must be logged in to reply to this topic.