Changing 2 divs with one onClick Event

rootmath · 01-06-2011, 04:36 AM

Hi, I want to change a title div and a video div when I click on a single link. Right now I have one function that takes two parameters. The parameters are 2 separate txt files that contain the new divs. I want to replace the old divs with the txt files but it only works for the second function. I've searched everywhere but can't find a clear answer. Any help is very much appreciated!
Thanks,
M.

link:

Code:

<a href="" onClick="loadChangeVideo('video1', 'title1');titleSwitch('title1')return false">

javascript:

Code:

<script language="javascript">
var videoName;
var videoTitle;
function loadChangeVideo(videoName, videoTitle)
{

function(videoName){
	

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==4 && xmlhttp.status==200)
    {
    document.getElementById("video_title").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET", videoTitle + ".txt" ,true);
xmlhttp.send();


	

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==4 && xmlhttp.status==200)
    {
    document.getElementById("switch_video").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET", videoName + ".txt" ,true);
xmlhttp.send();

this.videoName = "videoName";
window.location.hash = videoName;
}
}
</script>

devnull69 · 01-06-2011, 06:51 AM

What is the purpose of this?

Code:

function(videoName){

it will not work!

Then you will have to separate the function calls in the onclick

Code:

loadChangeVideo('video1', 'title1');titleSwitch('title1');return false;

rootmath · 01-06-2011, 01:29 PM

Quote:

Originally Posted by devnull69

What is the purpose of this?

Code:

function(videoName){

it will not work!

Then you will have to separate the function calls in the onclick

Code:

loadChangeVideo('video1', 'title1');titleSwitch('title1');return false;

Ok I changed things around based on your suggestion. I have 2 distinct functions now and they are both called in the link like this:

Code:

<a href="" onClick="videoSwitch('video1');titleSwitch('title1');return false">

Both functions are meant to do the same thing but they are meant to replace distinct divs with distinct text files. Only the second function works though.

Code:

<script language="javascript">
var videoName;
var videoTitle;

function videoSwitch(videoName){
	

	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==4 && xmlhttp.status==200)
	    {
	    document.getElementById("switch_video").innerHTML=xmlhttp.responseText;
	    }
	  }
	xmlhttp.open("GET", videoName + ".txt" ,true);
	xmlhttp.send();
}

	
function titleSwitch(videoTitle)
{
	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==4 && xmlhttp.status==200)
	    {
	    document.getElementById("video_title").innerHTML=xmlhttp.responseText;
	    }
	  }
	xmlhttp.open("GET", videoTitle + ".txt" ,true);
	xmlhttp.send();
}
</script>

devnull69 · 01-06-2011, 02:35 PM

This is because you are overwriting your requests ... that's why the second one "wins".

I suggest you take two distinct request objects (e.g. xmlhttp1 and xmlhttp2) for the two functions.

rootmath · 01-06-2011, 02:52 PM

Quote:

Originally Posted by devnull69

This is because you are overwriting your requests ... that's why the second one "wins".

I suggest you take two distinct request objects (e.g. xmlhttp1 and xmlhttp2) for the two functions.

Oh right! This works great, thank you so much!

here is the final code for anyone who winds up here with the same question:

Code:

<script language="javascript">
var videoName;
var videoTitle;

function videoSwitch(videoName)
	{

	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp1=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp1.onreadystatechange=function()
	  {
	  if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
	    {
	    document.getElementById("switch_video").innerHTML=xmlhttp1.responseText;
	    }
	  }
	xmlhttp1.open("GET", videoName + ".txt" ,true);
	xmlhttp1.send();
}

	
function titleSwitch(videoTitle)
{
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp2=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp2.onreadystatechange=function()
	  {
	  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
	    {
	    document.getElementById("video_title").innerHTML=xmlhttp2.responseText;
	    }
	  }
	xmlhttp2.open("GET", videoTitle + ".txt" ,true);
	xmlhttp2.send();
}
</script>