I'm trying to load search results into DataTables control. So after the user inputs some parameter and pressing the 'Search' button, then I would like to see the data loaded in the DataTables control. How do I initiate DataTables to load data through ajax only upon a user triggered event? All the examples I have seen all load data immediately. Thanks.
Use iDeferLoading in the initialisation code to prevent the datatable making a request on the initial page render.
'iDeferLoading': 1
Use fnDraw in your button click event to make the request with the user input as a parameter (see fnServerParams for this)
oTable.fnDraw();
Related
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
I have a visualforce page that uses a dynamic component to render some input fields. when a user hits the submit form button, I consistently receive a 'Not serializable: Component.apex.outputPanel' error.
Question is how best to use a dynamic component to render and bind some input fields so the record can then be submitted ? The variable I want to process on submit is declared in the page controller, but I cant get around the serialization error. Any suggestions most appreciated.
Cheers,
CH
Update:
this 'unable to submit a form while dynamic component rendered' remained a problem, so in the end I chose a different approach and whilst still used dynamic component, I avoided submitting the view state per standard salesforce approach, and instead submitted via a javascript remoting function that stringified all dynamic input fields client side, submitted to function which then parsed these out into a new sObject and performed DML. Done.
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.
Whenever I click the back button calling "history.back(1);"
the $(document).ready(...); is always triggered..
how to prevent it? I jsut want page loaded without doc.ready when back button clicked..
I have a radar chart which renders when read from json file. i have used listeners for this purpose. Now, I need this to be upgraded to rest call. I have a rest call which is fired when I click a button. This rest call returns data to a store and data model. I want to render the radar chart using this data. So each time the button is clicked, a new set of data is returned. How can I achieve the rendering of the radar chart each time new data is received?
If any code is needed, please feel free to ask for it.
Thanks.
I am rendering a mock chart initially using listeners. On button click I use a different set of data model, store and listeners (within the button's handler function). This store fires the rest call and loads the new chart each time the button is clicked.