Develop Reference

Need a "Next" button / link that loads webpages serially

I have nearly a thousand HTML pages that form a book as a whole. I need a "Next" button/link on these pages which will load the next pages serially - so that the reader can navigate from one page to the next serially. The only way I know of doing this is to manually insert the links of every single page to the previous page with the label "Next". For a few pages it's okay - but for thousand pages??? I get a heart attack even thinking about it!
So I was thinking maybe this can be done by a little bit of Javascript / Jquery coding which may simplify and automate the process without requiring opening and closing a thousand pages and copying and pasting a thousand links. After that, I can simply insert the same code in one go to all the pages using Dreamweaver or any similar HTML editor. Problem is, I am not a programmer or coder and know almost nothing about Java, Borneo or any other scripts! So, can anybody help me on this?
All my HTML pages (filenames) are named serially like - page1.html, page2.html, page3.html... and so on. They are all in the same folder. I was thinking if it is possible to read the current page's name programmatically and only the number part of it replaced with the next number by adding 1 to it - without disturbing the rest of the filename - and then open the HTML file with that name onClick? Is this possible? Can anybody help me with a little bit of code?
Thanks in advance for taking the time to read this!

Here we cannot use "Next" button method,because we cannot open every book html and add "Next" button in (lots of work). To avoid to open the content html. We need to use .load() function here, to load book html content into a new HTML page.
Below code may help you on this:
First create a html page in same directory and add a and a "Next". Assume the book content are in DIV with ID = "bookContent"
If start page is 1, then the code will be
var currentPage;
$(window).on('load', function () {
currentPage = 1;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load html book content from page1.html
$('#content').load(contentHtml);
});
//set next button
$('#next').onclick(function(){
currentPage++;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load next page
$('#content').load(contentHtml);
});

Table overriding/ disappearing

I am currently writing a script which uses ajax to call php for pulling in table data using a lazy load method by for some reason whenever i add to the end using
document.getElementById("updateTable").innerHTML += tabledata;
it seems to remove some of the first load of row at the beginning. has anyone else experienced this problem.
the php generates the HTML and then sends it to the JavaScript to be added onto the previous section of the table but i cannot for the life of me figure out why it is being removed. this is the only line of code that i use which directly effects the element updateTable.
Have any of you experienced this problem or does anyone have any creative ideas on solving this

I think you need to look at this
Something like this,
Soccer
Tennis
var nodetag = document.createElement("LI");
var nodecontent = document.createTextNode("Aayo");
nodetag.appendChild(nodecontent);
document.getElementById("currrentList").appendChild(nodecontent);

Appending AJAX loader to menu/nav bar on individual links

I'm using the following theme for our site: http://themes.vivantdesigns.com/vpad/#dashboard.html
I want an ajax loader to show NEXT to the link/tab, when a user clicks a link within the drilldown menu on the left. As you can see from the link, content is dynamically loaded within a:
<section id="main-section">Pagename.html loaded here</section>
So basically, I want the ajax loader to show to the right of the menu links and disappear when the dynamic content loads. It will be hard to see this pause on the demo link, but heavier database queries will cause it to sit there a moment, and slower connections of course.
Any immediate help is appreciated very much.
I've tried show/hide onClick methods, hiding class on document ready, and nothing seems to work cleanly.

Okay, after a lot of screwing around trying to find where the ajax was happening, I think I've worked it out (little familiarity with jQuery/never heard of hashchange or bbq before), so give this a shot.
Assuming you have access to it, the page you referenced is including a JavaScript file called global.js.
Add an initially hidden "loading" image/div/whatever next to each menu item, with an id set similarly to the menu item's name e.g. id="mediaLoading".
Open global.js and head down to line 117:
$('#'+id).length && $('#'+id).remove();
After this line the ajax call is made, so add the code to show the ajax loader, e.g.
var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block';
//or $("#" + loaderId).show() or whatever you would use in jQuery
Finally, to re-hide it, add similar code into the inline 'complete' function (which would now be around line 127):
complete: function(jqXHR, textStatus) {
document.getElementById(loaderId).style.display = 'none';
}
Hope that solves it. It was difficult to test locally.
Keep in mind that since the file's called "global," that obviously might impact a bunch of other pages, so you may want to use null-checks for the loader or a separate file...

How to reload offsite image sources every 30 seconds with JavaScript?

I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.
Presently I've attempted something similar to this question: "reloading a page after every 10 sec in rails 3.1"
(This is a Rails application, but I probably don't need a Rails specific answer in this case.)
Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.
The first solution that's marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I'm trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it's acting on the actual image tag, it yields nothing.
I'm sure I'm missing something rather simple since JS is not a strong suit for me at the moment.
Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.

If you're up for jQuery, this can be done quite easily:
$(function() {
setInterval(function() {
$('img').each(function() {
$this = $(this);
$this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 30 * 1000);
});
In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn't matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.
jQuery is famous for its use of CSS-like selectors.
Replace $('img') with one of these:
$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".
There's also the :not() selector, which can filter your results:
$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');

Removing appended html using jQuery?

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.

empty() is always an option
jQuery('#main').empty();

Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/

I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.

Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.

It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();