jQWidgets Forums

Tagged: binding, cascading, default value, jqxComboBox, php

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 11 months ago.

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

Author

Default Value for Cascading jqxComboBox from PHP Posts

April 28, 2015 at 12:21 pm Default Value for Cascading jqxComboBox from PHP #70374

Participant

Hi,

I am trying to set the default value for cascading jqxComboBox drop down. The scenario is that when I user enters a form they have to select two combo box, the 2nd one is dependant on the first one. However, if they already made the choice and editting the form, I want the default value to be populated via PHP.

The issue is that I cannot figure out how to get the 2nd combo box to be loaded with the data from the first combo box when the form is loaded. I can make changes to the first and then it will work. I am hoping that someone has some insight to this.

This example is from https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm?%28arctic%29#demos/jqxcombobox/cascadingcombobox.htm.


<?php
session_start();

// PHP set the default value - How do I make a cascade comboxbox to reflect the default value?
// This is the id value for the item displayed in the combo box.   
$default_itemclass = 1;
$default_itemtype = 4;

?>

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title id='Description'>CASCADED DROP DOWN TEST  </title>
        
    <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.classic.css" type="text/css">
  
    
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <script type="text/javascript" src="../includes/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../includes/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../includes/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../includes/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../includes/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../includes/jqwidgets/jqxcombobox.js"></script>
       
    
    <script type="text/javascript">

$(document).ready(function () {
		
                // From:
                // https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm?%28arctic%29#demos/jqxcombobox/cascadingcombobox.htm
                // 
		// prepare the data
		var classSource =
		{
			datatype: "json",
                        datafields: [ {name:'itemclass_id'},{name:'item_class'}],
                        url: '_itemclass.php',
           		cache: false,
                        async: false
		};
                                
		var classAdapter = new $.jqx.dataAdapter(classSource, {
                    loadComplete: function() {
                        $('#itemclass').jqxComboBox('val',<?php echo $default_itemclass;?>);
                    }
        
                });
                
		$("#itemclass").jqxComboBox(
		{
			source: classAdapter,
			width: 200,
			height: 25,
			promptText: "Select Item Class..",
                        displayMember: 'item_class',
                        valueMember: 'itemclass_id',
                        autoComplete: true
                                                
                  });    
                                
		var typeSource =
                    {
                    datatype: "json",
                    datafields: [ {name:'itemtype_id'},
                                  {name:'itemtype_name'}],
                    url: '_itemtype.php',
                    cache: false,
                    async: false
                    }
                    
                    
		var typeAdapter = new $.jqx.dataAdapter(typeSource);
        
                
		
		$("#itemtype").jqxComboBox(
		{
			width: 200,
			height: 25,
			//disabled: true,
			promptText: "Select Item Type...",
                        displayMember: 'itemtype_name',
                        valueMember: 'itemtype_id',
			autoDropDownHeight: true,
                        autoComplete: true
                        
                                               
		});  
                
                $("#itemclass").on('bindingComplete', function (event) 
                {
                    $('#itemclass').jqxComboBox('selectItem',<?php echo $default_itemclass;?>);
                    
                });
		
		$("#itemclass").bind('select', function(event)
		{
			if (event.args)
			{
				$("#itemtype").jqxComboBox({ disabled: false});		
				var value = event.args.item.value;
				typeSource.data = {itemtype_id: value};
				typeAdapter = new $.jqx.dataAdapter(typeSource);
				$("#itemtype").jqxComboBox({
                                    source: typeAdapter
                                    // Think I need something here to load the 2nd combo box
                                });
                                
			}
                        
                        
		}); 
                
                $('#itemclass').on('change', function (event) {
                        
                        if (event.args) {
                            var val = event.args.item.value;
                            document.getElementById('xitemclass').value = val;    // Set hidden input for PHP form.
                                                                                    
                        }
                });
                
                 $('#itemtype').on('change', function (event) {
                        
                        if (event.args) {
                            var val = event.args.item.value;
                            
                            
                        }
                });
                
                $('#itemtype').on('checkChange',function (event) {
                    
                     $('#itemtype').jqxComboBox('selectItem',<?php echo $default_itemtype;?>);
                   
                });
                             
	});
        

</script>

</head>
<body class='default'>
  
<div>
    
<span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Item Class:</span><div style="margin-left: 5px; float: left;" id="itemclass" value="1"></div>
	
<div style='clear: both;'></div>
  
<div style='margin-top: 20px;'>
    
<span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Item Type:</span><div style="margin-left: 5px; float: left;" id="itemtype"></div>
   
<!--  Hold the selection value for PHP Form (future) -->

<input type='hidden' id='xitemclass' value='0' name='xitemclass'></input>
<input type='hidden' id='xitemtype' value='0' name='xitemtype'></input>
<br />
   
</div>
    
</div>
</body>
</html>

April 28, 2015 at 1:14 pm Default Value for Cascading jqxComboBox from PHP #70379

Dimitar

Participant

Hello dpitchfo,

Here is my suggestion:

Set the default value of the first combobox on its bindingComplete event with the selectItem method.
The selectItem method of the first combobox will trigger its select event.
Reset the source of the second combobox on the select event of the first one (as shown in the PHP demo Cascading ComboBox) and select a default value for it with selectItem.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.