Ajax dynamic articles

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Download Javascript file

I have used the Simple Ajax Code Kit library(SACK) for this script. I have made a copy available for download here.

Put ajax.js in a subfolder called "js" or change the path to the file in the code above(i.e. <script type="text/javascript" src="js/ajax.js"></script>)

Configuration

This script is a simple demo that hopefully shows you some of the benefits of AJAX.

The list you see on the right side of the demo is a group of articles. The HTML code for this list looks like this:

  <ul id="articleList" class="articleList">
    <li id="article1">This is article number one</li>
    <li id="article2">This is the second article</li>
    <li id="article3">Article number 3</li>
    <li id="article4">About AJAX</li>
    <li id="article5">Article number 5</li>
    <li id="article6">Article number 6</li>
    <li id="article7">Article number 7</li>
    <li id="article8">Article number 8</li>
    <li id="article9">Article number 9</li>
  </ul>

Each <LI> represents an article. I have given each <LI> it's unique ID( Example: <li id="article1">, <li id="article2"). In this example, the id represents the name of external files.

When someone clicks on one of the articles in the list, my script will use AJAX to return the content of a file equal to the ID of the clicked article + ".html". Example: When you click on <LI id="article1">, the script will show you the content of the file "article1.html".

Short about AJAX functions

An "AJAX" Javascript object is created at the top of my script with this line:
var ajax = new sack();

Now, when someone clicks on an article in the list, we configure this object to request the external file. Example:
function getAjaxFile(fileName)
{
  ajax.requestFile = fileName;
  ajax.onCompletion = showContent;
  ajax.onLoading = showWaitMessage;
  ajax.runAJAX();
}

  • ajax.requestFile specifies which file to return
  • ajax.onCompletion = showContent; specifies the name of the function that should be executeed when AJAX finish it's job getting the external file
  • ajax.onLoading = showWaitMessage; specifies a function that should be executed while AJAX is working
  • ajax.runAJAX(); executes AJAX

Create external files

I have used 9 dummy articles for this demo. I have just named them article1.html, article2.html ... article9.html. You can download them from this Zip file or create your own articles.

Comments

Don
This is awesome, Thanks for sharing your cool ideas.
Don at 09:29AM, 2011/03/01.
Antun
I*m impressed, it*s cool script, but for me
it doesn*t work, as I don*t know in what folder to put articles files. Where ever I put them it only doesn*t work. Maybe some help?
Antun at 01:45PM, 2011/03/01.
Aaron
I have the same problem as ANTUN :(
Aaron at 03:35PM, 2011/03/08.
Aaron
can someone please provide the answer?
ASAP
Aaron at 04:09PM, 2011/03/08.
Admin comment
DHTMLGoodies
The files should be in the same folder as the main html file.

If you're still not able to make it work, please take a look a this article: http://www.dhtmlgoodies.com/forum/viewtopic.php?f=30&t=568




DHTMLGoodies at 05:17AM, 2011/03/09.
Aaron
Thanks alot mate, I managed to use something else on your site.
Great stuff.
:)
Aaron at 08:17PM, 2011/03/12.
alan
hi how to make auto star "article1"
Thanks
alan at 09:05PM, 2011/04/10.
Ishraga.M.Allam

function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState != 0 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getprice.php?q="+str,true);
xmlhttp.send();
}





Select a person:
Peter Griffin
Lois Griffin
Glenn Quagmire
Joseph Swanson





On my next file getuser:

$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("stock1", $con);

$sql="SELECT * FROM item WHERE item = '".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result)){
echo ' ItemCode : ';
echo ' Unit Price : ';
echo ' ItemCounter : ';
}

mysql_close($con);
?>
Ishraga.M.Allam at 03:42AM, 2011/05/30.
Dave
Nice script, thanks. Took me a little while to get it working but once I found out why it wasn't it was great, which is more than I can say for the other similar scripts I found online. Now I just have to tweak the settings to get it to match the rest of my site. :)

A couple of things:
script type="text/javascript" src="/AJAX/ajax.js"

This contradicts what you write in the text about placing the ajax.js script into a directory named js. You also have a leading /. Once I changed this line to src="js/ajax.js" it worked fine.

I also have problems with scripts like this that use standard tags such as body and header that will almost certainly be already used on websites. Might just be me, but I think that scripts should keep their tags unique, jdabody and jdaheader for instance in this case.

Minor quibbles though. Thanks again.
Dave at 05:09AM, 2011/06/23.
ibrahim
thanks ISHRAGA, you're rigth
ibrahim at 10:48AM, 2011/07/05.
ibrahim
sorry, i mean thanks dave you're right, the code must be script type="text/javascript" src="js/ajax.js not
script type="text/javascript" src="/AJAX/ajax.js
ibrahim at 10:50AM, 2011/07/05.
Marcos
hello, the script looks prety good, but can i show an URL instead of a simple html ?
how ?

thanks
Marcos at 10:03PM, 2011/08/06.
alex
how do i autostart an article? please help
alex at 06:51AM, 2011/08/18.
Marcos
hello ???????
Marcos at 01:36PM, 2011/08/23.
Admin comment
DHTMLGoodies
Marcos,

Unfortunately, Ajax does not support loading of external URL's if that's what you ask for. If you want to support loading of external url's via ajax, you need to implement some sort of server side routine which fetch the page from the remote server and sends the content from your server to the browser.


Alex,

If you change the selectArticle function to the code below, you can add this at the bottom of your html page:

<script type="text/javascript">
selectArticle('article1.html');
</script>

............
function selectArticle(article) // User have clicked on an article
{
if(!article){
article = this.id + '.html';
}
getAjaxFile(article ); // Calling the getAjasFile function. argument to the function is id of this <li> + '.html', example "article1.html"
if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
this.className='articleClick';
clickedArticle = this;
}
DHTMLGoodies at 05:10AM, 2011/08/24.
Marcos
Hi alex
Thanks for your help.
I wish to display an url from my own site.
I work with tomcat and java. And wish to call a Url like "http://myownserver:8080/servletapp/objectclass?parameterlist"

Maybe seeing your example in getajaxfile function i can modify something to do what i expect.
Thanks again and sorry for my bad english
Regards.

Marcos
Marcos at 07:47PM, 2011/08/26.
Pierre
Hello !
I need to use checkbox and radio buttons for this form but it don't works...!
How could I do ?

Thanks
Pierre at 08:06AM, 2011/09/09.
prem aman
Hi,

Thanks for the nice script. But, for some reason its not working from my desktop. The articles are not loading. Even when I load through the Web Matrix (server software) its the same issue. Do I need to change anything in the script - can anybody please guide.

Thanks,

Prem
prem aman at 09:50PM, 2011/10/06.
uyuyu

© 2005 - 2010 dhtmlgoodies.com
uyuyu at 07:47AM, 2011/12/25.
Jorrit
Hi,

Thanks for your script. I managed to get it working in a wordpress environment which is great. so i dynamically open a php of a post.

What I want now is preloading of articles.

Do you have an idea how to do this?
Jorrit at 10:35AM, 2012/01/26.
Luke
Hi first of all fantastic site, I love you man! (in a heterosexual way).

Aaaanyway yeah I want to add a lot of articles, how easy would it be to have them all within a subfolder? What would I need to change in the code? Any help is much appreciated!
Luke at 07:09AM, 2012/04/26.
Luke
^ignore that, I got it.

change

getAjaxFile(this.id + '.html');

to

getAjaxFile('nameoffolder/' + this.id + '.html');

and put the files in a subfolder (in this case called nameoffolder but rename it whatever you want)
Luke at 07:58AM, 2012/04/26.
Doug
This doesnt work. The articles will not load. I have put them in the same directory as the index file and it just says "finding article"
Doug at 11:05AM, 2012/05/21.
Ravi
Really useful article.
I have shortened out the ajax.js and it works fine. Can u explain ajax.js in detail.

thanks
Ravi Bhadauria
Admec multimedia institute
Ravi at 01:51AM, 2012/08/11.
javed
hi same issue cannot load any help
javed at 04:05AM, 2013/06/18.
Gianluca
Hi, thanks for this beauty script and for share it.
Now it possible to add a tree menu instead of the normal menu?
Gianluca at 05:34AM, 2013/08/17.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com