jQWidgets Forums

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

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

Author

Trying to learn dataAdapter Posts

January 26, 2017 at 5:22 pm Trying to learn dataAdapter #91044

Participant

I am very new to jqWidgets. I am currently working on on existing app that uses ASP.NET (not MVC!). I am trying to load a jqxDropDownList using AJAX. This version uses a standard interface to call AJAX and load the results into the dropdownlist. This version works very well!


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jqxddl.aspx.cs" Inherits="jqxddl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>jqxWidgets Testing Area</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- ================================================================  -->
    <script src="jQuery/Version2.2.3/jquery-2.2.3.js"></script>
    <script src="bootstrap-3.3.6/js/bootstrap.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxcore.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxnumberinput.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxtooltip.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxbuttons.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxlistbox.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxdropdownlist.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxscrollbar.js"></script>
    <script src="Moment/moment.js"></script>
    <script src="scripts/ctm.js"></script>
    <!-- ================================================================  -->
    <link href="bootstrap-3.3.6/css/bootstrap.css" rel="stylesheet" />
    <link href="font-awesome-4.6.3/font-awesome-4.6.3/css/font-awesome.css" rel="stylesheet" />
    <link href="jqWidgets_4.4.0/styles/jqx.base.css" rel="stylesheet" />
    <link href="stylesheets/ctmstyles.css" rel="stylesheet" />
  </head>
  <body>
    <form id="form1" runat="server">
			<div>
				<label for="ddlDeviceGroups">jqxDropDownList:</label>
				<div id="ddlDeviceGroups"></div>
			</div>
			<div id="divInfo"></div>
    </form>
    <script type="text/javascript">
      $(document).ready(function () {
      	var myData = [];		// create an array
      	myData[0] = "GB";		// set the value of the first element in the array to a constant

      	var jsonData = JSON.stringify({ myData: myData });

      	console.log("document.ready: jsonData = " + jsonData);

      	$("#ddlDeviceGroups").jqxDropDownList({
      		width: '200',
					height: '25'
      	});

      	$.ajax({
      		type: "POST",
      		url: "WebService.asmx/getDeviceGroups",
      		data: jsonData,
      		contentType: "application/json; charset=utf-8",
      		dataType: "json",
      		success: OnSuccess,
					error: OnErrorCall
      	});		// end of $.ajax

      	function OnSuccess(response) {
      		console.log("document.ready.OnSucess:response.d = " + response.d);
      		var items = response.d;
      		$.each(items, function (index, val) {
      			var deviceClassGroup = val.DeviceClassGroup;
      			var groupDescription = val.GroupDescription;

      			$("#ddlDeviceGroups").jqxDropDownList('addItem', { label: groupDescription, value: deviceClassGroup });
      		});
      	};		// end of OnSuccess

      	function OnErrorCall(response) {
      		console.log(response);
      		alert("OnErrorCall: loading of Device Groups failed!");
      	};	// end of OnErrorCall

      });		// end of $(document).ready

    </script>
  </body>
</html>

I have then tried to convert the page above to use a jqxDataAdapter. The page loads and I don’t get any error messages, but the dropdownlist does not have any items loaded in it:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dropdownlist.aspx.cs" Inherits="dropdownlist" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jqxWidgets Testing Area</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- ================================================================  -->
    <script src="jQuery/Version2.2.3/jquery-2.2.3.js"></script>
    <script src="bootstrap-3.3.6/js/bootstrap.js"></script>
    <!--
    <script src="jqWidgets_4.4.0/jqwidgets/jqxcore.js"></script>
		<script src="jqWidgets_4.4.0/jqwidgets/jqxdata.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxnumberinput.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxtooltip.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxbuttons.js"></script>
		<script src="jqWidgets_4.4.0/jqwidgets/jqxlistbox.js"></script>
		<script src="jqWidgets_4.4.0/jqwidgets/jqxdropdownlist.js"></script>
    <script src="jqWidgets_4.4.0/jqwidgets/jqxscrollbar.js"></script>
    -->
    <script src="jqWidgets_4.4.0/jqwidgets/jqx-all.js"></script>
    <script src="Moment/moment.js"></script>
    <script src="scripts/ctm.js"></script>
    <!-- ================================================================  -->
    <link href="bootstrap-3.3.6/css/bootstrap.css" rel="stylesheet" />
    <link href="font-awesome-4.6.3/font-awesome-4.6.3/css/font-awesome.css" rel="stylesheet" />
    <link href="jqWidgets_4.4.0/styles/jqx.base.css" rel="stylesheet" />
    <link href="stylesheets/ctmstyles.css" rel="stylesheet" />
  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <label for="ddlDeviceGroups">Device Groups:</label>
        <div id="ddlDeviceGroups"></div>
      </div>
			<div id="divInfo"></div>
    </form>
    <script type="text/javascript">
      $(document).ready(function () {
      	var myData = [];		// create an array
      	myData[0] = "GB";		// set the value of the first element in the array to a constant

      	var jsonData = JSON.stringify({ myData: myData });

      	console.log("document.ready: jsonData = " + jsonData);

      	var url = "WebService.asmx/getDeviceGroups";

      	var source =
					{
						datatype: "json",
						datfields: [
							{ name: 'DeviceClassGroup', type: 'string' },
							{ name: 'GroupDescription', type: 'string' }
						],
						url: url,
						data: jsonData,
						type: "POST",
						async: false
					};

      	// var myDataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8' });

      	var myDataAdapter = new $.jqx.dataAdapter(source, {
      		contentType: 'application/json; charset=utf-8',
      		downloadComplete: function (data, textStatus, jqXHR)
      		{
      			return data.d;
      		}
      	});

      	$("#ddlDeviceGroups").jqxDropDownList({
					selectedIndex: 0,
					source: myDataAdapter,
					displayMember: "GroupDescription",
					valueMember: "DeviceClassGroup",
      		width: 200,
					height: 25
      	});

      });		// end of $(document).ready
    </script>
  </body>
</html>

Can anyone please help me identify what I am doing wrong that this won’t work using a jqxDataAdapter? I did try it where the source specified ‘aync: false’, ‘async: true’ and did not specify the ‘async’ value at all.

Many thanks!!!

January 27, 2017 at 1:28 pm Trying to learn dataAdapter #91053

Hristo

Participant

Hello stevelaforge,

I would like to suggest you try with simple examples to test the DataAdapter.
Also, you could try to implement loadError(jqXHR, status, error): callback of the DataAdapter to check for any error.
Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/bindingtojson.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

February 7, 2017 at 5:30 pm Trying to learn dataAdapter #91365

stevelaforge

Participant

So, I am trying to use the example that you provided, and I have at least made some progress in figuring out where the issue is occurring but I don’t know where to look next. FWIW…your reference to using the loadError callback was what got me the extra info. I have taken the demo that you sent me and have tried to convert it to use my ajax call. I am NOT trying to load the dropdownlist for now.

It appears that there is an issue with my source definition. When using $.ajax, my code looks like:


                var myData = [];
      		myData[0] = "GB";
      		var jsonData = JSON.stringify({ myData: myData });
      		console.log("jsonData: " + jsonData);
      		$.ajax({
      			type: "POST",
      			url: "WebService.asmx/getListOfDevices",
      			data: jsonData,
      			contentType: "application/json; charset-utf-8",
      			dataType: "json",
      			success: OnSuccess,
			error: OnErrorCall
      		})

So, I converted it to use a source definition of:


        var myData = [];    // create an array
        myData[0] = "GB";   // set the value of the first array element to the string "GB"

        var url = "WebService.asmx/getListOfDevices";
        console.log("document.ready > url = " + url);

        var jsonData = JSON.stringify({ myData: myData });
        console.log("document.ready > jsonData = " + jsonData);
          
        var source =
          {
            datatype: "json",
            datafields: [
              { name: 'DeviceClassGroup', type: 'string' },
	      { name: 'GroupDescription', type: 'string' }
            ],
            data: jsonData,
            type: "POST",
            url: url
          };    // end of source

I also tried using contentType: "application/json; charset=utf-8", in my dataAdapter definition since I don’t think that can be specified in the source.

As per your suggestion, I put the loadError callback in my dataAdapter. It looks like:

loadError: function (jqXHR, status, error) {
            // console.log("loadError> jqXHR = " + jqXHR);
            console.log("loadError> jqXHR.responseText: " + jqXHR.responseText);
            console.log("loadError> jqXHR.getResponseHeader: " + jqXHR.getResponseHeader);
            console.log("loadError> jqXHR.getAllResponseHeaders: " + jqXHR.getAllResponseHeaders);
            console.log("loadError> status = " + status);
            console.log("loadError> error = " + error);
          },  // end of loadError

The results that I get are:

loadError> jqXHR.responseText: {“Message”:”Invalid JSON primitive: %7B\u00261=%22\u00262=m\u00263=y\u00264=D\u00265=a\u00266=t\u00267=a\u00268=%22\u00269=%3A\u002610=%5B\u002611=%22\u002612=G\u002613=B\u002614=%22\u002615=%5D\u002616=%7D.”,”StackTrace”:” at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)”,”ExceptionType”:”System.ArgumentException”}
loadError> jqXHR.getResponseHeader: function(ag){var e;if(L===2){if(!K){K={};while((e=a.exec(ad))){K[e[1].toLowerCase()]=e[2]}}e=K[ag.toLowerCase()]}return e===undefined?null:e}
loadError> jqXHR.getAllResponseHeaders: function(){return L===2?ad:null}
loadError> status = error
loadError> error = Internal Server Error

Can you please help me understand what I have not properly translated from the $.ajax call to a jqWidgets source definition, or what I can do to further troubleshoot this issue?

I really want to understand how source and dataAdapter work because there is a lot of things that I see in the demos that I want to use, but they use source & dataAdapter and I have to be able to get them to work.

February 7, 2017 at 8:27 pm Trying to learn dataAdapter #91374

Peter Stoev

Keymaster

Hi Steve,

In general, if the AJAX call works for you, why don’t you use it and when you receive the data, create a dataAdapter with the data and fill your widgets with the dataAdapter? I’d like to suggest looking at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm which explains in details how to set HTTP variables to a server using the dataAdapter. I think you should implement the formatData function of the dataAdapter and there to put your JSON that you send, but look at the help tutorial at first.

Best Regards,
Peter Stoev

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

February 8, 2017 at 1:58 pm Trying to learn dataAdapter #91402

stevelaforge

Participant

Thanks Peter, I’ll take a look. To be honest, in looking at the samples, I had only seen a dataAdapter using a source, so I was not aware that I could reference an ajax call from a dataAdapter.

Author

Posts

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

You must be logged in to reply to this topic.