href with onclick doing three things at once?

Posted on 2009-04-30
Last Modified: 2012-06-27
Hello, my first question everyone, so hopefully I don't sound too amateur!

I have a web page I am building where I am using a javascript to load .htm files into a DIV when the user clicks on a link. Unfortunately, the click needs to change three DIV's at the same time. I have it set to do two of them, but, I am not sure how to get a third. Any suggestions?

Thanks everyone!
<a href="javascript:ajaxpage('technologies/islet.htm', 'bookcontent');" onclick="document.getElementById('paginate-bottom').innerHTML=''" class="story">

Open in new window

Question by:RelsKhan
    LVL 17

    Expert Comment

    LVL 19

    Expert Comment

    can you post more code
    LVL 3

    Accepted Solution

    Hi RelsKhan,

    I think you should look into creating a function that handles what you're looking to do here and simply call it from the link rather than trying to force the link to chain 3 separate actions together.

    Perhaps something along the lines of the code snippet below.

    and then in your link do this:

    <a href="javascript://" onclick="load_content()" class="story"></a>

    function load_content(){
        loadDivContent('div_name1', 'content/page1.htm');
        loadDivContent('div_name2', 'content/page2.htm');
        loadDivContent('div_name3', 'content/page3.htm');

    Open in new window

    LVL 4

    Expert Comment

    You're not limited to one statement in the onclick attribute. The ideal solution is to write a function to do the work as contactkarthi and EverLearningCodeMonkey mentioned. The following code modifies the code you provided.
    <a href="#" onclick="document.getElementById('paginate-bottom').innerHTML='';ajaxpage('technologies/islet.htm', 'bookcontent');return false;" class="story">

    Open in new window


    Author Comment

    I think I have more then enough here to make something work. However, if you are interested in the overall picture, I have a page with three columns. The left is a column of menus, the middle is the main content and the right is a list of doctors. What I am trying to do is click something on the left and it brings up the full explanation in the middle and then populates the appropriate doctors on the right column. I realize if I had any experience with databases it would be much easier. However, this is a static page, in that once everything is posted, we don't need to change it. So, I am using some javascript and html files to accomplish most everything.

    The code below is what I am using to add the content to the DIV in the main column. The issue is that I use other javascript to load the default content with multiple pages. The default content is in one DIV and the page numbers and links for the default content is in a second DIV below it. So, I am using the below script to fill the main content DIV with the appropriate information when a link is clicked in the left column. Then I need it to clear the DIV with the page numbers while adding the corresponding html file to the right column.

    I hope I wrote that so it could be followed.
     <script type="text/javascript">
                            * Dynamic Ajax Content- © Dynamic Drive DHTML code library (
                            * This notice MUST stay intact for legal use
                            * Visit Dynamic Drive at for full source code
                            var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
                            var loadedobjects = ""
                            var rootdomain = "http://" + window.location.hostname
                            var bustcacheparameter = ""
                            function ajaxpage(url, containerid) {
                                var page_request = false
                                if (window.XMLHttpRequest) // if Mozilla, Safari etc
                                    page_request = new XMLHttpRequest()
                                else if (window.ActiveXObject) { // if IE
                                    try {
                                        page_request = new ActiveXObject("Msxml2.XMLHTTP")
                                    catch (e) {
                                        try {
                                            page_request = new ActiveXObject("Microsoft.XMLHTTP")
                                        catch (e) { }
                                    return false
                                page_request.onreadystatechange = function() {
                                    loadpage(page_request, containerid)
                                if (bustcachevar) //if bust caching of external page
                                    bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
                      'GET', url + bustcacheparameter, true)
                            function loadpage(page_request, containerid) {
                                if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1))
                                    document.getElementById(containerid).innerHTML = page_request.responseText
                            function loadobjs() {
                                if (!document.getElementById)
                                for (i = 0; i < arguments.length; i++) {
                                    var file = arguments[i]
                                    var fileref = ""
                                    if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
                                        if (file.indexOf(".js") != -1) { //If object is a js file
                                            fileref = document.createElement('script')
                                            fileref.setAttribute("type", "text/javascript");
                                            fileref.setAttribute("src", file);
                                        else if (file.indexOf(".css") != -1) { //If object is a css file
                                            fileref = document.createElement("link")
                                            fileref.setAttribute("rel", "stylesheet");
                                            fileref.setAttribute("type", "text/css");
                                            fileref.setAttribute("href", file);
                                    if (fileref != "") {
                                        loadedobjects += file + " " //Remember this object as being already added to page

    Open in new window


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Suggested Solutions

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
    The viewer will learn how to dynamically set the form action using jQuery.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now