anylinkmenu ajaxpage()

**d3xt3r01** · 12-13-2009, 11:17 AM

1) Script Title:
Anylink Dropdown Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: It works great, BUT: I'm using http://wiki.d3xt3r01.tk/index.php/Update_div_content to load some other pages, which have some anylink menus on them that don't work.

I've noticed that if I do 'javascript:anylinkmenu.init("menuanchorclass");' after clicking on my ajaxpage link, the menus start working.

Any ideas on how I could modify ajaxpage() or something to make it work on the dynamic divs ?

==update 1==
Demo link with the problem can be seen at. The main anylink menu works but after the div is updated, it doesn't work.
http://smsro.com/account/demo/
I wouldn't want to use onmouseover,hover,onclick,onmousedown events used as I use them for some other stuff on the links

Thanks in advance,
Adrian.

**jscheuer1** · 12-13-2009, 02:50 PM

Here's a more robust method for making the AJAX request:

http://www.dynamicdrive.com/forums/s...3&postcount=23

However, whichever method you use, it is the function pointed to by the onreadystatechange property of the request that would be of interest.

In your present code, that would be (add highlighted):

Code:

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;
                if(window.anylinkmenu){
                	try{
                		anylinkmenu.init('menuanchorclass');
                	}catch(err){}
                }
        }
}

In the code from my above linked post:

Code:

loadXmlHttp.prototype.stateChanged = function(){
 if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
  this.el.innerHTML = this.xmlHttp.responseText;
  if(window.anylinkmenu){
   try{
    anylinkmenu.init('menuanchorclass');
   }catch(err){}
  }
 }
}

If your 'menuanchorclass' varies from page to page (and depending upon the situation, perhaos it should), some further tweaking would be required to avoid needing various versions of the above code(s) for each page.

**d3xt3r01** · 12-13-2009, 04:33 PM

The class name doesn't varry. It's the same because the content of the div is replaced. The problem still persists in

http://smsro.com/account/demo/

even with the recommended mod: http://smsro.com/account/demo/home.js

==Edit 1==
Tested with the other code, same thing.

**jscheuer1** · 12-13-2009, 05:07 PM

Mmm, you said:

I've noticed that if I do 'javascript:anylinkmenu.init("menuanchorclass");' after clicking on my ajaxpage link, the menus start working.

I took that to mean you could paste that into the address bar and hit enter and it would work. But that's not the case, at least not here. If it worked like that, my code probably would work as well. So what exactly did you do to make the menu work?

In the meantime, I have an idea and will test it.

**jscheuer1** · 12-13-2009, 05:23 PM

OK, you need to move:

Code:

var anylinkmenu5={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu5.items=[
	["Dynamic Drive", "http://www.dynamicdrive.com/"],
	["CSS Drive", "http://www.cssdrive.com/"],
	["JavaScript Kit", "http://www.javascriptkit.com/"],
	["Coding Forums", "http://www.codingforums.com/"],
	["JavaScript Reference", "http://www.javascriptkit.com/jsref/"] //no comma following last entry!
]

from your demo.html page to your index.html page, like so:

Code:

. . . u.init("menuanchorclass");
</script>
<script type="text/javascript">
var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //First menu variable. Make sure "anylinkmenu1" is unique
anylinkmenu1.items=[
["CNN", "http://www.cnn.com/"],
["MSNBC", "http://www.msnbc.com/"],
["Google", "http://www.google.com/"],
["BBC News", "http://news.bbc.co.uk"] //no comma following last entry!
]
var anylinkmenu5={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu5.items=[
	["Dynamic Drive", "http://www.dynamicdrive.com/"],
	["CSS Drive", "http://www.cssdrive.com/"],
	["JavaScript Kit", "http://www.javascriptkit.com/"],
	["Coding Forums", "http://www.codingforums.com/"],
	["JavaScript Reference", "http://www.javascriptkit.com/jsref/"] //no comma following last entry!
]
</script>
</head>
<body>
<div><a href="#" onclick="new loadXmlHttp('demo.html', 'tobeupdated');return false;">UPDATE DIV</a><br/><br/></div>

<div id="tobeupdated">

<a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1[click]" rev="lr">Right dropping menu</a>
</div>

</body>
</html>

Also note the return false for the AJAX call, this is a fine point, but without it, some browsers may reload the page. We wouldn't want that.