I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak.
You can see that in this video : grister problem video
However, as you can see on the video, if i add widget at beginning (not with add_widget function) there is no problem. Can you help me ? Something wrong with my code ?
Thanks in advance !
In my own experience, the main culprit was using the autogenerate_stylesheet setting. The problem is that it regenerates the css on every call to add_widget(), and this just absolutely kills browsers. Additionally, gridster has/had a bug where stylesheets get duplicated, filling the <head> with tons of duplicate style rules, making it tough on the browser(this bug was supposedly fixed, but my experience was that the fix only worked in specific scenarios, definitely not in mine).
When I used gridster, my widgets were always the same size. So, in my case, I was able to generate the stylesheet once, never needing to regenerate it.
I don't think its part of the public api, but you can just call generate_stylesheet() method once manually.
var gridster = $(".gridster ul").gridster({
autogenerate_stylesheet: false,
widget_base_dimensions: [140, 140],
//other options...
}).data('gridster');
gridster.generate_stylesheet({rows: 30; cols: 8});
//freely call gridster.add_widget(...); as many times as you like
Since you're only going to generate the stylesheet once, you need to make sure gridster will generate style rules for enough rows and columns to accommodate all your widgets, otherwise once you exceed the range, you'll experience broken layouts. Just supply an upper bound on rows and cols when calling generate_stylesheet(opts). If you don't, it seems like it defaults to whatever value your gridster instance is using for max_rows and max_cols.
The nice thing is by manually generating the stylesheet, is that you completely avoid the duplicate style bug too.
The exponential slowdown will be gone. Happy gridstering.
I know I'm a bit late on this but I had the same problem and none of the above solutions worked.
However, I found that I was generating the size and coordinates of the widgets as a string rather than an integer on the back-end.
By making sure they were integers I managed to speed things up loads.
The best way to fix it, is not to disable the autogenerated stylesheet, but to edit the fn.generate_stylesheet function in jquery.gridster.js
At the end of the function, just before these lines:
return this.add_style_tag(styles);
};
add this line:
this.remove_style_tags();
The final result would look like this:
this.remove_style_tags();
return this.add_style_tag(styles);
};
With this, each time a stylesheet is generated, the previous one is removed, so there no duplication problem!
Related
I'm trying to display multiple columns with a wxTreeListCtrl. I'm using wxWidgets 3.0.5 and developing with GTK, although I'm intending to use this code in OSX and Windows.
The screenshot below shows what I'm seeing (the application is a file browser, in case that's not obvious). The first column, Filename, is always sized to the width of the tree view. The other two columns are pushed off the right; you can see the scroll bar.
If I manually resize the window, the two columns pop into view, which makes me feel that the tree view hasn't been laid out properly, but the right-hand column's manually set width is always ignored and as I continue to resize the window it gradually gets larger and larger.
I've tried manually setting and getting the column widths, and it appears that the tree view control is mostly ignoring the numbers I give it --- if I call SetColumnWidth(...) and then GetColumnWidth(...) immediately afterwards, I get either 0 or an incorrect number.
The actual code is trivial --- this is all generated with wxformbuilder, so I'd expect it to work:
browserTree = new wxTreeListCtrl( browsePanel, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxTL_MULTIPLE|wxBORDER_THEME );
browserTree->AppendColumn( wxT("Filename"), wxCOL_WIDTH_DEFAULT, wxALIGN_LEFT, 0 );
browserTree->AppendColumn( wxT("Size"), 100, wxALIGN_RIGHT, 0 );
browserTree->AppendColumn( wxT("Mode"), 100, wxALIGN_LEFT, 0 );
(I should add that this behaviour manifests in the wxformbuilder GUI viewer, too.)
The main thing which makes me suspicious is that the widget hierarchy is pretty complex, so it's possible one of the parents is doing something to upset the tree view, but I've tried moving the tree view into a new box sizer in a new frame and exactly the same thing happens there. But there's a screenshot of the hierarchy below in case that helps.
I have found some very old bugs describing this behaviour (e.g. this one: https://github.com/wxWidgets/wxWidgets/issues/17476) but they're all really old and have been fixed anyway. If this were a real bug I'd expect to see a lot more complaints, as it makes the widget essentially unusable; therefore, this must be something I'm doing wrong, probably something really basic.
But what?
Welp, five minutes later I have an answer. I'm going to post this here in case someone else has the same problem, even though it makes me look really stupid.
Short version: it is that five-year old bug I found. It's just that the version of wxWidgets on Debian, which I'm developing on, is so old it hasn't picked up the bugfix.
The good news is that wxWidgets 3.2, which does have the bugfix, is being packaged right now (last post August 28 2022: https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=919903). But I don't think that'll help me much, so I'll need to find a workaround. At least now I know what's going on.
In order to refresh a part of the grid, i.e., when font or alignment changes, I was using the following approach:
wxRect rect1=CellToRect(TopLeft);
wxRect rect2=CellToRect(BottomRight);
wxRect r(rect1.GetTopLeft(), rect2.GetBottomRight());
RefreshRect(r);
This was refreshing only a part of the intended block and was not working correctly.
From the suggestions of intellisense I came across RefreshBlock function and it works correctly. I searched the docs and have not found any information on it. I wonder if it is not recommended to use RefreshBlock for some reason? What does RefreshBlock do, does it refresh a block (as the name suggests) or is it equivalent to Refresh?
I am using wxWidgets 3.2 on Win10.
Thanks in advance.
The function RefreshBlock() is indeed the best way to do what you want and it was only undocumented by mistake, i.e. we simply forgot to do it. I've added documentation for it only now, so it will only get included in 3.2.1, but you can still use it in your code, the function itself is available since 3.1.3.
It seems from the source code that, depending on the location of its parameters, RefreshBlock refreshes any of the following:
corner grid
frozen cols grid
frozen rows grid
main grid
Since the area I wanted to refresh was on the main grid the following approach works (the idea is similar to RefreshBlock's approach):
auto GridWnd = CellToGridWindow(TL);
wxRect rect = BlockToDeviceRect(TL, BR, GridWnd);
GetGridWindow()->RefreshRect(rect);
Now everything is refreshed correctly.
Notes:
If only RefreshRect(rect) is called, things will NOT work as expected.
Little experiment showed that BlockToDeviceRect(TL, BR) also works, therefore eliminating the need for auto GridWnd = CellToGridWindow(TL);
I'm having a problem with the datatables plugin.
I have table within a modal, which I edit in the table itself.
However when I'm adding a new row via table.row() the pagination gets weird.
Somehow instead of updating the pagination a new one appears beneath the old one. The new one gets updated while the old one doesnt.
double pagination
I have checked, the table is not declared again, but even if it were, "retrieve" is set to true so that's not it. If I knew where the problem came from, I'd be able to fix it but I have no clue. Any ideas?
Edit: I foud out that the problem is with deleting rows, not with adding them. Why exactly, I still don't know
I had some problems with Regex for my inputs and once I fixed those, everything worked just fine. So my guess would be that if an error is thrown, dataTables might be stopped while running, which in turn causes this behaviour. In actuality I have no clue, why this fixed the problem, but it did. If you have a similar problem, try eliminating all errors/uncaught exceptions, etc.
If anyone knows more, I'd be glad to find out about it
Thanks to everyone in advance -
So I have been banging on this issue for quite a while now and have burned through all my options. My current approach to canceling css requests is with nsIRequest.cancel inside of nsIWebProgressListener.onStateChange. This works most of the time, except when things are a little laggy a few will slip through and jump out of the loadgroup before I can get to them. This is obviously a dirty solution.
I have read through the following links to try and get a better idea of how to disable css before a nsIRequest is created...no dice.
https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler
https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request
https://developer.mozilla.org/en/Bird's_Eye_View_of_the_Mozilla_Framework
How do I disable css via presentation objects/interfaces? Is this possible? Inside of nsIDocShell there are a few attributes that kind of imply you can disable css via the browsers docshell - allowPlugins, allowJavascript, allowMetaRedirects, allowSubframes, allowImages.
Any suggestions?
Thanks,
Sam
The menu option that disables style sheets uses a function
setStyleDisabled(true)
so you probably can just call this function whenever new browser tab is created. Style sheets are still requested from server, but not applied. This function is not very sophisticated and doesn't mess with nsIRequest, source:
function setStyleDisabled(disabled) {
getMarkupDocumentViewer().authorStyleDisabled = disabled;
}
Digging in Web Developer Toolbar source code I have noticed that their "disable stylesheets" function loops trough all document.styleSheets and sets the disabled property to true, like:
/* if DOM content is loaded */
var sheets = document.styleSheets;
for(var i in sheets){ sheets[i].disabled = true; }
So if the key is to not apply CSS to pages, one of the above solutions should work. But if you really need to stop style sheets from being downloaded from servers, I'm affraid nsIRequest interception is your only option.
Set permissions.default.stylesheet to 2 and voilà!
You can actually use the permissions manager to block or allow stylesheets on a host-by-host basis.
Unfortunately there doesn't seem to be a simple flag like allowImages. The bugzilla adding for that is https://bugzilla.mozilla.org/show_bug.cgi?id=340746. You can now vote for it using the new bugzilla voting functionality. You can also add yourself to the CC list to be notified if anyone ever works on it.
A related request is to just give us basic HTML parsing support, which may be what you are trying to do. Unfortunately that isn't supported yet either, but you can vote/track the bugzilla for that at https://bugzilla.mozilla.org/show_bug.cgi?id=102699.
So the only workable solution seems to be some sort of interception as #pawal suggests. Here is a link that talks about the basics of interception to at least get you/us started https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads. It lists several options that I list below.
These first few seem to just be at the page/document level so I don't think they help:
Load Events (addEventListener load)
Web Progress Listeners (nsIWebProgressListener) - I tried this approach, it only seems to be called for the page itself, not for content within the page.
Document Loader Service - A global version of nsIWebProgressListener so I think it has the same problem (page level only)
That leaves two others I have not tried yet. They work globally so you would need to filter them to just the browser/pages you care about.
HTTP Observers - Seems like it might work, need to verify it calls back for CSS
Content Policy - Seems like the best option to me since it explicitly is called for CSS, someday I hope to try it :)
I was started to work on my first sample of the dijit.Tree control.
When it didn't work, I added a couple of dijit.form.Textbox'es to the screen, and they didn't work either, even though I have them working fine on a similar form.
Interesting enough, when I killed FireFox and restarted it, I was got a clear message in FireBug console on what was wrong with my tree control, and got it fixed.
But now I'm rather puzzled while the simple dijits like NumberTextBox that I added are not working.
My Samples:
1) http://3wcloud-com-provisioning-qa.appspot.com/testDijitDate - this works great
(except the initial date value not showing - I have a separate question open on that)
2) http://3wcloud-com-provisioning-qa.appspot.com/testDijitTree
I've done several "diff"s on the two files, and I kind find the difference that would cause one to work and one not to work.
Thanks,
Neal
You should put your dojo.require statements immediately in a script block, not wrapped in the onload callback. Also, your input tags should be HTML style without the XHTML style slash (you didn't declare XHTML in your document) though I doubt that's the problem. See if either of those things help.