Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Changing 2 divs with one onClick Event

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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;

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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>
    Last edited by rootmath; 01-06-2011 at 01:41 PM. Reason: incomplete response

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • Users who have thanked devnull69 for this post:

    rootmath (01-06-2011)

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •