Cache when loading Options from URL #63

gbisheimer · 2013-01-10T23:13:13Z

Hi hikalkan,

It would be nice to have the posibility to clear cache contents on demand, or may be, just not store data retrieved from database into the cache, as it may be constantly changing and cache prevents showing new data.

Thank you. Cheers!,

gbisheimer

hikalkan · 2013-01-11T19:45:04Z

I'll make changes on loading options after v2.0.0 release. Thank you for your suggestion, I marked it as feature request, and evaluate it.

gbisheimer · 2013-01-11T20:46:12Z

Just one more thing to note on options fields. Options are stored in an object as key => value. When this field is rendered on screen, options are shown ordered according to the key value and there is no way to apply a user defined order. For instance, i need to show this options in the original order:
{'20': 'john','34':'doe', '5':'jack'}
but they are rendered as:
{'5':'jack', '20': 'john','34':'doe'}

I've patched your code already to fix this issue because I'm not sure if there is a workaround for it.

Thank you,

gbisheimer

hikalkan · 2013-01-12T12:59:37Z

That's also a good point. Thanks.

hikalkan · 2013-01-18T20:04:53Z

I think to allow user to define a function for options, for instance:

CityId: {
    title: 'City',
    width: '12%',
    options: function(data) {
            //return an object, an array or a url.
        }
}

So, user can dynamically return options.

data parameter will be an object and you can get record using data.record.

Caching will be made only if return value is a url. Also, if url changes, a new cache will be created for new url (so, cached per url).

Also you can clear cache with data.clearCache(); method.

If this enough solution for your problems?

gbisheimer · 2013-01-18T20:40:27Z

Take a look at this plugin,
https://github.com/gbisheimer/jtable/blob/master/dev/jquery.jtable.options.nocache.js

Here you can define a option per field which enables or disables cache for
that field only. Also, options is an array of objects, so each option
retains original position returned from URL.

I'll wait for your comments.

2013/1/18 hikalkan notifications@github.com

I think to allow user to define a function for options, for instance:

CityId: {
title: 'City',
width: '12%',
options: function(data) {
//return an object, an array or a url.
}
}

So, user can dynamically return options.

data parameter will be an object and you can get record using data.record.

Caching will be made only if return value is a url. Also, if url changes,
a new cache will be created for new url (so, cached per url).

Also you can clear cache with data.clearCache(); method.

If this enough solution for your problems?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/63#issuecomment-12438702.

hikalkan · 2013-01-22T19:59:05Z

I see your solution, it's nice also. But I implemented a little more dynamic caching.

An example uses caching:

CityId: {
    title: 'City',
    width: '12%',
    options: '/Demo/CityList'
}

An example clears cache if some condition is true:

CityId: {
    title: 'City',
    width: '12%',
    options: function(data) {
            if(some-condition) {
                data.clearCache();
            }
            return '/Demo/CityList';
        }
}

So, if we provide a boolean value indicates that whether this options is cached or not, it may cause a performance problem since jTable downloads options for each row in the table (not just for edit/create forms).

Also I added some arguments that provides cascade drop downs.

ContinentalId: {
    title: 'Continental',
    options: 'Demo/GetContinentalOptions',
    list: false
},
CountryId: {
    title: 'Country',
    dependsOn: 'ContinentalId', //Countries depends on continentals. Thus, jTable builds cascade dropdowns!
    options: function (data) {
        if (data.source == 'list') {
            //Return url of all countries for optimization. 
            //This method is called for each row on the table and jTable caches options based on this url.
            return 'Demo/GetCountryOptions';
        }
        //This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
        //data.source == 'edit' || data.source == 'create'
        return 'Demo/GetCountryOptions?continentalId=' + data.dependedValues.ContinentalId;
    },
    list: false
},
CityId: {
    title: 'City',
    width: '30%',
    dependsOn: 'CountryId', //Cities depends on countries. Thus, jTable builds cascade dropdowns!
    options: function (data) {
        if (data.source == 'list') {
            //Return url of all cities for optimization. 
            //This method is called for each row on the table and jTable caches options based on this url.
            return 'Demo/GetCityOptions';
        }
        //This code runs when user opens edit/create form or changes country combobox on an edit/create form.
        //data.source == 'edit' || data.source == 'create'
        return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
    }
},

dependsOn option and data.dependedValues object provides efficient way of cascade drop downs. See the screenshot:

gbisheimer · 2013-01-23T11:20:32Z

It's a nice and very dynamic solution. I didn't realize that options are loaded from server for each table row when not cached. I think you clearCache() function should have effect only when entire table is loaded / redrawn and not every time options are loaded for a field.
Anyway, option's cache should not relay on url string change for reloading data, because (referring to you dependsOn example) user may add a city to the city list on one table and this new value should be available immediately on other option fields for other tables.

hikalkan · 2013-01-23T21:36:09Z

If your situation is that (A city may be added from another table/page), yes, you must use clearCache() when data.source is edit or create as like below:

CityId: {
    title: 'City',
    width: '30%',
    dependsOn: 'CountryId', //Cities depends on countries. Thus, jTable builds cascade dropdowns!
    options: function (data) {
        if (data.source == 'list') {
            return 'Demo/GetCityOptions';
        }
        data.clearCache();
        return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
    }
}

This solved the problem:

But, in this situation, still, there is a problem:

When your table is open, if you open another window and add a new city for a country, then add a new student that lives in that city, then you return the first table (which cached the cities) and change the page to find new added student, City column in the table for new students is shown as undefined.

For a solution, I can clear caches when user changes a page or reloads/refreshes the table, but this is also a performance cost for me. Maybe, I can do it optional, since not everyone come across such a scenario.

Also, for a nicer solution, you can use 2 fields. One for listing (not edit/create), it contains the Name of City, not CityId. Second field is for create/edit. Only problem occurs on updates (synhronizing fields). This can be solved by returning name of the city from server after update (http://jtable.org/ApiReference#act-updateAction).

I will think on a better hybrid solution for that. As you see, it may be complex such a simple problem :)

Added cascade dropdowns and creating dynamically option list support. [#63, #94] Added field options: dependsOn and optionsSorting. Polish localization (by Grzegorz Zbucki). [#97] Lithuanian localization (by Vygandas Šimkus). [#103] Portuguese - Brazilian localization (by Renato Bigliazzi). [#129] Fixed some issues.

hikalkan · 2013-01-29T20:15:03Z

I found a solution for the problem desribed above (jTable caches options, user (from another window) adds a new option and a new record using this option, we change the page, get the new record but new option is not in the cache)

var cacheKey = 'options_' + fieldName + '_' + optionsSource; //create a unique cache key
if (funcParams._cacheCleared || (!this._cache[cacheKey])) {
    //if user calls clearCache() or options are not found in the cache, download options
    this._cache[cacheKey] = this._buildOptionsFromArray(this._downloadOptions(fieldName, optionsSource));
    this._sortFieldOptions(this._cache[cacheKey], field.optionsSorting);
} else {
    //found on cache..
    //if this method (_getOptionsForField) is called to get option for a specific value (on funcParams.source == 'list')
    //and this value is not in cached options, we need to re-download options to get the unfound (probably new) option.
    if (funcParams.value != undefined) {
        var optionForValue = this._findOptionByValue(this._cache[cacheKey], funcParams.value);
        if(optionForValue.DisplayText == undefined) { //this value is not in cached options...
            this._cache[cacheKey] = this._buildOptionsFromArray(this._downloadOptions(fieldName, optionsSource));
            this._sortFieldOptions(this._cache[cacheKey], field.optionsSorting);
        }
    }
}

I checked the situation and re-download options if needed.

Multiple dependsOn support. [#94] Enhanced option caching. [#63] Portuguese - Portugal localization. [#142] Chinese localization. [#103] Fixed some issues. [#90, #28, #130]

Feature: Toolbar. [#188] Feature: 'Change page size' combobox. [#1, #128] Feature: 'Go to page' input. [#63] Feature: Multiple sorting of columns by holding CTRL key. [#48] Added options: multiSorting, gotoPageArea, pageSizes, pageSizeChangeArea, pageList and toolbar. Hungarian and Italian localizations [#179] Fixed some issues. [#209]

Feature: Toolbar. [volosoft#188] Feature: 'Change page size' combobox. [#1, volosoft#128] Feature: 'Go to page' input. [volosoft#63] Feature: Multiple sorting of columns by holding CTRL key. [volosoft#48] Added options: multiSorting, gotoPageArea, pageSizes, pageSizeChangeArea, pageList and toolbar. Hungarian and Italian localizations [volosoft#179] Fixed some issues. [volosoft#209]

Foksadure · 2013-08-03T21:33:50Z

Hey there,

On a project I'm working on, I have a performance problem with 3 linked options lists (departments, zipcode and city names), and the fact that jTable issues an Ajax call for each and every row, as per the cascade drop downs example :

options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/Demo/GetCountryOptions?continentalId=0';
}

In my implementation (Classic ASP, IIS 6.0 w/ gzip compression enabled, sqlite database), each call is very costly and pointless since the response is always the same : a 88KB list of zipcodes. The result is a verry sloppy refreshing table when navigating the datas.

I believe I have a jTable.org cache issue, since changing jQuery.ajaxSetup() options to GET instead of POST enables the browser to cache the server response, and the problem goes away. Unfortunately, it seems difficult to force the cache mecanism when using POST requests since - i'm quoting http://api.jquery.com/jQuery.post/ here "Pages fetched with POST are never cached, so the cache and ifModified options in have no effect on these requests".

I tried to basically spit out the JSON without accessing the database, but jTable won't cache the datas anyway. Its hardly understandable since the url won't change either, and it has no parameters anyway.

Overall, I'm very impressed by jTable and the work behind it, BTW, but unfortunately developping a small CRUD application with it took me more time than I expected. (I must add that I'm a very casual web developper, using bits for here and there to achieve my goals).

Any suggestion is welcome.

Keep up the good.work.

Cheers.

sulemantech · 2016-01-11T16:43:17Z

Hi Everyone,
I has been a while, but I am facing the same issue "Foksadure" is facing. I am loading multiple option in a jtable I am using and it is a performance overhead now. Can you please direct me to a better solution here? A solution like where I can load all the options at once and then reuse the json objects for different options.

Best Regards,
Sulman

Foksadure · 2016-01-13T09:03:46Z

@shahrpt (Sulman) 👍

Hi,

FYI, in my case, I ended up using mockjax to prefetch and cache datas locally, which then fools jtable Ajax calls for these datas.
Works like a charm : performance problem solved.
Then again, these are static values (zipcodes, basically).

Cheers.

ghost assigned hikalkan Jan 19, 2013

hikalkan mentioned this issue Jan 22, 2013

cascade drop down lists #94

Closed

hikalkan closed this as completed Jan 22, 2013

hikalkan added a commit that referenced this issue Jan 30, 2013

jTable v2.1.1

ccb806d

Multiple dependsOn support. [#94] Enhanced option caching. [#63] Portuguese - Portugal localization. [#142] Chinese localization. [#103] Fixed some issues. [#90, #28, #130]

debianlinux mentioned this issue Jun 19, 2013

jTable caches opening ListAction #716

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Cache when loading Options from URL #63

Cache when loading Options from URL #63

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Cache when loading Options from URL #63

Cache when loading Options from URL #63

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!