8000 Cache when loading Options from URL · Issue #63 · volosoft/jtable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Cache when loading Options from URL #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gbisheimer opened this issue Jan 10, 2013 · 12 comments
Closed

Cache when loading Options from URL #63

gbisheimer opened this issue Jan 10, 2013 · 12 comments
Assignees
Labels
Milestone

Comments

@gbisheimer
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

That's also a good point. Thanks.

@hikalkan
Copy link
Member

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
Copy link
Contributor Author

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.

@ghost ghost assigned hikalkan Jan 19, 2013
@hikalkan
Copy link
Member

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:

jtable-cascade-drop-down-sample

@gbisheimer
Copy link
Contributor Author

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
Copy link
Member

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 :)

hikalkan added a commit that referenced this issue Jan 25, 2013
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
Copy link
Member

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.

hikalkan added a commit that referenced this issue Jan 30, 2013
Multiple dependsOn support. [#94]
Enhanced option caching. [#63]
Portuguese - Portugal localization. [#142]
Chinese localization. [#103]
Fixed some issues. [#90, #28, #130]
hikalkan added a commit that referenced this issue Feb 10, 2013
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]
gbisheimer pushed a commit to gbisheimer/jtable that referenced this issue Feb 13, 2013
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
Copy link

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
Copy link

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
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants
0