duplicate javascript code -

Question

I have a javascript that I downloaded off the net. This works great. My problem is I now require to use this same script but on three instances on the page? how can I duplicate or edit this javascript code in order to acheive this.

To give you a background, I have a dropdown list, that onchange calls the below function to populate a table with mysql data without page refresh. the script shows info from another page, getpersonsformedical.php.

I now have two other pages that I want to show on the same page using the same javascript. namely getjobsformedical.php and getrisksformedical.php.

Any help would be appreciated. (apologies my javascript is not that great).

Can I just duplicate the code in another script tag? but then how do I call multiple onchange events for a single tag onclick. All three of these pages must be called from the single onclick.

I understand that there are other ways of doing this but if we could stivck to this methodology it would be appreciated.

To clarify, I need one onchage event to display three seperate php pages(with mysql data) in three seperate .

UPDATE WITH ANSWER

Thanks to dystroy, complete working script is:

<script> 
function showUser(userNumber, str, target, page) {  
  if (str=="")  {  
       document.getElementById(target + userNumber).innerHTML=''; 
     return;  
    }    
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   {  
        document.getElementById(target).innerHTML = xmlhttp.responseText;  
      }  
    }  
    xmlhttp.open("GET",page+"?q="+str,true);  
    xmlhttp.send();  
  }  

    function showThreeSections(userNumber, str) { 
    showUser(userNumber, str, 'a', 'getpersonsformedical.php'); 
    showUser(userNumber, str, 'b', 'getjobsformedical.php'); 
    showUser(userNumber, str, 'c', 'getrisksformedical.php'); 
    }
</script>

outputted to divs:

<div align="left" id="a"><font color=gray>Person Assignment will be shown here</font></div>
<div align="left" id="b"><font color=gray>Person Jobs will be shown here</font></div>
<div align="left" id="c"><font color=gray>Person Risks will be shown here</font></div>

Thanks and Regards, Ryan

You don't need to duplicate this script, as the function showUser takes parameters. Just duplicate the <SELECT NAME=medcondition3 id=medcondition3 onchange="showUser(1, this.value)">. — Denys Séguret
– Denys Séguret, Commented Jul 2, 2012 at 15:06
Hi @dystroy, but the script contains the PHP page which is referenced: getpersonsformedical.php. I want to get the info from page getjobsformedical.php and getrisksformedical.php. all three pages need to get pulled into existing page. In addition the one single select tag must call all three pages via the script. Thanks for prompt reply. appreciated — Smudger
– Smudger, Commented Jul 2, 2012 at 15:09
Thanks @MAtt, can you elaborate at all. Apologies if this is something simple. Thanks, — Smudger
– Smudger, Commented Jul 2, 2012 at 15:17
PHP's ext/mysql (the mysql_* family) is deprecated. Please use something else instead. — pilcrow
– pilcrow, Commented Jul 2, 2012 at 15:34

Denys Séguret · Accepted Answer · 2012-07-02 16:47:51Z

4

You should have in the HEAD element of your HTML page the script, only once, but taking another argument : the name of the page.

And a second function could call the first one three times with the different arguments.

Something like this :

<HEAD>
 ... other things

<script>
function showUser(userNumber, str, page) { 
  if (str=="")  { 
      return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById("txtHint" + userNumber).innerHTML += xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      document.getElementById("txtHint" + userNumber).innerHTML='';
      showUser(userNumber, str, 'getpersonsformedical.php');
      showUser(userNumber, str, 'page2.php');
      showUser(userNumber, str, 'page3.php');
  }
</script>

Note that the big function adds to innerHTML instead of cleaning it.

And then you can have this select :

<SELECT NAME=medcondition3 id=medcondition3 onchange="showThreeSections(1, this.value)">

But this solution is probably bad : you should probably have different target divs to fill instead of just one. Hard to say without redesigning (or at least studying) the whole page.

EDIT :

If you want to target different divs, you should :

1) have three divs. For example

<div id=a1></div>
<div id=b1></div>
<div id=c1></div>

2) modify the code for example like this :

<script>
function showUser(userNumber, str, target, page) { 
  if (str=="")  { 
       document.getElementById(target + userNumber).innerHTML='';
     return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById(target + userNumber).innerHTML = xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      showUser(userNumber, str, 'a', 'getpersonsformedical.php');
      showUser(userNumber, str, 'b', 'page2.php');
      showUser(userNumber, str, 'c', 'page3.php');
  }
</script>

edited Jul 2, 2012 at 16:47

answered Jul 2, 2012 at 15:13

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

WrongAboutMostThings Over a year ago

Just make sure your IDs are not all the same. They have to be unique on the page, e.g. medcondition1, medcondition2 and medcondition3.

Smudger Over a year ago

Hi @dystroy, you are 100%, I have seperate divs for each page. I have edited question with complete page script. this shows threee different divs, each of which need to be populated by a seperate page. this is all driven off one onchange event in one select tag. Thanks,

Denys Séguret Over a year ago

You're welcome. You may have noticed that in my sample I removed the compatibility with IE5 & IE6. I'm not sure there is a point in maintaining this compatibility in one point of the code as it's not probable a site you make today will be compatible with IE6 anyway. But it's up to you to check this requirement still makes sense.

Denys Séguret Over a year ago

I added a possible way to do this. But you must refine it to your page, looking at the whole picture.

Denys Séguret Over a year ago

Are you sure you call showThreeSections in your select and not showUser ?

|

itsme · Accepted Answer · 2012-07-02 15:36:11Z

2

Before xmlhttp.open make a if function like this,

if(str == str){
    var page = "getjobsformedical.php?q="+str;
}
else{
    var page = "getrisksformedical.php?q="+str;
}

and then,

xmlhttp.open("GET",page,true);

UPDATE:

if (xmlhttp.readyState==4 && xmlhttp.status==200)   {
    if(str == 'getjobsformedical.php'){
        document.getElementById("txtHint1").innerHTML += xmlhttp.responseText; 
    }
    elseif(str == 'getrisksformedical.php'){
        document.getElementById("txtHint2").innerHTML += xmlhttp.responseText; 
    }
    elseif(str == 'page3.php'){
        document.getElementById("txtHint3").innerHTML += xmlhttp.responseText; 
    }
 }

edited Jul 2, 2012 at 15:36

answered Jul 2, 2012 at 15:13

itsme

5851 gold badge6 silver badges15 bronze badges

2 Comments

Smudger Over a year ago

Thanks @itsme, problem is I still havent defined where these pages will be displayed in the script. Each page must go to a different div. first div is <div id="txtHint1">, the second is <div id="txtHint2"> and third is <div id="txtHint3">. Thanks.

Smudger Over a year ago

Thanks @itsme, appreciate teh help.

Collectives™ on Stack Overflow

duplicate javascript code -

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related