jQuery UI Widgets Forums Editors CheckBox, RadioButton radio button without value

This topic contains 8 replies, has 3 voices, and was last updated by  cpuin 9 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • radio button without value #69650

    cpuin
    Participant

    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>
    	      
    radio button without value #69675

    Nadezhda
    Participant

    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,
    Nadezhda

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

    radio button without value #69678

    cpuin
    Participant

    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.

    radio button without value #69699

    Nadezhda
    Participant

    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,
    Nadezhda

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

    radio button without value #69871

    cpuin
    Participant

    Dear Nadhezda,

    I can’t upload the example on the jsfiddle, because the main part of the example will not work.
    I have recored vido showing the issue.
    Here it is:

    radio button without value #69872

    cpuin
    Participant

    radio button without value #69873

    cpuin
    Participant

    radio button without value #69878

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    radio button without value #69883

    cpuin
    Participant

    Thank you a lot!! It took a week trying to debug this.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.