Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

href with onclick doing three things at once?

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

0
RelsKhan
Asked:
RelsKhan
1 Solution
 
contactkarthiCommented:
0
 
erikTsomikSystem Architect, CF programmer Commented:
can you post more code
0
 
EverLearningCodeMonkeyCommented:
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(){
    clearDiv('div_name1');
    clearDiv('div_name2');
    clearDiv('div_name3');
    
    loadDivContent('div_name1', 'content/page1.htm');
    loadDivContent('div_name2', 'content/page2.htm');
    loadDivContent('div_name3', 'content/page3.htm');
}

Open in new window

0
 
jwmcpeakCommented:
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

0
 
RelsKhanAuthor Commented:
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 (www.dynamicdrive.com)
                        * This notice MUST stay intact for legal use
                        * Visit Dynamic Drive at http://www.dynamicdrive.com/ 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) { }
                                }
                            }
                            else
                                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()
                            page_request.open('GET', url + bustcacheparameter, true)
                            page_request.send(null)
                        }
 
                        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)
                                return
                            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 != "") {
                                    document.getElementsByTagName("head").item(0).appendChild(fileref)
                                    loadedobjects += file + " " //Remember this object as being already added to page
                                }
                            }
                        }
 
</script>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now