Блог

Я пытаюсь сгенерировать таблицу с помощью php и поместить ее туда, где div имеет класс «accordian-table». Однако результирующий html-код не заменяет div при запуске приведенного ниже кода. Я предполагаю, что я неправильно ссылаюсь на «.accordian-table», поскольку работает модифицированная функция без оператора each.

 function gettable () {
    $('.accordian-system').each( function() {

        var accordianSystem = $(this);

        var selectedID = accordianSystem.children('.selItems option:selected').val();

        $.ajax({
            type: "POST",
            url: 'ajax-gettable.php',
            data: { ID: selectedID },
            success: function(data) {
                accordianSystem.find('.accordian-table' ).replaceWith(data);
            }
        });


    } );
}
 

Структура html:

 <div class="accordian-systems">
    <h3></h3>
    <div class="accordian-system">
        <select class="selItems"></select>
        <div class="accordian-table"></div>
    </div>
</div>
 

РЕДАКТИРОВАТЬ: я предполагаю, что это не достигает функции успеха. Тем не менее, это происходит, когда я заменяю это:

 var selectedID = accordianSystem.children('.selItems option:selected').val();
 

с помощью этого:

 var selectedID = $('.accordian-system').children('.selItems option:selected').val();
 

И если удалить это и его закрывающую фигурную скобку:

 $('.accordian-system').each( function() {
 

Этот оператор не будет работать должным образом:

 accordianSystem.children('.selItems option:selected').val()
 

Это будет соответствовать только прямым дочерним элементам, которые удовлетворяют этому селектору, но option:selected никогда не является прямым дочерним элементом (это дочерний элемент дочернего элемента), поэтому он ничему не будет соответствовать. Я думаю, вы, вероятно, хотите этого:

 accordianSystem.find('.selItems option:selected').val()
 

Если бы вы могли выбрать более одного элемента, вам пришлось бы дополнительно модифицировать этот код, потому что он может возвращать массив значений, а не только одно значение.

Кроме того, совет Луиса является разумным. Не предполагайте, что делает ваш код. Установите точки останова, пройдитесь по ним и посмотрите, что он на самом деле делает. Если он не попадает в ваш success обработчик, затем создайте error обработчик и посмотрите на его аргументы, чтобы понять, почему он терпит неудачу. То, как ваш код написан в данный момент, вы, вероятно, будете передавать null как selectedID , пока не внесете рекомендуемое выше изменение.

Когда значение select элемента изменяется, выполняется ajax-запрос со значением select элемента. Ответ от запроса ajax заменяет div на .accordian-table класс. Что, если вы снова измените значение выбора? Нет div для замены!Я предоставлю решение, которое должно работать в первый и последующий раз.

 $(function() {
    $('div.accordian-system').children('select.selItems').on('change', gettable);
});

function gettable () {
    var accordianSystem = $(this).parent();
    var selectedID = this.value;
    $.ajax({
        type: "POST",
        url: 'ajax-gettable.php',
        data: { ID: selectedID },
        success: function(data) {
            var repElem = accordianSystem.children('.accordian-table' ) || $(this).next();
            repElem.replaceWith(data);
        }
    });
}
 

Эта демонстрация просто демонстрирует, что при изменении значения select элемента выполняется запрос ajax. Вы можете проверить сетевую вкладку своих инструментов отладки, и вы должны увидеть что-то вроде этого:

 Remote Address:162.243.204.190:80
Request URL:http://fiddle.jshell.net/fiddleyetu/wKA2g/show/ajax-gettable.php
Request Method:POST
Status Code:404 NOT FOUND
Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
ID:50
 

Вот рабочий пример в JSFiddle

HTML:

 <div class="accordian-systems">
     <h3>Accordian Systems</h3>

    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>1</option>
            <option>2</option>
        </select>
        <div class="accordian-table"></div>
    </div>
    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>3</option>
            <option>4</option>
        </select>
        <div class="accordian-table"></div>
    </div>
</div>
 

JS:

 var accordianSystems = $('div.accordian-system');
accordianSystems.each(function (index, element) {
    var selectedItemText = $(element).find('.selItems option:selected').text();
    setTable(element, selectedItemText);
});
accordianSystems.find('.selItems').change(function () {
    setTable($(this).parent(), $(this).val());
});

function setTable(accordianSystem, id) {
    $(accordianSystem).children('div.accordian-table').text('Selected value: '   id);
    //Here you would otherwise call your ajax function...
}