Ajax update innerHTML

Posted By: Ian on Mar 17, 2012 in Snippets
Last modified on February 26th, 2014 at 9:45 pm,

Ajax is very useful for when you want todo something without refreshing the page plus it’s the way things are done now.

For my Banner Bar program i allow the user to upload images or insert links to images which while this is good i think at the moment it looks confusing and the page is refreshed each time an image is uploaded.
Before Ajax

So when looking to improve on this for the next Version of Banner Bar i turned to Ajax after playing with XMLHttpRequests. So now the user can choose to upload an image or insert a link and the form when submitted posts either ‘insert’ or ‘upload’ to the ‘update.php’. Then the Ajax script gets what is sent back and updates the ‘iType’ div innerHTML with what was sent back all without ever refreshing the page!

The above is just a example of what can be done but you would normally use JQuery to hide and show the input fields.
I use something similar to the above to toggle pause for the banners and to upload images.

Before Ajax


Before Ajax

Before ajax you had to do write the XMLHttpRequests yourself whilst trying to accommodate the different ways browsers handle the requests but now Ajax takes care of it all for us.
Try MeDownload .zip


Did this help you? Please Let me know by commenting below even if it’s just to say “Thanks”

leave a comment

About This Site

Dreams are built from lines of code well it's true!
If you can dream it you can usually code it.

I have learned so much from other people on the Internet and this site is for me to give back some of what i have learned and hope people can now learn from me.
Have fun and surf safely,

protected by copyscape duplicate content check


Powered by Banner Bar 125