Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Ajax - load problem
topcio
post 27.03.2018, 21:00:01
Post #1





Grupa: Zarejestrowani
Postów: 120
Pomógł: 0
Dołączył: 14.01.2017

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


Witajcie

Natrafiłem na problem tego typu, iż
mam pewnego diva w którym jest klika elementów (select) korzystających ze skryptu zmieniającego domyślny styl select na inny.

jest to lista

ELEMENT A -> guzik zatwierdź
ELEMENT B -> guzik zatwierdź
ELEMENT C -> guzik zatwierdź
ELEMENT D -> guzik zatwierdź

po wybraniu z listy i zatwierdzeniu zmian na którymkolwiek elemencie przeładowuje diva, aby w pozostałych selectach zaktualizowały się dane.

Problem w tym że po przeładowaniu przestaje działać styl select zasysany z pliku .js a w jego miejsce wskakuje zwykły select.

Czy można to jakoś naprawić.

  1. echo "<div class=\"reload_3\">";
  2. echo "<div class=\"hdd\">";
  3. echo "<div class=\"info huge\">Ustawienia Dysków</div>";
  4. for($i = $dvr_data['dvr_sata_port_quantity'] - $dvr_data['dvr_sata_port_quantity'] + 1; $i <= $dvr_data['dvr_sata_port_quantity']; $i++) {
  5. $hdd_object = $hdd->get_not_connected_hdd();
  6. $hdd_on_dvr_port = $hdd->get_specific_hdd($dvr_data['dvr_id'], $i);
  7. if ($hdd_on_dvr_port != NULL) {
  8. echo "<div><span class=\"key right\">HDD SATA Port " . $i . "</span><span class=\"dash\">-</span><span class=\"value\">" . $hdd_on_dvr_port['hdd_capacity'] . "TB " . $hdd_on_dvr_port['hdd_vendor'] . " - SN ➜ " . $hdd_on_dvr_port['hdd_sn'] . "</span><span class=\"dash\"></span><span class=\"untouch\">Odłącz Dysk</span></div>";
  9. }
  10. else {
  11. echo "<form>";
  12. echo "<div id=\"hdd_form_id_" . $i . "\"><span class=\"key right\">HDD SATA Port " . $i . "</span><span class=\"dash\">-</span>";
  13. if ($hdd_object != null) {
  14. echo "<input type=\"hidden\" name=\"dvr_sata_port\" value=\"" . $i . "\">";
  15. echo "<select id=\"set_hdd_on_dvr_port\" class=\"select\" name=\"hdd_id\">";
  16. echo "<option value=\"\" data-display=\"Wybierz Dysk\">Wybierz Dysk</option>";
  17. foreach ($hdd_object as $hdd_object) {
  18. echo "<option value=\"" . $dvr->encrypt_decrypt_passwd('encrypt', $dvr->encrypt_decrypt_passwd('encrypt', $hdd_object['hdd_id'])) . "\">" . $hdd_object['hdd_capacity'] . " TB - " . $hdd_object['hdd_vendor'] . " - " . $hdd_object['hdd_sn'] . "</option>";
  19. }
  20. echo "</select>";
  21. echo "";
  22. echo "<span class=\"dash\"></span><input type=\"submit\" value=\"Podłącz Dysk\" class=\"touch\" id=\"" . $i . "\" onclick=\"return touchHDD(this);\">";
  23. }
  24. else {
  25. echo "<span class=\"value\">Brak dostępnych dysków</span>";
  26. }
  27. echo "</div>";
  28. echo "</form>";
  29. }
  30. }
  31. echo "</div>";
  32. echo "</div>";


[JAVASCRIPT] pobierz, plaintext
  1. function touchHDD(elem) {
  2. $("#overlay").fadeIn(250);
  3. var dvr_id = $("#dvr_get_data").attr('dvr_id');
  4. var data = $(elem).parents('form').serializeArray();
  5. data.push({ name: "ajax_test", value: "touch_hdd" });
  6. data.push({ name: "dvr_id", value: dvr_id });
  7. console.log(data);
  8. var touch_hdd = $.ajax({
  9. type: "POST",
  10. cache: false,
  11. url: "../php_function/dvr/dvr.php",
  12. data: $.param(data)
  13. });
  14. $.when(touch_hdd).done( async function(response) {
  15. if ($('#message').hasClass("error_message")) {
  16. $('#message').removeClass("error_message");
  17. await sleep(750);
  18. $('#message').removeAttr( 'style' );
  19. }
  20. $('#message').attr( 'style', 'color: greenyellow' );
  21. $('#message').addClass("error_message");
  22.  
  23.  
  24. $(".reload_3").load(location.href + " .hdd");
  25. console.log(response);
  26. $( '#message' ).html($.parseJSON(response));
  27. await sleep(750);
  28. $("#overlay").fadeOut(250);
  29. });
  30. };
[JAVASCRIPT] pobierz, plaintext


Ten post edytował topcio 27.03.2018, 21:00:37
Go to the top of the page
+Quote Post
markuz
post 27.03.2018, 21:03:57
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

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


Żądanie AJAX powinno zwrócić czysty JSON a budowaniem formularza powinien zająć się JavaScript. Jak robisz inaczej (jak wyżej) to będziesz natrafiał na coraz więcej problemów.

Ten select jest budowany przez jakąś bibliotekę? Pewnie tak, więc po otrzymaniu tej błędnej odpowiedzi (bo zawiera HTML) musisz ją ponownie wywołać.

Ten post edytował markuz 27.03.2018, 21:05:01


--------------------
Go to the top of the page
+Quote Post
topcio
post 27.03.2018, 21:09:15
Post #3





Grupa: Zarejestrowani
Postów: 120
Pomógł: 0
Dołączył: 14.01.2017

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


AJAX zwraca czysty JSON

  1. if ($_POST['ajax_test'] == 'touch_hdd') {
  2. $dvr_data = $dvr->get_dvr_data_by_id($dvr->encrypt_decrypt_passwd('decrypt', $_POST['dvr_id']));
  3. $hdd_id = $dvr->encrypt_decrypt_passwd('decrypt', $dvr->encrypt_decrypt_passwd('decrypt', $_POST['hdd_id']));
  4. echo json_encode($hdd->touchHDD($hdd_id, $_POST['dvr_sata_port'], $dvr_data));
  5. }


a dokładnie poniższy tekst w postaci JSON
  1. $info = "Dysk o Numerze Seryjnym <span class=\"info_data\">" . $this->get_hdd_sn($hdd_id) . "</span> został podłączony do portu nr: <span class=\"info_data\">" . $dvr_sata_port . "</span> ";
  2. return $info;


Selecty są budowane przez bibliotekę
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() { $('select:not(.ignore)').niceSelect(); });
  2.  
  3. $.fn.niceSelect = function(method) {
  4.  
  5. // Methods
  6. if (typeof method == 'string') {
  7. if (method == 'update') {
  8. this.each(function() {
  9. var $select = $(this);
  10. var $dropdown = $(this).next('.nice-select');
  11. var open = $dropdown.hasClass('open');
  12.  
  13. if ($dropdown.length) {
  14. $dropdown.remove();
  15. create_nice_select($select);
  16.  
  17. if (open) {
  18. $select.next().trigger('click');
  19. }
  20. }
  21. });
  22. } else if (method == 'destroy') {
  23. this.each(function() {
  24. var $select = $(this);
  25. var $dropdown = $(this).next('.nice-select');
  26.  
  27. if ($dropdown.length) {
  28. $dropdown.remove();
  29. $select.css('display', '');
  30. }
  31. });
  32. if ($('.nice-select').length == 0) {
  33. $(document).off('.nice_select');
  34. }
  35. } else {
  36. console.log('Method "' + method + '" does not exist.')
  37. }
  38. return this;
  39. }
  40.  
  41. // Hide native select
  42. this.hide();
  43.  
  44. // Create custom markup
  45. this.each(function() {
  46. var $select = $(this);
  47.  
  48. if (!$select.next().hasClass('nice-select')) {
  49. $(this).addClass($(this).attr("id"));
  50. create_nice_select($select);
  51. }
  52. });
  53.  
  54. function create_nice_select($select) {
  55. $select.after($('<div></div>')
  56. .addClass('nice-select')
  57. .addClass($select.attr('class') || '')
  58. .addClass($select.attr('disabled') ? 'disabled' : '')
  59. .attr('tabindex', $select.attr('disabled') ? null : '0')
  60. .html('<span class="current"></span><ul class="list"></ul>')
  61. );
  62.  
  63. var $dropdown = $select.next();
  64. var $options = $select.find('option');
  65. var $selected = $select.find('option:selected');
  66.  
  67. $dropdown.find('.current').html($selected.data('display') || $selected.text());
  68.  
  69. $options.each(function(i) {
  70. var $option = $(this);
  71. var display = $option.data('display');
  72.  
  73. $dropdown.find('ul').append($('<li></li>')
  74. .attr('data-value', $option.val())
  75. .attr('data-display', (display || null))
  76. .addClass('option' +
  77. ($option.is(':selected') ? ' selected' : '') +
  78. ($option.is(':disabled') ? ' disabled' : ''))
  79. .html($option.text())
  80. );
  81. });
  82. }
  83.  
  84. /* Event listeners */
  85.  
  86. // Unbind existing events in case that the plugin has been initialized before
  87. $(document).off('.nice_select');
  88.  
  89. // Open/close
  90. $(document).on('click.nice_select', '.nice-select', function(event) {
  91. var $dropdown = $(this);
  92.  
  93. $('.nice-select').not($dropdown).removeClass('open');
  94. $dropdown.toggleClass('open');
  95.  
  96. if ($dropdown.hasClass('open')) {
  97. $dropdown.find('.option');
  98. $dropdown.find('.focus').removeClass('focus');
  99. $dropdown.find('.selected').addClass('focus');
  100.  
  101. if ($dropdown.children('.current').hasClass('selected')) {
  102. $dropdown.children('.current').removeClass('selected');
  103. }
  104.  
  105. } else {
  106. if ($dropdown.children('.list').find('li:gt(0).option.selected').length === 1) {
  107. $dropdown.children('.current').addClass('selected');
  108. }
  109. $dropdown.focus();
  110. }
  111.  
  112. });
  113.  
  114. // Close when clicking outside
  115. $(document).on('click.nice_select', function(event) {
  116. if ($(event.target).closest('.nice-select.open').length === 0) {
  117. if ($('.nice-select.open').children('.list').find('li:gt(0).option.selected').length === 1) {
  118. $('.nice-select.open').children('.current').addClass('selected');
  119. }
  120. $('.nice-select').removeClass('open');
  121. }
  122. });
  123.  
  124. // Option click
  125. $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
  126. var $option = $(this);
  127. var $dropdown = $option.closest('.nice-select');
  128.  
  129. $dropdown.find('.selected').removeClass('selected');
  130. $option.addClass('selected');
  131.  
  132. $dropdown.children('.current').addClass('selected');
  133.  
  134.  
  135. var text = $option.data('display') || $option.text();
  136. $dropdown.find('.current').text(text);
  137.  
  138. $dropdown.prev('select').val($option.data('value')).trigger('change');
  139. });
  140.  
  141. // Keyboard events
  142. $(document).on('keydown.nice_select', '.nice-select', function(event) {
  143. var $dropdown = $(this);
  144. var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
  145.  
  146. // Space or Enter
  147. if (event.keyCode == 32 || event.keyCode == 13) {
  148. if ($dropdown.hasClass('open')) {
  149. $focused_option.trigger('click');
  150. } else {
  151. $dropdown.trigger('click');
  152. }
  153. return false;
  154. // Down
  155. } else if (event.keyCode == 40) {
  156. if (!$dropdown.hasClass('open')) {
  157. $dropdown.trigger('click');
  158. } else {
  159. var $next = $focused_option.nextAll('.option:not(.disabled)').first();
  160. if ($next.length > 0) {
  161. $dropdown.find('.focus').removeClass('focus');
  162. $next.addClass('focus');
  163. }
  164. }
  165. return false;
  166. // Up
  167. } else if (event.keyCode == 38) {
  168. if (!$dropdown.hasClass('open')) {
  169. $dropdown.trigger('click');
  170. } else {
  171. var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
  172. if ($prev.length > 0) {
  173. $dropdown.find('.focus').removeClass('focus');
  174. $prev.addClass('focus');
  175. }
  176. }
  177. return false;
  178. // Esc
  179. } else if (event.keyCode == 27) {
  180. if ($dropdown.hasClass('open')) {
  181. $dropdown.trigger('click');
  182. }
  183. // Tab
  184. } else if (event.keyCode == 9) {
  185. if ($dropdown.hasClass('open')) {
  186. return false;
  187. }
  188. }
  189. });
  190.  
  191. // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
  192. var style = document.createElement('a').style;
  193. style.cssText = 'pointer-events:auto';
  194. if (style.pointerEvents !== 'auto') {
  195. $('html').addClass('no-csspointerevents');
  196. }
  197.  
  198. return this;
  199.  
  200. };
[JAVASCRIPT] pobierz, plaintext



Chodzi o to, że po przeładowaniu tego diva reload_3 te selecty przestają korzystać z biblioteki, ale dlaczego?? o to pytam

Ten post edytował topcio 27.03.2018, 21:12:05
Go to the top of the page
+Quote Post
markuz
post 27.03.2018, 21:16:41
Post #4





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

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


JSON z HTML to nie jest czysty JSON smile.gif

Masz wywołanie $('select:not(.ignore)').niceSelect(); podczas załadowania strony. Ten kod szuka selectów i podmienia im style, eventy itp. A potem wstawiasz nowy select i musisz powiedzieć tej bibliotece - "ej mam nowy select do ostylowania bo usunąłem stary!" czyli ponownie wywołujesz $('select:not(.ignore)').niceSelect(); jak wstawisz do DOM nowego selecta.


--------------------
Go to the top of the page
+Quote Post
topcio
post 27.03.2018, 21:22:32
Post #5





Grupa: Zarejestrowani
Postów: 120
Pomógł: 0
Dołączył: 14.01.2017

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


Cytat(markuz @ 27.03.2018, 22:16:41 ) *
JSON z HTML to nie jest czysty JSON smile.gif


No masz rację, chodziło mi że nie ma nic innego oprócz json w odpowiedzi tongue.gif

Cytat(markuz @ 27.03.2018, 22:16:41 ) *
Masz wywołanie $('select:not(.ignore)').niceSelect(); podczas załadowania strony. Ten kod szuka selectów i podmienia im style, eventy itp. A potem wstawiasz nowy select i musisz powiedzieć tej bibliotece - "ej mam nowy select do ostylowania bo usunąłem stary!" czyli ponownie wywołujesz $('select:not(.ignore)').niceSelect(); jak wstawisz do DOM nowego selecta.

Ok to teraz wiem gdzie szukać, może mi się uda tongue.gif

No i się udało, dzięki wielkie za nakierowanie. Chyba ostatnio przemęczony jestem bo nie widzę nic pod latarnią.
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: 23.09.2019 - 19:34