Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [MySQL][JavaScript][PHP]Ładowanie danych do modala
filip3712
post 24.06.2020, 23:48:37
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 19.11.2017

Ostrzeżenie: (0%)
-----


Cześć, posiadam modala którego chciałbym używam jednocześnie do tworzenia nowego rekordu w tabeli oraz edytowania tych rekordów. Tworzenie rekordów do bazy MySQL działa świetnie gorzej z edytowaniem danego rekordu ponieważ nie wiem jak to zrobić :/ Przeczytałem chyba wszystkie tematy na forum dot. ładowania danych do modala ale ja posiadam jeden modal do dwóch rzeczy :/

Przycisk który otwiera modala do edytowania rekordu:
  1. <td class="text-center">
  2. <a href="#" id="edit_row" data-toggle="tooltip" data-placement="top" title="Edit">
  3. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="edit-event feather feather-edit-2 text-success">
  4. <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
  5. </svg>
  6. </a>
  7. </td>

JS przycisku:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var editEvent = document.getElementById("edit_row");
  3.  
  4. editEvent.onclick = function() {
  5. modal.style.display = "block";
  6. addEvent.style.display = 'none';
  7. editEvent.style.display = 'block';
  8. addEventTitle.style.display = 'none';
  9. editEventTitle.style.display = 'block';
  10.  
  11. document.getElementsByTagName('body')[0].style.overflow = 'hidden';
  12. createBackdropElement();
  13. enableDatePicker();
  14. }
  15. });
[JAVASCRIPT] pobierz, plaintext


Oraz cały modal:
  1. <!-- The Modal -->
  2. <div id="addEventsModal" class="modal animated fadeIn">
  3. <?php
  4. $currentDateTime = date('d-m-Y');
  5. //echo $currentDateTime;
  6. ?>
  7. <div class="modal-dialog modal-dialog-centered">
  8. <!-- Modal content -->
  9. <div class="modal-content">
  10. <form class="" action="process.php" method="post" enctype="multipart/form-data">
  11. <div class="modal-body">
  12. <span class="close">&times;</span>
  13. <div class="add-edit-event-box">
  14. <div class="add-edit-event-content">
  15. <h5 class="add-event-title modal-title">Dodawanie nowego rekordu</h5>
  16. <h5 class="edit-event-title modal-title">Edit Events</h5>
  17. <div class="row">
  18. <div class="col-md-6 col-sm-6 col-12">
  19. <div class="form-group start-date">
  20. <label for="start-date" class="">Data:</label>
  21. <div class="d-flex">
  22. <!-- name="data" -->
  23. <input id="start-date" name="data" placeholder="Data" class="form-control" type="text" value=<? echo $currentDateTime ?>>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="col-md-12">
  28. <label for="start-date" class="">Nr. artykułu:</label>
  29. <div class="d-flex event-title"><!-- name="nr_art" -->
  30. <input id="nr_art" name="nr_art" type="text" placeholder="Numer artykułu" class="form-control">
  31. </div>
  32. </div>
  33. <div class="col-md-12">
  34. <label for="start-date" class="">Nazwa artykułu:</label>
  35. <div class="d-flex event-title"><!-- name="nazwa_art" -->
  36. <input id="nazwa_art" name="nazwa_art" type="text" placeholder="Nazwa artykułu" class="form-control">
  37. </div>
  38. </div>
  39. <div class="col-md-12">
  40. <label for="start-date" class="">Ilość potrzebna:</label>
  41. <div class="d-flex event-title"><!-- name="potrzeba" -->
  42. <input id="ilosc_potrzeba" name="ilosc_potrzeba" type="text" placeholder="Zamówiona ilość detali" class="form-control">
  43. </div>
  44. </div>
  45. <div class="col-md-12">
  46. <label for="start-date" class="">Ilość wydana:</label>
  47. <div class="d-flex event-title"><!-- name="data" -->
  48. <input id="ilosc_wyslana" name="ilosc_wyslana" type="text" placeholder="Ilość wydanych detali" class="form-control">
  49. </div>
  50. </div>
  51. <div class="col-md-12">
  52. <label for="start-date" class="">Wykonał:</label>
  53. <div class="d-flex event-title">
  54. <input id="wydal" name="wydal" type="text" placeholder="Wydał" class="form-control">
  55. </div>
  56. </div>
  57. </div>
  58.  
  59. <div class="row">
  60. <div class="col-md-12">
  61. <label for="start-date" class="">Uwagi:</label>
  62. <div class="d-flex event-description">
  63. <textarea id="taskdescription" placeholder="Wpisz swoją uwagę(opcjonalne)" rows="3" class="form-control" name="uwagi"></textarea>
  64. </div>
  65. </div>
  66. </div>
  67.  
  68. <div class="row">
  69. <div class="col-md-12">
  70. <div class="event-badge">
  71. <p class="">Status:</p>
  72. <div class="d-sm-flex d-block">
  73. <div class="n-chk">
  74. <label class="new-control new-radio radio-success">
  75. <input type="radio" class="new-control-input" name="marker" value="success">
  76. <span class="new-control-indicator"></span>Wysłane
  77. </label>
  78. </div>
  79.  
  80. <div class="n-chk">
  81. <label class="new-control new-radio radio-danger">
  82. <input type="radio" class="new-control-input" name="marker" value="danger">
  83. <span class="new-control-indicator"></span>Anulowane
  84. </label>
  85. </div>
  86.  
  87. <div class="n-chk">
  88. <label class="new-control new-radio radio-primary">
  89. <input type="radio" class="new-control-input" name="marker" value="primary">
  90. <span class="new-control-indicator"></span>Przygotowane
  91. </label>
  92. </div>
  93.  
  94. <div class="n-chk">
  95. <label class="new-control new-radio radio-warning">
  96. <input type="radio" class="new-control-input" name="marker" value="warning">
  97. <span class="new-control-indicator"></span>Wstrzymane
  98. </label>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="modal-footer">
  108. <!--<button id="discard" class="btn" data-dismiss="modal">Anuluj</button>-->
  109. <a href="java script:void(0);" id="discard" data-dismiss="modal">Anuluj</a>
  110. <button id="edit-event" class="btn">Zapisz</button>
  111. <button id="add-e" name="gotowe_add" class="btn">Dodaj</button>
  112. </div>
  113. </form>
  114. </div>
  115. </div>
  116. </div>




Ten post edytował filip3712 25.06.2020, 00:00:38
Go to the top of the page
+Quote Post
emillo91
post 28.06.2020, 11:56:15
Post #2





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


Żeby mieć jeden modal do dwóch czynności musisz rozróżnić akcje, które ten modal ma wykonywać. Do tego celu możesz wykorzystać nazwę klasy css na zasadzie modalRowAdd modalRowEdit. Kolejnym krokiem jest wykrycie tych klas. Nie wiem na jakim etapie doświadczenia z Jquery jesteś bo Jquery posiada funkcje sprawdzające czy dana klasa jest zawarta w selektorze i na tej podstawie możesz uruchamiać wybrane akcje dla modala. Z mojej strony mogę Tobie polecić bibliotekę jquery ui i klasę ui dialog (chyba, że ją znasz i nie przypadła Tobie do gustu). Same dane możesz oczywiście pobrać przy pomocy ajax, przesyłając w do backendu id rekordu a samo id rekordu możesz przekazać do otwieranego dialogu za pomocą atrybutu data-*. Później dane wstawić do poszczególnych inputów itd. Aktualizację możesz przeprowadzić po wykryciu klasy modalRowAdd albo modalRowEdit
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 13:30