jQuery UI Widgets Forums Lists ListBox JSON Parse Error while loading data from SQL

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

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

  • bindu
    Participant

    Hi i m trying to create a List Box where it display’s the employee name from my database table.I have create jsp file to establish connection and flush out data in json format.My jsp has returned the data as follows:
    [{“name”:”john”,”emailID”:”john@gmail.com”},{“name”:”janet”,”emailID”:”janet_123@gmail.com”}] which is indeed a json format.

    So i am trying to display the same in my html file with the following code:

    
        var source = {
               	
                        dataType: "json",
                        datafields: [{ name: 'name'},{ name: 'emailID'}],
                        
                        url:'select-data.jsp',
                        async:true
                    };
     var dataAdapter = new  $.jqx.dataAdapter(source,          
                     {
                        loadComplete: function () {
                            var length = dataAdapter.records.length;
                            alert(length);},                			
                    	loadError: function (msg, status, error) {
                                    alert(msg.responseText + " Error status:" +status+ " Error is:" +error );}
                                  });
                     
                    $("#jqxListBox").jqxListBox(
                    		{ source: dataAdapter,
                    			displayMember: "name", valueMember:"emailID",width: 200, height: 250, selectedIndex:0});
    
                        });
                   
        </script>
    </head>
    <body>
        <div id="jqxListBox"></div>
    </body>

    But i am getting an Error displayed as ——- Prints(returns) the JSON array—->[{“name”:”john”,”emailID”:”john@gmail.com”},{“name”:”janet”,”emailID”:”janet_123@gmail.com”}] Error status:parseerror Error is:Syntax Error:Invalid Character

    i dont find anything invalid in the json string.

    I have tried the other way to directly pass this string as a local data.Then it successfully loaded.Kindly help me


    Hristo
    Participant

    Hello bindu,

    Semantic code looks correct. Only thing I noticed is that there are additional ‘});‘.

    <script>
        var source = {
            dataType: "json",
            datafields: [
                { name: 'name' },
                { name: 'emailID' }
            ],
            url: 'select-data.jsp',
            async: true
        };
    
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                var length = dataAdapter.records.length;
                alert(length);
            },
            loadError: function (msg, status, error) {
                alert(msg.responseText + " Error status:" + status + " Error is:" + error);
            }
        });
    
        $("#jqxListBox").jqxListBox({
            source: dataAdapter,
            displayMember: "name",
            valueMember: "emailID",
            width: 200,
            height: 250,
            selectedIndex: 0
        });
    </script>

    (corrected)

    And one simulation of Your code: http://jsfiddle.net/txhi/p0kucrd6/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 6 years, 8 months ago by  Hristo.
    • This reply was modified 6 years, 8 months ago by  Hristo.

    bindu
    Participant

    That is for the document.ready(function(){ ….
    Now adding the complete code

    
    <!DOCTYPE html>
    <html>
    <head>
    <title>jqxListBox with data from a MySQL database.</title>
    <link type="text/css" rel="Stylesheet"
    	href="../jqwidgets/styles/jqx.base.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/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
         $(document).ready(
                function () {
             	
                    var source = {
                        dataType: "json",
                        datafields: [{ name: 'name'},{ name: 'emailID'}],
                        url:'select-data.jsp',
                        async:true
                    };
                    
                   
                    var dataAdapter = new  $.jqx.dataAdapter(source,          
                     {
                        loadComplete: function () {
                            var length = dataAdapter.records.length;
                            alert(length);},                			
                    	loadError: function (msg, status, error) {
                                    alert(msg.responseText + " Error status:" +status+ " Error is:" +error );}
                                  });
                     
                    $("#jqxListBox").jqxListBox(
                    		{ source: dataAdapter,
                    			displayMember: "name", valueMember:"emailID",width: 200, height: 250, selectedIndex:0});
    
                        });
                   
    </script>
    </head>
    <body>
    	<div id="jqxListBox"></div>
    </body>
    </html>

    No change in the output.Experiencing the same parse Error.I dont find any option to send the screenshot of the error in this forum.I am just getting a blank List box without any data

    As i told the problem is only when getting data from a jsp file.Thought the format is correct its showing up the parse error

    • This reply was modified 6 years, 8 months ago by  bindu. Reason: Added additional sentence to make the problem clear

    Hristo
    Participant

    Hello bindu,

    We tried to simulate this with Your code and looks work fine. Something mess with settings on server side.
    Please take a look this article:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/configure-mysql-eclipse-tomcat.htm?search=
    There we have a tutorial “How to create a sample MySQL database”.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    bindu
    Participant

    Hello Hristo,

    I don’t think the problem is at server side,because when i ran the jsp file(select-data.jsp) the flushes the sql data it resulted as below:
    [{“name”:”john”,”emailID”:”john@gmail.com”},{“name”:”janet”,”emailID”:”janet_123@gmail.com”}] .Anyway i will dig more and update you if i find any issue.

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

You must be logged in to reply to this topic.