repeat javascript funcitonality without multiple instances of same code in script

Question

I have no working knowledge of Java script and am trying to get into it.

I have a PHP page with a table. The first column of the row has a drop down list. when the onclick event is triggered it populates the other cells in the row based on a php mysql query.

The problem is that my table can consist of up to 75 rows as it is for an order page. I'd prefer not to have the same javascropt code 75 times with a different pointer?

is there an easier way to do this in order to optimize the page and reduce the page complexity? (document.getElementById("txtHint1").innerHTML="";)

Can I use $(this) at all? if so how do I integrate it? otherwise what are my options?

My php page is as below. currently it works with two rows however i need to provision for 75 rows.

<html>
 <head>
 <script type="text/javascript">
 function showUser1(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint1").innerHTML="";
   return;
   } 
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("txtHint1").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getdata1.php?q="+str,true);
 xmlhttp.send();
 }

 </script>
 <script type="text/javascript">
 function showUser2(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint2").innerHTML="";
   return;
   } 
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("txtHint2").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getdata1.php?q="+str,true);
 xmlhttp.send();
 }

 </script>
 </head>
 <body>
 <?

 $con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata"; 
$resultsku=mysql_query($skusql); 

$optionssku=""; 

while ($row=mysql_fetch_array($resultsku)) { 

    $sku=$row["packcode"]; 
    $description=$row["description"]; 
    $optionssku.="<OPTION VALUE=\"$sku\">".$description; 
} 

 ?>

<table border=1>
<tr>
    <td width=393>Product</td>
    <td width=200>Category</td>
    <td width=150>Selling Unit</td>
    <td width=150>Grouping</td>
    <td width=150>Full Case QTY</td>
</tr>
</table>

<table>
<tr>
    <td>
        <select name="users" onchange="showUser1(this.value)" size=1>
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint1"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser2(this.value)" size=1>
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint2"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

</table>


</body>
 </html>

the php page that gets called to execute the mysql is

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'dbuser', 'dbpass');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);

$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet  FROM skudata WHERE packcode = '".$q."'";

$result = mysql_query($sql);



while($row = mysql_fetch_array($result))
   {
   echo "<table border=1><tr>";
   echo "<td width=200>".$row['Category']."</td>";
   echo "<td width=150>".$row['SellingUnits']."</td>";
   echo "<td width=150>".$row['Grouping']."</td><td width=150>";
   if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
   echo "</td></tr></table>";
   }

mysql_close($con);
 ?>

Thanks in advane for the help, Ryan

Why not start by streamlining the JavaScript with jQuery?

j08691
– j08691

2012-01-13 21:04:44 +00:00
Commented Jan 13, 2012 at 21:04 — j08691
– j08691, Commented Jan 13, 2012 at 21:04

Amit · Accepted Answer · 2012-01-13 21:17:50Z

2

You've touched on one of the most valuable principles of programming: Don't Repeat Yourself (DRY). Programming is all about seeking the most efficient way to do something. Anyway, here's the simplest way to rewrite your javascript function to be more generic:

<script type="text/javascript">
  function showUser(userNumber, str)
  {
    if (str=="")
    {
      document.getElementById("txtHint" + userNumber).innerHTML="";
      return;
    } 
    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("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getdata1.php?q="+str,true);
    xmlhttp.send();
  }
</script>

Now in each of your table rows, your select element becomes:

<select name="users" onchange="showUser(1, this.value)" size=1>

Replacing '1' with the row number.

Using jQuery to grab the closest txtHint element would be an even better way to structure your code, but that's a little beyond the scope of the question.

answered Jan 13, 2012 at 21:17

Amit

7385 silver badges8 bronze badges

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

1 Comment

Smudger Over a year ago

Thanks Amit, appreciate the effort you put into this answer. Working 100%. Regards,

Charles Forest · Accepted Answer · 2012-01-13 21:05:47Z

2

here's the easy way :

showUser1(str)

become

showUser1(str, number)

and

document.getElementById("txtHint1").innerHTML="";

become

document.getElementById("txtHint"+number).innerHTML="";

in the html :

<select name="users" onchange="showUser2(this.value)" size=1>

become

<select name="users" onchange="showUser(this.value,2)" size=1>

answered Jan 13, 2012 at 21:05

Charles Forest

1,0451 gold badge13 silver badges30 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-01-13 21:10:50Z

You can make it as generic function by passing an additional argument from the caller,

Modified Function, Please Note that the function name is changed to showUser and added additional argument num to identify from which row it is getting called.

function showUser(str, num)
 {
 if (str=="")
   {
   document.getElementById("txtHint" + num).innerHTML="";
   return;
   } 
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("txtHint" + num).innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getdata1.php?q="+str,true);
 xmlhttp.send();
 }

Modified HTML, Please Note the change in the function name and an additional argument 1 which will be 2 for the next row and so on.

<select name="users" onchange="showUser(this.value, 1)" size=1>

Edit: Changed argument name from index to num, index is misleading since textHint starts from 1.

Schu · Accepted Answer · 2012-01-13 22:47:20Z

2

Write one common on change handler, and in the change handler get select element and then element.parentNode.nextSibling.firstChild would give your div tag, and then use its id for js element references and to make right php calls. This way all your html event subscripts would be same.

You can also write a php loop with a tr element (represeting a user) as the body, and then use the above approach to hook up javascript. This way both your html code and js code would be reduced and you dont even have to name them explicitly.

edited Jan 13, 2012 at 22:47

answered Jan 13, 2012 at 21:12

Schu

1,1743 gold badges12 silver badges26 bronze badges

Comments

Smudger · Accepted Answer · 2012-01-18 09:21:20Z

Thought I would post the final solution here and full code. Big Thanks to @Amit whose answer I used. Thanks also to everyone who took the time to answer my questions, all very valuable.

index.php

<html>
 <head>
<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
  document.getElementById("r"+(userNumber+1)).style.display="block";  
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    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("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  } 
</script> 

 </head>
 <body>
 <?

 $con = mysql_connect('localhost', DBUser', 'DBPass');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("DBName", $con);


$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata"; 
$resultsku=mysql_query($skusql); 

$optionssku=""; 

while ($row=mysql_fetch_array($resultsku)) { 

    $sku=$row["packcode"]; 
    $description=$row["description"]; 
    $optionssku.="<OPTION VALUE=\"$sku\">".$description; 
} 

 ?>

<table border=1>
<tr>
    <td width=393>Product</td>
    <td width=200>Category</td>
    <td width=150>Selling Unit</td>
    <td width=150>Grouping</td>
    <td width=150>Full Case QTY</td>
</tr>
</table>

<table>
<tr id="r1">  
    <td>
        <select name="users" onchange="showUser(1, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint1"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr id="r2" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(2, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint2"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr id="r3" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(3, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint3"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr id="r4" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(4, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint4"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr id="r5" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(5, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint5"><b>SKU Details will be seen here</b></div>
    </td>
</tr>
<tr id="r6" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(6, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint6"><b>SKU Details will be seen here</b></div>
    </td>
</tr>
<tr id="r7" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(7, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint7"><b>SKU Details will be seen here</b></div>
    </td>
</tr>
<tr id="r8" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(8, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint8"><b>SKU Details will be seen here</b></div>
    </td>
</tr>
<tr id="r9" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(9, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint9"><b>SKU Details will be seen here</b></div>
    </td>
</tr>
<tr id="r10" style="display:none;">  
    <td>
        <select name="users" onchange="showUser(10, this.value)"> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint10"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

</table>

</body>
 </html>

GetData1.php

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'DBUser', 'DBPass');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("DBName", $con);

$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet  FROM skudata WHERE packcode = '".$q."'";

$result = mysql_query($sql);



while($row = mysql_fetch_array($result))
   {
   echo "<table border=1><tr>";
   echo "<td width=200>".$row['Category']."</td>";
   echo "<td width=150>".$row['SellingUnits']."</td>";
   echo "<td width=150>".$row['Grouping']."</td><td width=150>";
   if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
   echo "</td></tr></table>";
   }

mysql_close($con);
 ?>

Thanks again to everyone on this site, really appreciated.

Collectives™ on Stack Overflow

repeat javascript funcitonality without multiple instances of same code in script

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related