Yesterday I have asked the same question and got only one answer (which I tryed, see below). I'm not sure why it got downvoted. I have deleted it and am not trying again, trying to be clearer, and stating what I have tryed until now.
I have a lot of data I want to display in an OpenUI5 applicatinon using sap.ui.commons and sap.ui.table libraries. As a backend server I use CherryPy which provides me the data (JSON) read from a SQLite databse. The backend is implemented in that way that the calling application provides an offset and and the number of rows it wants, beginning at that offset. I have already done so with another framework (w2ui).
This logic I need to reimplement with OpenUI5. What I have tryed so far:
Unfortunatly sap.ui.table.Table does not provide a event that is fired when the user scrolled to the end of the current table data. Else I simply could request more data into the Model (currently it's sap.ui.data.json.JSONMoel) from the server. I don't know whether it is possible to create such an event myself.
Pagination does have events, when the page was changed and which I could use to request further data. But the the controls at the bottom (arrows, page numbers) are only displayed for the current data. So if I load as many rows as one page could hold, a arrow button for the next page is not displayed. If I load data for two pages, it shows page numbers 1, 2 and arrows. But the next page arrow on page 2 is disabled, since there is no data for page 3. It also would add a new page number everytime data was added. One does never know how many pages there actually are as long as not all data was fetched.
The third option I read in this StackOverflow question. Here I am not quite sure if this is what I want. Although the question poster has exaclty the same problem as I do. Using ODataModel, if I understand it correctly, it still does load all the data from the backend but only renders the data that is visible for the user. I'm not quite sure how I would use that as I need. I don't know how it would automatically tell me the offset and number of rows. It is bound to the table model.
So my question would be which modules allow me to implement server communication as described.
EDIT
As for option 3, according to the comments I am doing it wrong. After creating a table
var oTable = new sap.ui.table.Table("table", {
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
threshold: 50,
toolbar: oTableToolbar
});
I bind the table data model as follows
var oModel = new sap.ui.model.odata.ODataModel("get_table_data_oui5", true);
sap.ui.getCore().setModel(oModel, "TableModel");
oTable.setModel(oModel);
oTable.bindRows("TableModel>/");
The function get_table_data_oui5 exposed by CherryPy is called and the only parameter it receives is a string $metadata (except when I add own parameter). It does not receive $top and $skip and no values to them.
EDIT 2
These are the function calls I can see within Firefox and Chromium. Nothing except the string $metadata is transfered. I'm sure I'm doing something wrong here but I don't know hat. If I have read correctly all I have to do is bind the model to the table.
Firefox:
Chromium:
Related
I have a page with user data, with ajax pagination using PHP. User's name is listed in descending order(last inserted data will be shown in first page). Suppose there are 3 pages having 2 data's(user name) per page . Imagine, i visited the second page it shows some data, imagine(Alan and Arun - user names). At the same time couple of data is inserted in the database and i requested the 3rd page. But it will show the same data as previous,as a couple of data is inserted in the database. My Question is - How can i handle this. It will create a confusion to the user. Hope you get my point.
One easy solution I could think of would be a timestamp, when you first requested the page. Now you keep this timestamp while navigating through the pages and only display entries older than the timestamp. This way, no new entries would pollute the result and mess with the pagination.
But you'd need to think of a mechanism to let the user include newer entries. E.g. a box display at the top saying "New entries available. Click here to refresh.". A click on this box would refresh the timestamp and navigate back to page 1.
You can create some kind of ping service in JS to see if there is any new update on the server. If there is: fetch it and update in your App. Also, you can create a unique identifier to solve the problem of duplication.
I have a page showing a large number of words. For each word I can run a non-trivial database query (left joining a few tables, for example). I would like the result of that query to be shown in a popover when I click on the word.
Running all the queries when the page is generated is not really an option as it would take a long time and be a bit wasteful.
Ideally, I would have a setup where, when clicking on the word, I somehow send a query to the server which would respond with the query result. I would then display the query result in the popover.
I am a beginner when it comes to webdev, but I imagine I am not the first person to have this use-case.
What would be the easiest way of obtaining the effect I have described above?
I am using popover.js (via Bootstrap 4). The server is written in Django, if it matters.
Since there is no code, I will explain what you need to do:
1 - Have a function on a specific URL that will receive a POST, do the query, and return the result (on a JSON)
2 - Have an Ajax post on your page that is triggered when you click on the word. That will make the request to your function (#1), and render the result on the popover.
Let me know if you need more details
I've been researching this like crazy, but I can't find a way to to get this error from triggering. I'm hoping someone here can help me.
I have a drop down list object on my page that I'm creating as a server control, but which I'm dealing with entirely client-side at run time. The reason why I'm using a server control at all is because I need it to trigger an AJAX updatepanel elsewhere on my page. Anyway, this dropdown list starts blank, but gets populated with options by some jquery code based on user input. Up to this point there's no problem, but when the user makes a selection from this dropdown, I get the ClientScriptManager error. Selecting from this dropdown triggers an ajax json call to get data from the server.
I'm registering all my client-side script files (including the one that contains the offending json call) with ClientScriptManager.RegisterClientScriptInclude. Registering the dropdown itself with RegisterforEventValidation doesn't work, because the dropdown has no options at load time.
The application works in spite of this, but the error is defeating some enhancements I want to make, so I need to put this to rest. You can see the application (and view the error in your browser's debugging console) at https://www.heritagecutter.com/MillingCalc/; the dropdown your looking for is the one headed "Series", which will become active after you make selections in Material Group and Material Type above. The error appears after you select a series.
Thanks in advance for any guidance.
Found a solution, for anyone who may stumble across this in the distant future:
So the situation with my code was that I was using mostly HTML objects, with ASP.NET server controls for those few instances where I was dealing with the server, even though those server controls were triggering client-side code at runtime. I did this because I are noobsauce.
I was already using client-side AJAX calls to contact the server for my data, so I cleared out the clever-clogs server controls (my offending drop down list, and the Ajax UpdatePanel in toto) and replaced them with HTML objects. I kept the .aspx page that contains my code, because I needed the code-behind to store the web methods being called by client-side script, and I left my web methods and ajax code alone, because the didn't need to be changed, and the error went away on the first try.
I go away somewhat embarrassed, but wiser for it.
I am trying to develop a Dojo DataGrid that returns a user's documents from the categorized BidsByDriver view and allows them to edit the Priority field in the grid. After getting past the hurdle of using the keys property to filter over the categoryFilter, this was easy to set up using an xe:viewFileItemService read/write service. However the problem with xe:viewFileItemService as a data source is it will display empty lines for each entry in the view after showing the user's documents in the grid.
To get around the blank lines I went down the path of creating an xe:customRestService that returned the jasonData for just the current user's documents. This fixes my blank lines problem but my data source is not in the correct read/write format to support the in-grid editing.
Here is the resulting Json data returned form the xe:customRestService ...
[{"Driver":"ddd","BidID":"123","Priority":"1","Trip":"644"},
{"Driver":"ddd","BidID":"123","Priority":"2","Trip":"444"},
{"Driver":"ddd","BidID":"123","Priority":"4","Trip":"344"},
{"Driver":"ddd","BidID":"123","Priority":"4","Trip":"643"}
]
Here are the Dojo modules I am loading:
<xp:this.resources>
<xp:dojoModule name="dojo.store.JsonRest"></xp:dojoModule>
<xp:dojoModule name="dojo.data.ObjectStore"></xp:dojoModule>
</xp:this.resources>
And here is the script to develop the data store for the grid:
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
var jsonStore = new dojo.store.JsonRest({target: "InGridCustom.xsp/pathinfo"});
var dataStore = dojo.data.ObjectStore({objectStore: jsonStore});
]]></xp:this.value>
</xp:scriptBlock>
All of this works very nicely except for the bit on providing the in-grid editing support. Any ideas appreciated.
How are you trying to save the changes? With a custom REST service, I would not expect that saving the data store would make any changes to the back-end data, which is why a refresh would revert it to the original value.
I would expect that you'd need to write a doPost method in your custom REST service to process the change on the server side, along with client-side code to call the post method and pass in the updates to process (along with the document ID).
UPDATED ANSWER:
I would try one or both of these approaches to fix your issue.
1) Have a category in your view, and use a categoryFilter and use the hack to make the service only return the correct values. Outlines in this question: XPages Dojo Grid editable cell does not save value when REST Service save() method is called
2) Change the rest service type to viewJsonService in combination with #1. If you get an error, double check the configuration document that Per mentioned. Also heed Per's comments in the linked question relating to configuration and using Firebug to make sure the correct method is used. The update must be a PUT, a POST will not work with the viewJsonService.
Original Answer (for context of comments)
Paul,
I believe that you need to have a button with code to save the changes back. Maybe you do, but you don't mention it and it isn't in your screen shots. The step that Per mentioned is very necessary so it is good that you have it taken care of. The button is necessary, to 'commit' the changes back. The act of inline editing doesn't trigger the PUT call. If you think about it, you wouldn't want an update after each change but one update when the user is finished editing.
If you don't figure out by this evening, I have working code that I can send you, but don't have access to at work.
The problem im having is that I have a table that when a user click on a button it adds a row to the table via javascript, which works fine. The problem is that if a user need to update other data the user click another button which refreshes the page and all rows the user created in the table are deleted. My question is what can I do to make the rows not to be deleted once the page is refreshed? I know some might think, just not refresh the page, but there is to much data that has to be displayed and a new query has to be generated to grab the data. Any help would be very much appreciated.
Thanks for all the comments. I thought I would edit my question b/c ppl are asking why dont you add it via server or via ajax. The reason is b/c I ran into a problem doing it that way on another application and I will explain the problem. When I add a row via server-side it worked great, but what I started to noticed it that some users would add up to 100 rows and it would get very slow and even time out, b/c every time a user would add a row, it would have to re-create all those rows everytime which caused it to timeout. That why I wanted to add rows via javascript(client-side) b/c you dont have to re-create all those rows everytime a user adds another row. If there is another way of handling this without slowing down the page or potentially timing out the page, please let me know. Its kinda driving me crazy!!! I have been an ASP programmer for years and kind of newer to .Net and it seems like there is no way around this
Use html5 localstorage to keep the value of your rows on the client, on every refresh recreate the rows from localstorage using javascript.
As a side note, unless you either have a LOT of rows or a lot of data in the rows, server side shouldn't be particularly slow and either case will make localstorage unusable.
Alternative, serverside store the data in a session variable, but do not return it as part of your main page, use ajax to retrieve it seperately client side and put it in your page (with paging if a lot of rows).
You need to make the server aware that you've added a column to the table. There are many ways to do this.
Each time you post-back to the server (because HTTP is stateless) it begins from the start, so it generates a fresh table for you.
To do this you need to execute some code on the server, the easiest way is to add the row on the server and not on the client as you currently are.
If you post how your table is being generated - we'll be able to point you in the right direction.
2 realistic methods here:
1) Don't reload the page. If you do a get from a script you can simply return json or xml and parse it within the javascript
2) Post to the server when you are adding a new row such that it is saved and can be used later when refreshing the page