[anubis76Participant]

Tried this a hundred different ways and can’t get it to work. I can see the data in my console. The records are mapped properly in my dataAdapter. And the funniest part is that it works just fine with Mozilla FireFox but just won’t create in Chrome. Can’t figure it out 🙁

[anubis76Participant]

Unfortunately, this created even more problems 🙁
It deleted all the other records in my data source and just left the first one. Back to square one 🙁

This was the main error that I found in my debugger after clearing my cache and re-running again:

“TypeError: Converting circular structure to JSON”

[anubis76Participant]

Update: FIXED the problem.

The issue was that my JSON data source had a cyclic redundancy error. Was able to remove it using a script, then passed the Stringified value as the datasource.

function initPersonalDataTreeGrid() {
    var ds = JSON.stringifyOnce(precords);
    tgSource =
             {
                 dataType: "json",
                 dataFields: [
                     { name: 'pat_id' },
                     { name: 'dob', type: 'date' },
                     { name: 'addresses', map: 'pat_id>addresses', type: 'array' },
                     { name: 'No', map: 'addresses>0>No', type: 'string' },
                     { name: 'Street1', map: 'addresses>0>Street1', type: 'string' },
                     { name: 'Street2', map: 'addresses>0>Street2', type: 'string' },
                     { name: 'Locality', map: 'addresses>0>Locality', type: 'string' },
                     { name: 'City', map: 'addresses>0>City', type: 'string' },
                     { name: 'State', map: 'addresses>0>State', type: 'string' },
                     { name: 'Country', map: 'addresses>0>Country', type: 'string' }
                 ],
                 id: "pat_id",
                 localdata: ds,
                 hierarchy:
                     {
                         root: "addresses"
                     }

             };

    var daTreeGridSrc = new $.jqx.dataAdapter(tgSource, {
        loadComplete: function () {

        },
        async: false
    });

    daTreeGridSrc.dataBind();
    console.log(daTreeGridSrc);

    $('#PersonalDataDiv').jqxTreeGrid({
        width: 600,
        height: 400,
        source: daTreeGridSrc,
        sortable: true,
        columns: [
            { text: 'Patient ID', dataField: 'pat_id', width: 5 },
            { text: 'Birth Date', dataField: 'dob', cellsFormat: 'D', width: 80 },
            { text: 'No', dataField: 'No', width: 30 },
            { text: 'Street 1', dataField: 'Street1', width: 100 },
            { text: 'Street 2', dataField: 'Street2', width: 100 },
            { text: 'Locality', dataField: 'Locality', width: 100 },
            { text: 'City', dataField: 'City', width: 100 },
            { text: 'State', dataField: 'State', width: 50 },
            { text: 'Country', dataField: 'Country' }
        ]
    });

}

Finally, it works! Cheers to another great component 🙂

The source code for the StringifyOnce (for removing cyclic redundancies):
[Add to the top of your JS file]:

JSON.stringifyOnce = function (obj, replacer, space) {
    var cache = [];
    var json = JSON.stringify(obj, function (key, value) {
        if (typeof value === 'object' && value !== null) {
            if (cache.indexOf(value) !== -1) {
                // circular reference found, discard key
                return;
            }
            // store value in our collection
            cache.push(value);
        }
        return replacer ? replacer(key, value) : value;
    }, space);
    cache = null;
    return json;
};

[anubis76Participant]

Hi Dimitar,

Thank you for your speedy reply 🙂

I changed the source back to daTreeGridSrc, but the TreeGrid still does not get created :/

I can’t figure out why. After the ListBox’s DataAdapter fires the LoadComplete event, my global variable precords gets updated. I can see the data inside the Records property of the DataAdapter but it still won’t create the TreeGrid (still get the “Uncaught: Invalid property: width or Invalid property: source” error when loading up.

[anubis76Participant]

PS: Forgot to add:

This is my JSON String that I first get from the Server:

[{“Id”:{“Timestamp”:1485162536,”Machine”:11567961,”Pid”:28386,”Increment”:4548143,”CreationTime”:”\/Date(1485162536000)\/”},
“pat_id”:”cad010117″,”pfname”:”Alex”,”plastname”:”Jones”,”dob”:”15th Jun 1997″,”addresses”:[{“No”:”123″,”Street1″:”2nd Cross Road”,”Street2″:”M S Ramaiah City”,”Locality”:”Arekere, Bannerghatta Road”,”City”:”Bengaluru”,”State”:”KA”,”Country”:”India”}],”contact”:[{“Res”:”80-44322344″,”Mob”:”9654323456″,”Email”:”alex.jones@yellowpages.co.in”,”Emergency_contacts”:[{“ecName”:”Alagappa”,”ecNum”:”9987623456″,”ecRel”:”Uncle”,”ecEmail”:”alagappa@randomshop.co.in”}]}]},

{“Id”: {“Timestamp”:1485162879,”Machine”:11567961,”Pid”:28386,”Increment”:4548144,”CreationTime”:”\/Date(1485162879000)\/”},
“pat_id”:”cad010118″,”pfname”:”Jenny”,”plastname”:”Adams”,”dob”:”12th Feb 1989″,”addresses”:[{“No”:”321″,”Street1″:”3rd Twisting Road”,”Street2″:”1st Random Inner Circle”,”Locality”:”BTM Layout 2nd Stage”,”City”:”Bengaluru”,”State”:”KA”,”Country”:”India”}],”contact”:[{“Res”:”80-45355354″,”Mob”:”9425876543″,”Email”:”jenny.adams@thebluehat.co.in”,”Emergency_contacts”:[{“ecName”:”Magda Lena”,”ecNum”:”9123456789″,”ecRel”:”Guardian”,”ecEmail”:”magda@lena.co.in”}]}]}]

[anubis76Participant]

Could not edit my previous post….
I am using jqWidgets 3.7.0

[anubis76Participant]

Hi @edwardsmarkf

I had the same issue and found that it was due to my HTML5 markup. I realized this when I tried playing around with a fiddle that either @dimitar or one of staff had posted.

In your HTML markup, if are you creating the email field using:
<input type='email'.......>

changing it back to <input type='text'....> may do the trick.

Regards,
AJ

[anubis76Participant]

Hi Dimitar,

Thanks for the reply. Have posted the screen shots:

Screen 1

Screen 2

As you can see, even with expanding all the TreeNodes, the actual content that is supposed to display on the right gets cropped.

Warmest,
AJ

[anubis76Participant]

Thanks Dimitar!

It worked! 🙂

[anubis76Participant]

Hi Dimitar,

Thanks for your reply. I’m afraid it still does not work. It only prints the visible portion of only the first tab.
Is there anything else I can try?

Warmest,
AJ

[anubis76Participant]

Hi,

Just thought I would add a short note for both .NET users as well as PHP users sending data to a .NET Web Service.

Not all hosting providers have ASP.NET Session State enabled. If this is the case, the above code that relies on Session variables will not work. Also, since the FileUpload method given above does not seem to use an AJAX method to send data, we can send data using a QueryString within the URL.

$("#jqxFileUpload").jqxFileUpload({ browseTemplate: 'success',
        uploadTemplate: 'primary',
        cancelTemplate: 'danger',
        width: 300,
        uploadUrl: 'UploadFiles.asmx/Upload?appid=' + appID,
        fileInputName: 'fileToUpload'
 });

appID is a global variable set elsewhere. The URL sends the appid as a parameter and in the webservice, change the method to:

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
    public string Upload() {
        //string appid = HttpContext.Current.Session["appid"].ToString();
          string appID = HttpContext.Current.Request.QueryString.Get("appid");
.......
    }

And lastly (and most importantly), add the following to your web.config (within the <system.web> section)

<webServices>
    <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
    </protocols>
      
</webServices>

@humpagm: Place the <div id=’jqxUpload’> tags outside the <form> and it won’t auto-postback.

Cheers, and thanks to the jqWidgets team for yet another great component 🙂
/AJ

[anubis76Participant]

Hi again,

Sorry, the problem was a mistake on my part. I was not setting the ccode variable when the form reloaded, so the combo-box validator returned neither a true nor a false, so it did not run at all. Problem solved.

[anubis76Participant]

I have narrowed down the source of the problem. I am using the validator with a ComboBox and for some reason, only if I change a value in the ComboBox and then change it back, the Validator starts to work. Very strange because it does not seem to happen with any of the other components I am validating. Here is the code for the Validator:

When the combobox is Selected, I am storing the value in a variable, ccode.

$('#divBasicDetails').jqxValidator({
        hintType: 'label',
        position: 'center',
        animationDuration: 0,
        rules: [
                    { input: '#txtAppName', message: 'Applicant Name is required!', action: 'blur', rule: 'required' },
                    { input: '#sexF', message: 'Please select a Gender', action: 'change', rule: function () {
                        var checked1 = $("#sexM").is(':checked');
                        var checked2 = $("#sexF").is(':checked');
                        return (checked1 || checked2);
                    }
                    },
                    { input: '#txtEmail', message: 'E-mail is required!', action: 'blur', rule: 'required' },
                    { input: '#txtEmail', message: 'Please enter a valid email!', action: 'blur', rule: 'email' },
                    { input: '#txtResM', message: 'Please enter a mobile number!', action: 'blur', rule: 'required' },
                    { input: '#txtResM', message: 'Please enter a valid number!', action: 'blur', rule: 'number' },
                    { input: '#txtResM', message: "Mobile Number should be 10 digits long!", action: 'change', rule: function () {
                        if (ccode == '91') {
                            var num = $('#txtResM').prop('value');

                            if (num.replace(/[^0-9]/g, "").length != 12)
                                return false;
                            else
                                return true;
                        }

                    }
                    }
                ]
    });

[anubis76Participant]

Hi Peter,

Thanks a lot. It works well when I put it after the code for creating the second list.

Cheers,
AJ

[anubis76Participant]

Hi Peter,

Thanks for your reply. What is the best way around the problem, to add Items to the second list programmatically on loading?

Warmest,
AJ

[Author]

Posts