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ć.

[PHP] pobierz, plaintext 
            echo "<div class=\"reload_3\">";
            echo "<div class=\"hdd\">";
                echo "<div class=\"info huge\">Ustawienia Dysków</div>";
                for($i = $dvr_data['dvr_sata_port_quantity'] - $dvr_data['dvr_sata_port_quantity'] + 1; $i <= $dvr_data['dvr_sata_port_quantity']; $i++) {
                    $hdd_object = $hdd->get_not_connected_hdd();
                    $hdd_on_dvr_port = $hdd->get_specific_hdd($dvr_data['dvr_id'], $i);
                    if ($hdd_on_dvr_port != NULL) { 
                        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>"; 
                    }
                    else {
                        echo "<form>";
                            echo "<div id=\"hdd_form_id_" . $i . "\"><span class=\"key right\">HDD SATA Port " . $i . "</span><span class=\"dash\">-</span>";
                            if ($hdd_object != null) {
                                echo "<input type=\"hidden\" name=\"dvr_sata_port\" value=\"" . $i . "\">";
                                echo "<select id=\"set_hdd_on_dvr_port\" class=\"select\" name=\"hdd_id\">";
                                echo "<option value=\"\" data-display=\"Wybierz Dysk\">Wybierz Dysk</option>";
                                foreach ($hdd_object as $hdd_object) {
                                    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>";
                                }
                                echo "</select>";
                                echo "";
                                echo "<span class=\"dash\"></span><input type=\"submit\" value=\"Podłącz Dysk\" class=\"touch\" id=\"" . $i . "\" onclick=\"return touchHDD(this);\">";
                            }
                            else {
                                echo "<span class=\"value\">Brak dostępnych dysków</span>";
                            }
                            echo "</div>";
                        echo "</form>";
                    }
                }
            echo "</div>";
            echo "</div>";
[PHP] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
function touchHDD(elem) {
    $("#overlay").fadeIn(250);
    var dvr_id = $("#dvr_get_data").attr('dvr_id');
    var data = $(elem).parents('form').serializeArray();
    data.push({ name: "ajax_test", value: "touch_hdd" });
    data.push({ name: "dvr_id", value: dvr_id });
    console.log(data);
    var touch_hdd = $.ajax({
        type: "POST",
        cache: false,
        url: "../php_function/dvr/dvr.php",
        data: $.param(data)
    });
    $.when(touch_hdd).done( async function(response) {
        if ($('#message').hasClass("error_message")) {
            $('#message').removeClass("error_message");
            await sleep(750); 
            $('#message').removeAttr( 'style' );
        }
        $('#message').attr( 'style', 'color: greenyellow' );
        $('#message').addClass("error_message");     
 
 
        $(".reload_3").load(location.href + " .hdd");
        console.log(response);
        $( '#message' ).html($.parseJSON(response)); 
        await sleep(750); 
        $("#overlay").fadeOut(250); 
    });
};
[JAVASCRIPT] pobierz, plaintext 

Żą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ć.

AJAX zwraca czysty JSON

[PHP] pobierz, plaintext 
            if ($_POST['ajax_test'] == 'touch_hdd') {
                $dvr_data = $dvr->get_dvr_data_by_id($dvr->encrypt_decrypt_passwd('decrypt', $_POST['dvr_id']));
                $hdd_id = $dvr->encrypt_decrypt_passwd('decrypt', $dvr->encrypt_decrypt_passwd('decrypt', $_POST['hdd_id']));
                echo json_encode($hdd->touchHDD($hdd_id, $_POST['dvr_sata_port'], $dvr_data));
                exit;
            }
[PHP] pobierz, plaintext 

a dokładnie poniższy tekst w postaci JSON

[PHP] pobierz, plaintext 
        $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> ";
        return $info;
[PHP] pobierz, plaintext 

Selecty są budowane przez bibliotekę

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() { $('select:not(.ignore)').niceSelect(); });    
 
$.fn.niceSelect = function(method) {
 
    // Methods
    if (typeof method == 'string') {      
      if (method == 'update') {
        this.each(function() {
          var $select = $(this);
          var $dropdown = $(this).next('.nice-select');
          var open = $dropdown.hasClass('open');
 
          if ($dropdown.length) {
            $dropdown.remove();
            create_nice_select($select);
 
            if (open) {
              $select.next().trigger('click');
            }
          }
        });
      } else if (method == 'destroy') {
        this.each(function() {
          var $select = $(this);
          var $dropdown = $(this).next('.nice-select');
 
          if ($dropdown.length) {
            $dropdown.remove();
            $select.css('display', '');
          }
        });
        if ($('.nice-select').length == 0) {
          $(document).off('.nice_select');
        }
      } else {
        console.log('Method "' + method + '" does not exist.')
      }
      return this;
    }
 
    // Hide native select
    this.hide();
 
    // Create custom markup
    this.each(function() {
      var $select = $(this);
 
      if (!$select.next().hasClass('nice-select')) {
        $(this).addClass($(this).attr("id"));
        create_nice_select($select);
      }
    });
 
    function create_nice_select($select) {
      $select.after($('<div></div>')
        .addClass('nice-select')
        .addClass($select.attr('class') || '')
        .addClass($select.attr('disabled') ? 'disabled' : '')
        .attr('tabindex', $select.attr('disabled') ? null : '0')
        .html('<span class="current"></span><ul class="list"></ul>')
      );
 
      var $dropdown = $select.next();
      var $options = $select.find('option');
      var $selected = $select.find('option:selected');
 
      $dropdown.find('.current').html($selected.data('display') || $selected.text());
 
      $options.each(function(i) {
        var $option = $(this);
        var display = $option.data('display');
 
        $dropdown.find('ul').append($('<li></li>')
          .attr('data-value', $option.val())
          .attr('data-display', (display || null))
          .addClass('option' +
            ($option.is(':selected') ? ' selected' : '') +
            ($option.is(':disabled') ? ' disabled' : ''))
          .html($option.text())
        );
      });
    }
 
    /* Event listeners */
 
    // Unbind existing events in case that the plugin has been initialized before
    $(document).off('.nice_select');
 
    // Open/close
    $(document).on('click.nice_select', '.nice-select', function(event) {
      var $dropdown = $(this);
 
      $('.nice-select').not($dropdown).removeClass('open');
      $dropdown.toggleClass('open');
 
      if ($dropdown.hasClass('open')) {
        $dropdown.find('.option');  
        $dropdown.find('.focus').removeClass('focus');
        $dropdown.find('.selected').addClass('focus');
 
        if ($dropdown.children('.current').hasClass('selected')) {
          $dropdown.children('.current').removeClass('selected');
        }
 
      } else {
        if ($dropdown.children('.list').find('li:gt(0).option.selected').length === 1) {
          $dropdown.children('.current').addClass('selected');
        } 
        $dropdown.focus();
      }
 
    });
 
    // Close when clicking outside
    $(document).on('click.nice_select', function(event) {
    if ($(event.target).closest('.nice-select.open').length === 0) {
      if ($('.nice-select.open').children('.list').find('li:gt(0).option.selected').length === 1) {
        $('.nice-select.open').children('.current').addClass('selected');
      } 
      $('.nice-select').removeClass('open'); 
     }
    });
 
    // Option click
    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
      var $option = $(this);
      var $dropdown = $option.closest('.nice-select');
 
      $dropdown.find('.selected').removeClass('selected');
      $option.addClass('selected');
 
      $dropdown.children('.current').addClass('selected');
 
 
      var text = $option.data('display') || $option.text();
      $dropdown.find('.current').text(text);
 
      $dropdown.prev('select').val($option.data('value')).trigger('change');
    });
 
    // Keyboard events
    $(document).on('keydown.nice_select', '.nice-select', function(event) {    
      var $dropdown = $(this);
      var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
 
      // Space or Enter
      if (event.keyCode == 32 || event.keyCode == 13) {
        if ($dropdown.hasClass('open')) {
          $focused_option.trigger('click');
        } else {
          $dropdown.trigger('click');
        }
        return false;
      // Down
      } else if (event.keyCode == 40) {
        if (!$dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        } else {
          var $next = $focused_option.nextAll('.option:not(.disabled)').first();
          if ($next.length > 0) {
            $dropdown.find('.focus').removeClass('focus');
            $next.addClass('focus');
          }
        }
        return false;
      // Up
      } else if (event.keyCode == 38) {
        if (!$dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        } else {
          var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
          if ($prev.length > 0) {
            $dropdown.find('.focus').removeClass('focus');
            $prev.addClass('focus');
          }
        }
        return false;
      // Esc
      } else if (event.keyCode == 27) {
        if ($dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        }
      // Tab
      } else if (event.keyCode == 9) {
        if ($dropdown.hasClass('open')) {
          return false;
        }
      }
    });
 
    // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
    var style = document.createElement('a').style;
    style.cssText = 'pointer-events:auto';
    if (style.pointerEvents !== 'auto') {
      $('html').addClass('no-csspointerevents');
    }
 
    return this;
 
  };
[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

JSON z HTML to nie jest czysty JSON

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.

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


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

No i się udało, dzięki wielkie za nakierowanie. Chyba ostatnio przemęczony jestem bo nie widzę nic pod latarnią.