2 actions from one link [ajax and mootools]

[mastubbs]

Hi all!

I’m trying to do something a little tricky. Can anyone help:

I want to combine two functions of two different script with the click of a single link. The first script is mootools driven and is a panel that toggles when you click a link.
Script (HEAD):

 <script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('top-panel');
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});
 
</script>

Link to toggle panel (BODY):

 <a href="#" id="toggle">Click here to toggle panel</a>

The second script is an ajax loader (HEAD):

 <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
document.getElementById(containerid).innerHTML='<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="49%" class="LoadingDataLeft"></td><td width="2%" align="center" valign="middle"><img src="loadingdata.gif" alt="LoadingData" width="32" height="32" /></td><td width="49%" class="LoadingDataRight"></td></tr></table>'
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>

The page IS called into the div is by (BODY):

 <a href="javascript:ajaxpage(‘content_to_call.html', 'area_to_load');">test</a>

<div id="area_to_load"></div>

SO, what I want to do is make a single link that, when clicked, both loads a page into the ‘area_to_load’ div and also toggles the panel. In fact, to make it even more tricky I want lots of links which load different content into ‘area_to_load’ (depending on the link clicked) and also toggle the panel… if that makes sense?

I know that all a bit confusing but I really cant figure out how to do it so I would be really greatful for any help at all.

Thanks

Matt

[mitya]

Well why not just call a function with the link which, in turn, does as many things as you want?

function myfunc() {
dosomething();
dosomethingelse(); //etc
}

...

<a href="javascript:myfunc();">click me</a>

[mastubbs]

hey thanks for the reply. Yep i guessed it would be something like that but im a bit of a JS nube so i have no idea how to write that function in this case... can u suggest how the code should look?

Thanks again for your help.

[mitya]

Actually just try this, even simpler since you're using mootools:

<a href="javascript:ajaxpage(‘content_to_call.html', 'area_to_load');" id="toggle">Click here to toggle panel</a>

That should call both at the same time.

[mastubbs]

Hey thanks for your reply... can't get it to work though :-(

2 problems have arisen:

1) If you use:

<a href="javascript:ajaxpage(‘content_to_call.html', 'area_to_load');" id="toggle">Click here to toggle panel and call content 1</a>

and then later use:

<a href="javascript:ajaxpage(‘second_content_to_call.html', 'area_to_load');" id="toggle">Click here to toggle panel and call content 2</a>

only the first of these links will toggle, the second will be inactive.

2) neither link will call content into the div. The div stays empty unless you call using :

<a href="javascript:ajaxpage('content_to_call.html', 'area_to_load');">call content to div</a>

Any ideas of what to try next? How about what you mentioned before:

function myfunc() {
dosomething();
dosomethingelse(); //etc
}

Thanks again for the help.

[mastubbs]

Still cant get this working. any help would be relly appreciated.

thanks