...

View Full Version : 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:

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

javascript:

<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?


function(videoName){

it will not work!

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


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

rootmath
01-06-2011, 01:29 PM
What is the purpose of this?


function(videoName){

it will not work!

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


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:

<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.


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


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum