Показать несколько записей MySQL в отдельных divs

Я пытаюсь создать систему автоматического предложения для запроса MySQL и отображения возможных вариантов для пользователя по мере их ввода. Все работает до тех пор, пока не будет нажата одна из опций. Когда выдается предупреждение через jQuery, передается блок текста, содержащий все запрошенные записи, а не только тот, который нажат.Показать несколько записей MySQL в отдельных divs

Это PHP:

$query=$conn->query("SELECT * from Customers where Phone like '%$searchq%' limit 10") or die($conn->error); 

while($row = mysqli_fetch_array($query)) { 

$fname = $row['FName']; 
$lname = $row['LName']; 
$add01 = $row['Address 01']; 
$add02 = $row['Address 02']; 
$suburb = $row['Suburb']; 
$state = $row['State']; 
$pcode = $row['Postcode']; 
$phone = $row['Phone']; 
$email = $row['Email']; 

$output.= '<div name="firstdiv" class="redata" style="width:auto;text-align:left;text-decoration:none;color:black;">'.$phone.' '.$fname.' '.$lname.' '.$add01.' '.$add02.' '.$suburb.' '.$state.' '.$pcode.' '.$email.'</div>'; 

echo $output; 

$mysqli->close;

$ выход затем отправляется на следующий HTML:

<div name="seconddiv" class="seconddiv" id="seconddiv" style="height:auto;width:auto;margin-top:60px;float:left;font-family:Verdana;font-size:14px;color:black;position:absolute;display:none;z-index:10000;border-radius:7px;border:1px solid navy;background-color:rgba(184,204,228,0.3);padding:7px;"> 
<div name="thirddiv" class="thirddiv" id="thirddiv" style="height:auto;width:auto;text-decoration:none;text-align:left;color:solid black;border:2px solid red;"></div>

который затем насторожило по следующей JQuery:

$('#thirddiv').click(function() { 
clientdets = $('#thirddiv').text(); 
alert(clientdets); 
});

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

Мне нужно, чтобы можно было щелкнуть один div, а для содержимого этого div, чтобы быть предупрежденным, вместо всей партии.

Любая помощь будет принята с благодарностью за наши истощенные волосы, которые я вытаскивал за последние несколько дней.

источник

2015-03-15 Sofistikat

Как я понимаю, у вас есть HTML структура что-то вроде этого:

<div id="thirddiv"> 
    <div>text example 1</div> 
    <div>text example 2</div> 
    <div>text example 3</div> 
    ... 
</div>

Вашего обработчик события должен быть затем переписан на что-то вроде этого:

$("#thirddiv").find("div").on("click", function() { 
    clientdets = $(this).text(); 
    alert(clientdets); 
});

Обратите внимание, что я использовал атрибут id вместо атрибута name.

В качестве альтернативы, следует избегать встроенного стиля. Вместо этого используйте отдельную таблицу стилей CSS.

источник

2015-03-15 23:24:36 Miqi180

Поблагодарите Miqi180, я принимаю вашу мысль о встроенном стиле, но я просто привык делать это, когда я развиваюсь, а затем перемещаю все это в отдельную таблицу стилей, когда я закончил. Структура div в настоящее время, как я показал, и это может быть проблемой. Есть ли способ передать отдельные записи, возвращаемые MySQL, каждому из дочерних div, которые вы указали, что будет увеличиваться/уменьшаться динамически по количеству в зависимости от количества возвращаемых записей? – Sofistikat

Конечно, есть. Вы можете использовать функцию загрузки jQuery для этого или $ .post, если вам нужно отправить данные до их возврата, а затем динамически добавить divs + содержимое в DOM с помощью .append в функции обратного вызова. Что касается css, я полагаю, что это вопрос стиля работы, но я склонен думать, что это двойная работа, чтобы делать то, что вы здесь делаете ...:) – Miqi180

Блестящий, и, конечно же, должен быть, потому что я видел такие вещи много раз. В случае, если вы не догадались, я немного новичок, и теперь я пойду на исследование load & .append. Большое спасибо за предоставление определенного направления! – Sofistikat

Я понял!

избавился от обработчика событий JQuery все вместе, и изменить последнюю строку в разделе РНР:

echo '<li name="outputerator" class="redata" style="width:auto;text-align:left;text-decoration:none;color:black;border:2px solid green;"onclick="alert($(this).text());">'.$phone.' '.$fname.' '.$lname.''.$add01.''.$add02.' '.$suburb.' '.$state.' '.$pcode.' '.$email.'</li>';

И изменил #Thirddiv к <ul>. Yay me! :-)

источник

2015-03-17 11:10:00 Sofistikat

Показать несколько записей MySQL в отдельных divs

ответ

Смежные вопросы