Уникальное значение для каждой кнопки

Question

У меня есть две php-страницы. Первая страница запрашивает базу данных и помещает некоторые данные в форму. Вторая страница, захватывает данные, отправленные с предыдущей страницы, и отображает данные.

НОМЕР: На второй странице информация отображается в таблице. В конце каждой строки есть кнопка «информация», которая позволяет пользователю щелкнуть и увидеть больше сведений, связанных с данными в этом конкретном столбце. По какой-то причине кнопка информации для каждой записи в таблице содержит значение первой записи, возвращенной в запросе базы данных. Другими словами, независимо от того, какую кнопку я нажимаю в таблице, она всегда относится к первой записи, возвращенной в запросе.

Я надеюсь, что кто-то может помочь мне найти решение для связывания каждой «информационной» кнопки с каждой уникальной записью. Другими словами, если я нажму кнопку информации в первой строке, она отобразит данные для записи, связанной с строкой 1 ... и т. Д. Вот мой код.

СТР 1

<?php 

$query = mysql_query ("SELECT * from cust_data group by cabinet_number ORDER by cabinet_number ASC"); 

WHILE ($rows = @mysql_fetch_array($query)) { 

    if (($rows['account_number']=="") && 
     ($rows['customer_first_name']=="") && 
     ($rows['customer_last_name']=="") && 
     ($rows['company_name']=="")) { 

     echo '<form method="GET" action="cabinet_result_page.php"> 
       <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number"> 
       <input type="hidden" value="'.$rows['company_name'].'" name="company_name"> 
       <img src="images/bulletpoint_green.png"> 
       <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['cabinet_number'].'" id="submit"> 
       </form>'; 

    } else if ($rows['cabinet_number']!=="") { 

     echo '<form method="GET" action="cabinet_result_page.php"> 
         <input type="hidden" value="'.$rows['cabinet_number'].'" name="cabinet_number"> 
         <input type="hidden" value="'.$rows['company_name'].'" name="company_name"> 
         <img src="images/bulletpoint_red.png"> 
         <input type="submit" value="'.$rows['cabinet_number'].'" name="'.$rows['company_name'].'" id="submit"> 
       </form>'; 
    } 
    } 
} 

СТР 2: ХВАТАЕТ данных в первой странице и помещает его в таблице. При нажатии кнопки «INFO» щелкают, Дополнительная информация отображается в POPUP Jquery

db_connect(); 

$cabinet_number = $_GET['cabinet_number']; 
$company_name = $_GET['company_name']; 
$query = @mysql_query ("SELECT * FROM cust_data WHERE cabinet_number = '$cabinet_number' "); 

WHILE ($rows = @mysql_fetch_array($query)) { 

    echo'<tr> 
      <td><font size="4">'; echo $rows['account_number']; echo'</font></td> 
      <td><font size="4">'; echo $rows['customer_first_name']; echo '</font></td> 
      <td><font size="4">'; echo $rows['customer_last_name']; echo '</font></td> 
      <td><font size="4">'; echo $rows['company_name']; echo '</font></td> 
      <td><font size="4">'; echo $rows['cabinet_number']; echo'</font></td> 
      <td><font size="4">'; echo $rows['key_tag_number']; echo'</font></td>'; 

    if ($rows['switch_and_port1'] =="") { 

     echo ''; 

    } else if ($rows['switch_and_port1'] !== "") { 

     echo '<td><font size="4">'; 
     echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>'; 

    } 

    { 
     echo '<td><font size="4">'; echo '<input type = "image" src= "images/view_details.png" height="16" width="16" class="my_modal_open">', '</font></td>'; 
    } 

    echo '</tr>'; 
    echo '<div class="well" style="display:none;margin:1em;" class="my_modal">'; 
    echo '<img src="images/hdc_logo_transparent.png"><br>'; 
    echo '<div style="height:23px; width:100%; background-color:black"> <h4><font color="#FFFFFF">','&nbsp; ', 'Cabinet: ', $id, '</font></h4></div>'; 
    echo '<p>'; 
    echo '<br>'; 
    echo '<img src="images/bulletpoint_orange.png">'; 
    echo 'Power: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['power_circuit']; 
    echo '<br>'; 
    echo'<img src="images/bulletpoint_orange.png">'; 
    echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port1']; 

    if ($rows['switch_and_port2'] =="") { 

     echo ''; 

    } else if ($rows['switch_and_port2'] !== "") { 
     echo '<br>'; 
     echo '<img src="images/bulletpoint_orange.png">'; 
     echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port2']; 
    } 

    if ($rows['switch_and_port3'] =="") { 

     echo ''; 

    } else if ($rows['switch_and_port3'] !== "") { 

     echo '<br>'; 
     echo '<img src="images/bulletpoint_orange.png">'; 
     echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port3']; 
    } 

    if ($rows['switch_and_port4'] =="") { 

     echo ''; 

    } else if ($rows['switch_and_port4'] !== "") { 

     echo '<br>'; 
     echo '<img src="images/bulletpoint_orange.png">'; 
     echo 'Sw/Po: &nbsp;&nbsp;&nbsp;&nbsp;', $rows['switch_and_port4']; 
    } 

    echo '</p>'; 
    echo'</div></form>'; 

} 
echo'<script> 
       $(document).ready(function() { 
       $(".my_modal_open").click(function(){ 
       $(this).closest("tr").next(".my_modal").popup({"autoopen": true}); 
       }); 
       }); 
       }); 
       </script> 
       </body> 
       </html>'; 
} 

Answer 1

Вопрос заключается в том, что вы настраиваете один и тот же идентификатор атрибут для всех модальностей (который является недействительной HTML разметки) и ожидаете щелчок обработчик на кнопке, чтобы выяснить, какой из них открыть.

UPADTE

Другой вопрос, с разметкой, что вы не можете иметь <div> с, как братьев и сестер строки таблицы, он будет производить неожиданные результаты, как браузеры будут пытаться исправить разметку и переставить элементы, вы можете поместить div внутри td или использовать второй цикл для их создания.

Теперь я также сделал некоторые копания в вашем всплывающем плагине, и я должен сказать, что это не очень хорошо реализовано, я бы рекомендовал вам искать еще один. Это, как говорится мне удалось получить его работу, вот что вам нужно сделать:

1. Установить уникальный идентификатор для каждого из модальных див, если у вас есть какое-то идентификатор в вашем данных базах данных вы можете использовать что, если нет, то вы можете создать переменную счетчика внутри цикла:

   echo '<div class="well" id="my_modal'.$rows['id'].'">'; 
   

2. Используйте тот же идентификатор класса для кнопки, которая должна открыть модальное, но добавить «_open» в качестве суффикса:

   echo '<input type = "image" src="images/view_details.png" height="16" width="16" class="my_modal'.rows['id'].'_open"> 
   

3. Теперь вы можете инициализировать всплывающий плагин на ваши див, и она будет автоматически назначать открытое действие на соответствующую кнопку:

   echo'<script> 
       $(document).ready(function() { 
        $("[id^=\'my_modal\']").each(function() { 
         $(this).popup(); 
        }); 
       }); 
       </script>'; 
   

Это должно исправить модальную проблему, вот working demo.

Теперь у меня есть пара замечаний по поводу вашего кода:

1. Вы должны избегать использования встроенных стилей и, как я уже говорил ранее <font> тег должен быть заменен для правильного CSS, я также хотел бы предложить, используя CSS обивка/запас, чтобы добавить пробел между словами вместо     

2. Этот тип кода:

   if ($rows['switch_and_port1'] =="") { 
       echo ''; 
   } else if ($rows['switch_and_port1'] !== "") { 
       echo 'SOME CONTENT'; 
   } 
   

   могут быть оптимизированы только:

   if ($rows['switch_and_port1'] !== "") { 
       echo 'SOME CONTENT'; 
   } 
   

   вторя пустая строка не производит никакого вывода вообще и нет никакой необходимости в ELSEIF