jQWidgets Forums

Tagged: angularjs listbox, javascript listbox, jquery list box, ListBox

This topic contains 11 replies, has 2 voices, and was last updated by Ankit Shah 9 years, 11 months ago.

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

Author

Jqx-Listbox drag and drop issues warnings when disabled Posts
May 26, 2015 at 4:34 am Jqx-Listbox drag and drop issues warnings when disabled #71542
Ankit Shah
Participant
Hello JQWidget team,

In my development, I come across a scenario where on certain condition I need to disable the list box. This list box is also having drag and drop funtionality, where any item is dragged on to a textarea and textarea would have that dragged Item’s text (or value).
This functionality works okay until we disable the listbox. When we drag any item from list box, the chrome consol window start giving error like “Uncaught TypeError: Cannot read property ‘hide’ of undefined”. We are setting “disabled” and “allowDrag” properties to “true” and “false” respectively when disabling the listbox. please find below sample code and as it suggest we are working with Angular JS to implement the functionality.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>Initialize the jqxListBox from Array</title>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
	
    <script type="text/javascript" src="angular.js"></script>
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqx-all.js"></script>
	<script type="text/javascript" src="jqxangular.js"></script>
	 <script type="text/javascript">
		 var demoApp = angular.module("drag", ["jqwidgets"]);
        demoApp.controller("dragController", function ($scope) {
            $scope.people = ["Pedro", "Clara", "John", "Pier"];
            // init ListBox's settings object.
			
            $scope.listBoxSettings =
            {
                width: 200,
                height: 200,
                source: $scope.people,
				allowDrag:true,
				//disabled:false,
				dragEnd: function(event){
				$('#textArea').text(event.value);
				}
            }
			
		$scope.disableListbox = function(){
			$scope.listboxinstance.disabled = true;
			$scope.listboxinstance.allowDrag = false;
		};	
           
        });
		
        </script>
</head>
<body ng-app="drag" ng-controller="dragController">
    <div id='content'>
       
        <jqx-list-box id='dd' jqx-settings='listBoxSettings' jqx-instance="listboxinstance">
        </jqx-list-box>
		<textarea id="textArea"></textarea>
        <jqx-button  ng-click="disableListbox()" style='width:100px;height:25px'>Disable</jqx-button>
        </div>
    
</body>
</html>
```
Please suggest how we can get rid of this error or suggest us in case we are not doing it right way.

Thanks,
May 26, 2015 at 9:26 am Jqx-Listbox drag and drop issues warnings when disabled #71559

Peter Stoev
Keymaster

Hi Ankit Shah,

listboxinstance is never defined in your code. You can’t use undefined variables.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2015 at 4:35 am Jqx-Listbox drag and drop issues warnings when disabled #71598
Ankit Shah
Participant
Thanks Peter.

Please find updated e.g. as below. The thing is even after updating the code with your sugestion, we are getting the same error.
Please note that we are using 3.7 version of JQWidget.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>Initialize the jqxListBox from Array</title>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
	
    <script type="text/javascript" src="angular.js"></script>
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqx-all.js"></script>
	<script type="text/javascript" src="jqxangular.js"></script>
	 <script type="text/javascript">
		 var demoApp = angular.module("drag", ["jqwidgets"]);
        demoApp.controller("dragController", function ($scope) {
            $scope.people = ["Pedro", "Clara", "John", "Pier"];
            // init ListBox's settings object.
		
            $scope.listboxinstance = {};
            $scope.listBoxSettings =
            {
                width: 200,
                height: 200,
                source: $scope.people,
				allowDrag:true,
				//disabled:false,
				dragEnd: function(event){
				$('#textArea').text(event.value);
				}
            }
			
		$scope.disableListbox = function(){
			$scope.listboxinstance.disabled = true;
			$scope.listboxinstance.allowDrag = false;
		};	
           
        });
		
        </script>
</head>
<body ng-app="drag" ng-controller="dragController">
    <div id='content'>
       
        <jqx-list-box id='dd' jqx-settings='listBoxSettings' jqx-instance="listboxinstance">
        </jqx-list-box>
		<textarea id="textArea"></textarea>
        <jqx-button  ng-click="disableListbox()" style='width:100px;height:25px'>Disable</jqx-button>
        </div>
    
</body>
</html>
```
May 27, 2015 at 7:32 am Jqx-Listbox drag and drop issues warnings when disabled #71616
Peter Stoev
Keymaster
Hi Ankit Shah,

The code again is incorrect. Setting properties in jQWidgets in the following way:

$scope.listboxinstance.disabled = true;
$scope.listboxinstance.allowDrag = false;

is not and never was supported. The correct code is:
```
  <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.people = ["Pedro", "Clara", "John", "Pier"];
            $scope.listboxinstance = {};
            $scope.listBoxSettings =
            {
                width: 200,
                height: 200,
                disabled: false,
                source: $scope.people,
                allowDrag: true,
                //disabled:false,
                dragEnd: function (event) {
                    $('#textArea').text(event.value);
                }
            }

            $scope.disableListbox = function () {
                $scope.listBoxSettings.disabled = true;
                $scope.listBoxSettings.allowDrag = false;
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
       <div id='content'>
       
        <jqx-list-box id='dd' jqx-watch="[listBoxSettings.disabled,listBoxSettings.allowDrag]" jqx-settings='listBoxSettings' jqx-instance="listboxinstance">
        </jqx-list-box>
		<textarea id="textArea"></textarea>
        <jqx-button  ng-click="disableListbox()" style='width:100px;height:25px'>Disable</jqx-button>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
June 2, 2015 at 5:41 am Jqx-Listbox drag and drop issues warnings when disabled #71875

Ankit Shah
Participant

Hello Peter,

Thanks for pointing the errors. We are under impression that we can also set properties with “instance” object. But after carefully reviewing the documentation, we come to know that we can call methods only with “instance” object.

However, trying your given code we are still experiencing the issue.

Can you please suggest any remedy of this issue?

Also please note that the same issue we checked with 3.8 version of JQWidget library and same issue happens.

Thanks,

June 2, 2015 at 5:52 am Jqx-Listbox drag and drop issues warnings when disabled #71877

Peter Stoev
Keymaster

Hi Ankit Shah,

The code I posted works correctly with the current version of jQWidgets – 3.8. We don’t find any issues in it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 3, 2015 at 12:12 pm Jqx-Listbox drag and drop issues warnings when disabled #71970

Ankit Shah
Participant

Hi Peter,

The code is not working for me. I am using below steps to replicate the issue.

1) Open page in browser. The listbox is populated with some items.
2) Click on Disable button. This will disable the list box.
3) Open developer options of your browser (F12). I am using Chrome as my browser.
4) Try to drag item from listbox to textarea.
5) In browser consol you will get error while dragging the item. The error says “Uncaught TypeError: Cannot read property ‘hide’ of undefined”.

Can you please verify again?

Thanks in advance.

Ankit

June 9, 2015 at 4:40 am Jqx-Listbox drag and drop issues warnings when disabled #72178

Ankit Shah
Participant

Hi Peter,

Can you please answer to the question and let me know if you are able to replicate the scenario and if yes, how we should resolve this issue.

My utility relying on resolution of this issue before going on production.

Hope you understand the situation.

Thanks and I appreciate your help.

–Ankit Shah

June 9, 2015 at 5:29 am Jqx-Listbox drag and drop issues warnings when disabled #72186

Peter Stoev
Keymaster

Hi Ankit Shah,

I know how to use the Web Browser’s Console. No, I can’t reproduce such error with jQWidgets 3.8.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 11, 2015 at 10:23 am Jqx-Listbox drag and drop issues warnings when disabled #72320

Ankit Shah
Participant

Hi Peter,

My intention was not to show how to use browser’s consol and I am sorry if you feel so. I just wanted to show how I am seeing the issue.

For demo purpose, I created JSBin with the code you suggested.

Please follow below steps to replicate the issue. Also, I noticed that after page is loaded, and once you drag an item from list box and after that you disable the list box (via disable button), the issue is not occurring.

Please have a look at this content and suggest any solution to this.

Thanks,
Ankit Shah

June 18, 2015 at 4:13 am Jqx-Listbox drag and drop issues warnings when disabled #72658

Ankit Shah
Participant

Hello Peter,

Did you look into JSBin I provided in previous answer?

If not, can you please review it and let me know any solution to this?

Anticipating your reply soon
Thanks,

Ankit Shah

June 29, 2015 at 4:43 am Jqx-Listbox drag and drop issues warnings when disabled #73110

Ankit Shah
Participant

Hello Support team,

Do we have any updates on this?

Thanks,
Ankit Shah
Author

Posts

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

You must be logged in to reply to this topic.