jQWidgets Forums

jQuery UI Widgets Forums Layouts Panel and Responsive Panel Getting javascript uncaught error while using jqXPanel loadcomplete

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • walker1234
    Participant

    I have two JS files as shown below (page1.js) and (page2.js for reference included below). I am basically referring to the following
    JSON response while working :

    {
    	"webservice_status": {
    		"status": "SUCCESS",
    		"message": ""
    	},
    
    	"my_document_list": [{
    
    			"doc1": "445",
    			"doc2": "445",
    			"doc3": "445",
    			"doc4": "445",
    			"content": "Some text here to display"
    		}
    
    	]
    }

    Here are my page1.js related work:

    
     $("#mydoclist").on('rowclick', function (event) {
    			row = event.args.rowindex;
    			datarow = $("#mydoclist").jqxGrid('getrowdata', row);
    			var response = JSON.stringify(datarow, null, 10);
    			var docID  = datarow["doc_id"];
                self.getMyDocumentContents(docID);
    
       });
    
    this.getMyDocumentContents = function (contentID_) {
    
                                   
                    var data = {
                          doc_id: contentID_
    	        }
    
                   app_.get(data, self.processContent, app_.processError, url_name);
    
                   
    }// End of getMyDocumentContents
    
    this.processContent = function(data_,textStatus_,jqXHR_) {
    
          data_ = app_.convertResponse(data_,jqXHR_);
          console.log("Checking for actual data_ content:", data_); 
          console.log("Actual Data Length Check for data_ content:", data_.my_document_list.length); 
    	
          // debugger;
              
          var collection = data_.my_document_list.length[0].content;
          console.log("Collection Check",collection);
    
          //debugger;
    
           var source = {
             localdata: collection,
             datafields: [{
             name: 'content',
             type: 'string'
           }],
          datatype: "array"
          };
    
                
          var dataAdapter = new $.jqx.dataAdapter(source, {
    
               loadComplete: function (records) {
    
                    debugger;
    
                    var html;
                    
    		  //Get data
                var records = dataAdapter.records;
    		    console.log("Check for records:",records.length);
                var length = records.length;
                html = "<div style='margin: 10px;'><pre>" + records[0].content + "</pre></div>";
    			$("#docContentPanel").jqxPanel('clearcontent');
                $("#docContentPanel").jqxPanel('append',html);
    
                },
                loadError: function (xhr, status, error) { },
                beforeLoadComplete: function (records) {
    
                }
    
               });
    
                // perform data binding
                dataAdapter.dataBind();
    
                var panel = $("#docContentPanel");
                var content = panel.html();
    			panel.jqxPanel({ width: '750', height: '500', scrollBarSize: 20 });
    
     }// End of processContent
    	
    
    	
    	

    page2.js

     
     this.get = function (data_, done_, fail_, webServiceKey_) {
    
            // Lookup the requested web service URL
            var url = https://documentlookup.com:8443/getmydocuments;
            
    
            // Create the AJAX request.
            $_.ajax({
                data: data_,
                method: "GET",
                url: url
            })
            .success(done_)
            .error(fail_);
        };
    	
    	
     // If the JSON data was returned with content type of "text/plain", parse as JSON before returning.
        this.convertResponse = function (data_, jqXHR_) {
    
            return (typeof(data_) === "object" ? data_ : JSON.parse(data_));
            
        };	

    Basically there is a list of rows displayed in a jqxgrid(not mentioned in the code below), when a user clicks on it
    $("#mydoclist").on('rowclick' gets called , which calls the following function:

    getMyDocumentContents function: This function basically passes the doc_id inside data variable which is made
    available for the following function:

    processContent:

    In this function, I am trying to show the content value of the my_document_list array in a jqxPanel.

    Problem I am facing inside this function:

    As can be seen, there are debugger I placed at various places which are currently commented except at one place
    which is just below this line loadComplete: function (records) {

    I don’t get any error above this line var dataAdapter = new $.jqx.dataAdapter(source, { , however, as soon as
    I place it inside it, I get the following error:

    Uncaught TypeError: Cannot use ‘in’ operator to search for ‘length’ in jquery-1.11.1.js:583

    Where length is a numerical number which keeps on changing depending upon the length of content of the above JSON
    response.

    Could anyone tell me what’s going wrong? thanks in advance !

    Just in case needed, here is the jQuery line #583 isArraylike function :

    
    function isArraylike( obj ) {
    	var length = obj.length,
    		type = jQuery.type( obj );
    
    	if ( type === "function" || jQuery.isWindow( obj ) ) {
    		return false;
    	}
    
    	if ( obj.nodeType === 1 && length ) {
    		return true;
    	}
    
    	return type === "array" || length === 0 ||
    		typeof length === "number" && length > 0 && ( length - 1 ) in obj; // THIS is LINE 583 which throws error
    }

    Hristo
    Participant

    Hello walker1234,

    The issue that you mentioned is not part of our widgets.
    Also, I didn’t see where you use “isArraylike” function but it looks like try to use ‘key’ of this “obj” object that doesn’t exist.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    walker1234
    Participant

    Hello Histro,

    Thanks. As I see that datatype: the data’s type has following possible values: ‘xml’, ‘json’, ‘jsonp’, ‘tsv’, ‘csv’, ‘local’, ‘array’.

    Could you please tell me if in the following section of code above:

    var source = {
             localdata: collection,
             datafields: [{
             name: 'content',
             type: 'string'
           }],
          datatype: "array"
          };

    I have specified datatype: "array". Is this correct? The reason I am asking is because when I run the following two lines of code:

    var collection = data_.my_document_list.length[0].content;
    console.log("Collection Check",collection);

    I can see that it’s printing the following value Some text here to display for the above line console.log("Collection Check",collection);.

    Should I be using something different for the datatype in the following section of code instead of array? If not, then should I be passing something different than data_.my_document_list.length[0].content; for the value of collection?

    var source = {
             localdata: collection,
             datafields: [{
             name: 'content',
             type: 'string'
           }],
          datatype: "array"
          };

    Thanks !


    Hristo
    Participant

    Hello walker1234,

    You could check the type of your variable – collection.
    If it is an array use datatype: "array", if it is a string as this kind { a: 1, b: 2 } you should set datatype: "json".

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.