я студент первого курса в области информационных технологий, и мы занимаемся школьным управлением базой данных, нам нужно выполнить SCRUD для базы данных. Я хотел бы уйти немного дальше с одной специальностью, но я не могу заставить ее работать после многих часов попыток и исследований. В моей таблице данных у меня есть 3 иконки.
Что я хочу сделать:
При нажатии на значок информации, я хотел бы показать больше данных, касающихся только этого человека. Чтобы отобразить данные, появится модальное окно. Затем, когда вы щелкаете за пределами модального окна и проверяете другого клиента, я бы хотел, чтобы он отображал «живые» данные для этого клиента.
Наши инструменты:
Мы используем VSC, Python, Flask, Jinja, Javascrip, HTML, CSS (начальной загрузки)
Вот что я пробовал и сделал до сих пор:
При клике данные правильно отправляются на сервер и хорошо возвращаются (когда я зайду в инструменты / сеть разработчиков, я вижу, что мой результат всплывает. Проблема в том, что я не могу заставить его появиться "вживую" на моей странице с модалом.
Пока я просто пытаюсь передать переменную для тестирования, позже я отправлю несколько SQL-запросов. Я думаю, что будет лучше всего использовать render_template_string, так как я хотел бы отобразить модальное окно со всей обновленной информацией?
Экраны:
экран моей таблицы данных
модальное всплывающее окно
ответ по сети
консольный журнал
Вот мой Питон:
@app.route('/test', methods=['GET','POST'])
def test():
getIdClient =None
if request.method == "POST":
getIdClient = request.json
idClientGetted = json.dumps(getIdClient) ## transferring the value
return render_template('EditCampagne.html', idClientGetted = idClientGetted)
Вот мой Javascript:
$(document).ready(function(){
$('a.showValue').bind('click', function() {
var getIdClient = this.parentNode.parentNode.cells[0].textContent; // getting the value of the client id in the table
var showIt = document.getElementById('inputCache'); //temporary value, just to make it appears on the html for more visiblity
showIt.value = getIdClient;
console.log(getIdClient);
$.ajax({
url: 'test',
type: "POST",
datatype:'json',
contentType:'application/json',
data:JSON.stringify(getIdClient)
}) /* verification data sent correctly */
.done(function (data) { console.log("Envoyé " + getIdClient) })
.fail(function (jqXHR, textStatus, errorThrown) { console.log("ERROR"); });
Вот мой HTML для таблицы данных
Результат: {{idClientGetted}}
<form method="POST" action="">
<div>
</div>
<br>
<div class="row"></div>
<div class="col-3 m-auto">
<div class="input-group mb-2">
<input type="text" class="form-control" id="searchInputCamp" onkeyup="searchThruTable()" placeholder="Rechercher">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-search"></i></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 m-auto pt-5">
<table id="mytable3" class="table font-weight-normal ">
<thead class="bg-primary text-white rounded font-weight-normal">
<tr style="font-size:14px;">
<th># Client</th>
<th>Nom</th>
<th>Prénom</th> <!-- pour plus tard essayer de fusionner le champs prenom + nom -->
<th>Compagnie</th>
<th>Nombres de campagnes</th><!-- pour plus tard essayer de fusionner le champs adresse total -->
<th>Nombres d'objectif</th>
<th>Budget</th>
<th>Cout total Obj</th>
<th>Bénéfice</th>
<th>Apport Privé</th>
<th><i class="fas fa-edit"></i></th>
<th><i class="fas fa-trash-alt"></i></th>
<th><i class="fas fa-question-circle"></i></th>
</tr>
</thead>
{% for row in dataCampV %}
<tr style="font-size:12px;text-align:center;">
<th scope="row">{{ row.id_Client }}</th>
<td>{{ row.Nom }}</td>
<td>{{ row.Prenom }}</td>
<td>{{ row.Nom_Entreprise }}</td>
<td>{{ row.qtecamp }}</td>
<td>{{ row.qteobj }}</td>
<td>{{ row.budgettot }}</td>
<td>{{ row.couttotalobj }}</td>
<td>{{ row.bnf }}</td>
<td>{{ row.apportprive }}</td>
<td class="text-center"><a href="#showClientModalInfo" data-toggle="modal" class="setCellValue showValue"><i class="fas fa-question-circle"></i></a></td>
<td class="text-center"><i class="fas fa-trash-alt"></i></td>
<td class="text-center"><i class="fas fa-edit"></i></td>
</tr>
{% endfor %}
</table>
</form>
</div>
вот мой HTML для модального (с экрана)
<div class="modal fade " id="showClientModalInfo" tabindex="-1" role="dialog" aria-labelledby="clientLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="clientLabel">Numéro Client : {{ idClientGetted }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-11 m-auto text-left">
<table id="modalTable" class="table font-weight-normal">
<tr>
<td style="border-top:0px;font-weight:600;">Numéro de campagne : </td>
<td style="border-top:0px;font-weight:600;">###</td>
</tr>
<tr>
<td>Budget : </td>
<td>##</td>
</tr>
<tr>
<td>Bénéfice : </td>
<td>###</td>
</tr>
<tr>
<td>Date d'échéance : </td>
<td>###</td>
</tr>
<tr>
<td>Apport Privé : </td>
<td>###</td>
</tr>
<tr>
<td style="border-top:0px;"></td>
<td style="border-top:0px;"></td>
</tr>
<tr>
<td style="border-top:0px; font-weight:600;">Numéro d'objectif : </td>
<td style="border-top:0px;font-weight:600;">###</td>
</tr>
<tr>
<td>Type : </td>
<td>###</td>
</tr>
<tr>
<td>Plateforme : </td>
<td>###</td>
</tr>
<tr>
<td>Cout objectif : </td>
<td>###</td>
</tr>
<tr>
<td>Devise : </td>
<td>###</td>
</tr>
<tr>
<td>Coût par clique : </td>
<td>###</td>
</tr>
<tr>
<td>Coût par acquisition : </td>
<td>###</td>
</tr>
<!-- rajouter dans la query si null écrire autre chose-->
<tr>
<td>Nombre d'impression : </td>
<td>###</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Imprimer la fiche client</button>
</div>
</div>
</div>
</div>
Моя конечная цель:
Я бы хотел, чтобы модал появлялся динамически, без необходимости обновлять страницу или загружать другую.
Если бы вы могли дать мне несколько целых, это было бы очень приятно! Все же все смешалось со всеми тезисами новостных языков и функций:)
Спасибо всем за то время, которое вы потратили на чтение моих вопросов.