How to auto update a table using AJAX? - javascript

I need to use AJAX to request a random string of 10 numbers from an asp page, delimited by "||" and then display the results on a table.
However the table can only show the top 10 results, and as a new row is added the bottom row should be bumped.
I have done this but what i dont know is how i will use AJAX to automatically update the results on the table, without me having to manually refresh.
im not to use jQuery

First of all, if you really don't want to use a JS framework, you'll have to look to the XMLHttpRequest() object. To poll on a regular interval, you use the good-ol' setTimeout() and for DOM manipulation start out with getElementById() and Node.lastChild property.
Start playing around with those and ask some specific questions if you get stuck.

Related

How to get the next result for the right paginating

I need to know how to use exactlly the paginating function.
I have read that offest isn't the only way, and there an many ways to paginating between the results.
I would like to paginating without reload the site it's possible?
I got this example
SELECT * FROM Table LIMIT 100, 5000
I expect to put it in a function or in <a> or in button + Eventlistener...
I don't get it how to displaying the next number of result and next on.
Hope what i try to explain is clear.
Thx for the help.
If you are using classic asp indeed, then you can make use of the recordset pagination features.
You might want to have a look at this tutorial: ADO Recordset paging in ASP

Spliting a VERY long table in multiples pages html/php

here is the problem. I have no right to create a database and I receive a csv that countain MASSIVE amount of data each day. (More than 200 000 rows)
Data that I must make accessible for everybody on the intranet. So I created a simple html/php page that extract all the rows and display those informations in a table with a filter on every column with a simple fgetcsv.
Problem is that the web browser is not suited to display that much informations at the same time so it makes it crash or freeze for a while, and you can't do anything for a while.
I wanted to know if anyone knew a way to say to the page "load only the first 100 rows for exemple, then automatically create a next page that will load and display the next 100 rows etc."
I manages to DISPLAY only the first x rows and then when you clicked a button the table would expand with the next x rows, but they are still all loaded at once. The y remaining are just hidden, so the browser still dies or freeze.
Any idea ?
Thanks
It's a generic pagination question really. It doesn't matter if your data is stored in database or in a CSV file.
Just pass some offset argument to your PHP script via query string or URL rewriting and use it to select only part of your CSV list.
Like this: /big-table.php?page=3.
// Getting passed argument.
$pageNumber = (int) $_GET['page'];
// Items per page default.
$itemsPerPage = 100;
// Calculating offset.
$offset = ($pageNumber - 1) * $itemsPerPage;
Then use the $offset and $itemsPerPage to retrieve only part of your CSV file by limiting scope of your CSV parsing loop.
You can also pass items per page value as an argument to your script in order to control this value from your web interface. For example, if you want to create a dropdown menu with ability to select 10, 50, 100 items per page, etc.
And if you want it - you could always use AJAX to fetch more items dynamically, it doesn't really affect your pagination implementation server-side, only an output format (JSON instead of HTML).
Of course database implementation will work faster and I would recommend to opt for it instead if possible. And/Or you can use some caching layer to speed things up.
You could use the jquery Datatables plugin http://datatables.net/
It's quite simple to do what you want using that.
Refer to either this example: http://datatables.net/examples/data_sources/ajax.html or http://datatables.net/examples/data_sources/server_side.html
The most sensible thing is to demand database access. Right now, you're told to build a car but without using wheels and an engine.
Right now, you could use PHP to split the big csv in multiple smaller files of n rows long. You have to do this only once, or once a day/hour if the big csv is updated. Then you load each of these files only when you need them, either by navigating to another page or dynamically using Javascript.

Dynamically alter html table cell content using php

I have a php page that shows track listings of classical CD's. The table draws data from two very similar but different mysql tables which sometimes leads to (partial) duplication of table rows.
These are the two possibilities (with the number being the track number on the CD):
1 Work title
1 Subwork title
Work title (possibly altered)
2 Work title
In the first case I want to remove the track number. In the second case I want to retain the work title in the first line, add the track number of the second line and do nothing with the work title of the second line. So the result should look like:
Work title
1 Subwork title
2 Work title (possibly altered)
Can this be accomplished in php or should I look in the direction of javascript or jQuery for a solution? I tried using
$("div").empty();
but couldn't make it work.
All suggestions are welcome.
The most efficient way would be to process the data on the server (PHP) as it is retrieved from the database. This way you aren't transferring large data sizes to the client only to have the front-end (javascript) to discard anything of the data this isn't needed. This will create a not so desirable user experience.
If your PHP script is generating your entire table at once, then you can do it in PHP. If your PHP script only creates part of the table, sends it to the user, and it is later modified by something like an AJAX call, then you have to do it in Javascript.

Implement instant search adding and removing html elements dynamically

I am a beginner at HTML and javascript so apologies if the questions below appear obvious.
I am trying to implement instant search in a website with pure java script but I have a few questions.
Right now I plan to have a function respond to each onkeyup event. Making use of AJAX, the function will contact a server which returns links separated by a newline character. now the questions:
If the text returned by the server is already in the form of html links and paragraphs, is there a way I can insert it after the html input text box? If so how can I do this? I have found references to createElement() and appendChild() methods but am not sure how they work. Also, people have suggested using a tag but I have never used this in html and am not sure what it is.
If the above is not possible I was thinking of doing the following,
When the text is returned by the server,
1. use String.split() to turn the returned text into an array of results.
2. for each element in the array
3. Create an element and insert it . (still need to check exactly how to do this).
4.
end for
A problem being is that I would need a quick way of clearing the previous search results each time a key would be pressed.
Any help is greatly appreciated.
The best way is to return via Json.
Json will have all search result, you can easily use Json via http://www.json.org/js.html
This will be good approach in place of splitting out the contents.

Adding a new row to a dynamic ASP.NET Table Control, at position x - Problems with Viewstate after postback

I am creating a dynamic table control with ASP.NET/C# and the table is being used to hold a form. I need to allow users to click on a button in a row and make a duplicate of that row right below the original. My page is also using AJAX and jQuery.
I have tried to use Table.Rows.AddAt(indexoforigrow+1, newrow) but I get an error that the index is out of the range of values. I figured maybe I wasn't getting the original row's index correctly so I just tossed in a 1 and still got the error.
I also noticed that when I press the button to execute the code, the table disappears. Any ideas on how to fix that?
I am thinking that if I am unable to get these issues fixed I will have to loop through the table and submit the data to a temp table, adding a new row where indicated. Then I would pull all of the data back out and display again.
EDIT
I moved on when I could not get this working and tried to setup my submit functions to loop through the data and submit it to a db and realized that I am experiencing the same issues when clicking the submit button as when I click the add row button. It appears that my issue is really with viewstates/postback.
I did some reading on this and from what I can tell the solution is to re-create the dynamic control on page load every time. But I am confused about how I can do this if I have no idea how many rows/cells I have and how is the information the user entered kept in the form? I have no way of saving the information to a DB or anything because as soon as submit is clicked it all disappears.
Have you considered using a different control? One of the grid controls might better serve your purpose.
I've handled situations (that sound) similar to what you're describing by using the footer of a GridView (among other ways). The big trick is to bind the display object (Table, GridView, etc.) to a list of objects. Then you manipulate the list of objects, rebinding the display object after the list has changed.
You will need to persist this list in some manner, or you could wind up with the list being reset to null. One way would be to save it as part of the session.
At any rate, the idea is to have a display object (GridView) bound to a list of objects. When the user clicks 'add', an item is added to the list. Save the list, then call the GridView.DataBind method.
You are on the right track with re-creating the dynamic table each time the page loads. I have dome similar things and my solution was to keep a client state in a hidden field on the page. Every time you add a row to the table on the client, increment a counter or adjust the state data in the hidden field. Then, on the server-when the page posts back, read from that hidden field to know how many rows were added on the client. You will have to use some kind of naming convention for the new rows you add(and the widgets in them) so you can re-create them on the server.
A simpler option may be to use an UpdatePanel. Rather than try to add the rows on the client, your "add row" button would cause a partial update. The server side code would add the new row to the table and the viewstate would be updated.
I ended getting my data guy to do a bit more processing on his end so that I could just bind a ListView to a sproc. Solved a few of my problems.
Thanks for the helpful comments.
Just returning to this almost a year later because I faced a similar issue in my current project. I was doing a few things wrong my first time around. First, I did indeed need to recreate the controls every load, but I also had to create them earlier in the page cycle. I was trying to create them during page load, which is after the viewstate is loaded.
The controls need to be recreated with the same ID before viewstate is loaded. I went with page init and it worked fine.

Categories