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
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.
So my problem is if there are 2 pages for example. PricePage.html has the list of prices and UpdatePrice.html has the input text and etc. If I use the UpdatePrice.html to change the prices of PricePage.html, whats the best way should I use? via php to php or via php to mysql or theres even an easier way to do it. Sorry for my bad english.
Don't think of it as updating one page from another. Think of it as two separate pages that both interact with a database.
Store your price information in a database (such as MySQL).
Have PricePage query the database to get the price information, and generate the HTML to display it. (This means the page can't be just static HTML; it needs to use something like PHP that can generate HTML dynamically.)
Have the UpdatePrice page store the new price information in the database. (This doesn't directly modify PricePage, but next time someone views that page, it'll retrieve and display the latest information in the database.)
If you want the data to get updated in real time like once the data is updated it gets reflected on other page,then you can use sockets which will listen for the update event and once the event is fired the contents will get updated.
One of the most popular framework for this business is socket.io.
I would suggest you to have a look to it.The benefit for using this approach is that you save a lot of resource and the functions work in realtime.
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:
I want to save modifications made on a HTML page(modifications made with JQuery), PERMANENTLY! I have read that this thing gets possible by sending an Ajax call and saving it in a table in a database, but what do you actually save in the database? The URL of the page? And what do you retrieve back in the Ajax call so that your modifications actually stay on the page?
This is a Spring MVC based web application, in case this information is needed.
I have no clue how to start or if to start trying saving it, because I have also read that this thing might not be possible, as we're talking about Client-Side modifications.
Modification that I am trying to make:
function versionOne() {
$('#title').addClass('text-center');
$('#title').css({"margin-top":"0px","color":"black", "font-size":"45px"});
$('#title').append('<hr>');
$('#content').addClass('col-md-6');
$('#content').css({"margin-top":"80px","font-size":"20px", "text-align":"center"});
$('#picture').addClass('col-md-6');
$('#picture').css({"border-radius":"25px", "margin-top":"50px"});
}
I'd be grateful for some suggestions!
Thanks :)
Saving the whole page won't work in most cases since it's very hard to also save the JavaScript state. So while you can save a static copy of the page without JavaScript with $('html').html(), that doesn't get you very far (or causes more trouble than it's worth).
What you want is "preferences". The site should remember some specific values. The usual approach is to load the preferences from the database before the server sends the page for the client. Apply them to the elements of the page and send the result to the browser. That way, the page looks as expected when the user sees it.
When the user changes these settings, use JavaScript to update the page and send the changes as AJAX requests to the server to persist them in the database.
When the user returns to the page, the code above will make sure that the page now looks as before.
So I have this webpage that I'm making which allows people to create elements on the page on the fly. And I want to be able to save those elements to my server and whenever someone else reloads that page, the webpage will have those saved elements.
I'm not a good web programmer by any means, so take it easy with the web jargon xD
The user created elements are nested 's or lists. Those elements can be deleted at anytime as well.
So I was reading about saving them as JSON but how would I go about doing that as my 's, most of the top level ones will have the same class. Never worked with JSON before, so I'm a real noob at that.
Will the server file keep replacing itself with a brand new copy with each addition/deletion?
And I'd like to get a little help with showing the new elements without updating. On other users page. I read about AJAX real-time updating, like APE, but have no idea how to go about with that. (This is not really needed but would be a nice one to have)
If someone can guide me a little at least, that will be great. Thanks.
The best suitable way to accomplish this is by saving your objects attributes to a database, however other options include XML files etc..
The process of accomplishing it through database is:
If you want to save data to database then you will have to use a server side language like Php or Asp.net, so first step will be to have a database then an active connection to your database on your intermediate file (lets say 'data.php')
Then you need to code your data.php file so that it can take input(usually through GET or POST method) and it can save it to your database
Then you need to pass your data (objects attributes) through AJAX to data.php and save them to your database
On the main file you will have to check whether already some data exists for user, if yes then fetch it from database and display objects accordingly, otherwise set the objects preferences to default