повторить функциональность javascript без нескольких экземпляров одного и того же кода - PullRequest
1 голос
/ 14 января 2012

У меня нет рабочих знаний о Java-скрипте, и я пытаюсь в него разобраться.

У меня есть страница PHP с таблицей.Первый столбец строки имеет раскрывающийся список.когда событие onclick инициируется, оно заполняет другие ячейки в строке на основе запроса php mysql.

Проблема состоит в том, что моя таблица может состоять из 75 строк, как и для страницы заказа.Я бы предпочел не иметь один и тот же код javascropt 75 раз с другим указателем?

Есть ли более простой способ сделать это для оптимизации страницы и уменьшения сложности страницы?(document.getElementById ("txtHint1"). innerHTML = "";)

Можно ли вообще использовать $ (this)?если да, то как мне это интегрировать?в противном случае, какие у меня варианты?

Моя php-страница такая же, как ниже.в настоящее время он работает с двумя строками, однако мне нужно выделить 75 строк.

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

php-страница, которая вызывается для выполнения mysql, является

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

Спасибо Advane за помощьРайан

Ответы [ 5 ]

2 голосов
/ 14 января 2012

Вы затронули один из самых ценных принципов программирования: не повторяйте себя (СУХОЙ). Программирование - это поиск наиболее эффективного способа что-то сделать. В любом случае, вот самый простой способ переписать вашу функцию javascript, чтобы она была более общей:

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

Теперь в каждой строке вашей таблицы ваш элемент select становится:

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

Замена '1' номером строки.

Использование jQuery для захвата ближайшего элемента txtHint было бы еще лучшим способом структурировать ваш код, но это немного выходит за рамки вопроса.

2 голосов
/ 14 января 2012

вот простой способ:

showUser1(str)

стать

showUser1(str, number)

и

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

стать

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

в html:

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

становится

<select name="users" onchange="showUser(this.value,2)" size=1>
2 голосов
/ 14 января 2012

Напишите один общий в обработчике изменений, а в обработчике изменений получите элемент select а затем element.parentNode.nextSibling.firstChild даст ваш тег div, а затем использует его идентификатор для ссылок на элементы js и для правильных вызовов php. Таким образом, все ваши подписки на html-события будут одинаковыми.

Вы также можете написать цикл php с элементом tr (представляющим пользователя) в качестве тела, а затем использовать описанный выше подход для подключения javascript. Таким образом, ваш HTML-код и JS-код будут сокращены, и вам даже не придется называть их явно.

2 голосов
/ 14 января 2012

Вы можете сделать это как универсальную функцию, передав дополнительный аргумент от вызывающей стороны,

Измененная функция. Обратите внимание, что имя функции изменено на showUser и добавлен дополнительный аргумент num, чтобы определить, из какой строки вызывается.

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();
 }

Модифицированный HTML, обратите внимание на изменение имени функции и дополнительного аргумента 1, который будет 2 для следующей строки и т. Д.

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

Редактировать: Изменено имя аргумента с индекса на num, индекс вводит в заблуждение, поскольку textHint начинается с 1.

1 голос
/ 18 января 2012

Думаю, я опубликую окончательное решение здесь и полный код.Большое спасибо @Amit, чей ответ я использовал.Спасибо также всем, кто нашел время, чтобы ответить на мои вопросы, все очень ценные.

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

Еще раз спасибо всем на этом сайте, очень признателен.

...