I created simple tool to my self with PHP & AJAX & MySQL. There is one form at top of the page and you can add new entry's to MySQL database with it. Below that there is a list what contains all MySQL entrys, in each at is own forms. Those forms contains buttons Save changes & Delete entry.
Listing data from MySQL was first created like this:
But i wanted to make it with AJAX, so that it don't refresh whole page, after every button press. So i replaced this while with <div id="entryList"></div> and put this while to own PHP file. Then i replaced type="submit" to type="button" and created onClick="callAjax('edit', $id);" and onClick="callAjax('delete', $id);".
My body tag has onLoad attribute and it calls function, what puts this entry list to entryList innerHTML. It worked "quite" good with couple of entry's but... Now when i have over 100 entrys, it takes loong time that white space fills with all entrys. And when those buttons Save Changes / Delete entry are pressed, it's last thing to do is refresh page, and it is done with calling that same function what is in body OnLoad. So in every button press it get all entry's from database...
What is gentle way to do this? This isn't good way, i know it. Should i make it like in first time, while in main PHP file, but somehow only update that div only to disappear what is deleted. But when i add new entry, how i can refresh page that it get's only NEW entry to list, that it doesn't load all entrys every time?