Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   element val() после ajax (https://javascript.ru/forum/events/73920-element-val-posle-ajax.html)

Syfer43 29.05.2018 07:41

element val() после ajax
 
Добрый день, уважаемые участники форума, специалисты!
имеем:
Тело документа, обновляемое по событиям(суть обновления - загрузка нужного шаблона страницы, то есть, наполнение <div> контентом нужного мне шаблона, а так же, передача данных от пользователя в систему посредством $_POST, валидация данных, и, в случае успешной валидации - запись данных в переменную $_SESSION).

Пример события:
Пользователь ввел две переменных, после этого, система, проверив данные, сделала выборку из БД, и предоставила результаты в виде селекта, с опциями - строками бд(идентификаторы), выбрав из списка нужный идентификатор, пользователь получает полную выписку. В случае, если результаты пустые/не те, пользователь нажимает назад, после чего подгружается предыдущий шаблон, где он может повторить ввод данных. Ввод данных и выборки опций происходят в диалоговом окне.

Суть проблемы:
При попытке повторного ввода данных, в переменной $_POST['account'] не передается ничего, т.е. пусто.

Диалоговое окно:
$(".dialog").dialog({
        modal: true,
        autoOpen: false,
        width: 450,
        show: {
            effect: "fade",
            duration: 700
       },
        hide: {
            effect: "fade",
            duration: 200
        }
    });


<div class="dialog" title="Укажите данные">
    <div class="dialog-content">
        <label for="val1-code">Введите Val1:</label>
        <input type='number' name='val1' id="val1-code" />
<br>
        <label for="val2-code">Введите Val2:</label>
        <input type='number' name='val2' id="val2-code" />
        
        <div class="my-but select-button disabled">Отправить</div>
    </div>
</div>


Получение данных:
$(document).on('click', '.select-button', (function () {
        if ($(this).hasClass('enabled'))
        {
            var value = $('#cons-list').children('option:selected').val();
            if (consignee != '') {
                $("#page-preloader").fadeIn(800);
                $(".dialog").dialog('close');
                jQuery.ajax({
                    type: 'POST',
                    url: URL,
                    data: {
                        'action': 'validateAndShow',
                        'value': '' + value
                    },
                    success: function (data) {
                        $('.result').html(data);
                        $("#page-preloader").fadeOut(800);
                    }
                })
            } else {
                alert('empty!');
            }
        }
        else
        {
            return false;
        }
    })



Пример селекта, после получения данных от пользователя.
<select id="cons-list">
            <option readonly=""></option>
            <option value="val1">Text1</option>
            <option value="val2">Text2</option>
        </select>


Напомню, проблема при повторной отправке.

Смотрю в сторону того, что искать значения не на
$(document).ready(function(){

})


а на
$(document).on('change', function(){

})


Прошу помощи.

ksa 29.05.2018 08:24

Syfer43, ты сам потестировать свой скрип можешь?

Посмотри, что ты там отправляешь... И отправляешь ли вообще...

Syfer43 29.05.2018 08:44

Цитата:

Сообщение от ksa (Сообщение 486193)
Syfer43, ты сам потестировать свой скрип можешь?

Посмотри, что ты там отправляешь... И отправляешь ли вообще...

Конечно могу, я пробовал вывести значения г. переменной пост на следующем этапе, так вот, первый раз то. что надо(тобиш val() того опшена, который выбрал пользователь. При повторной попытке - пусто. именно значение пусто, сама переменная есть(аякс её создаёт)).

там и алерт на этот счет стоит, если приглядеться)

ksa 29.05.2018 09:02

Цитата:

Сообщение от Syfer43
При повторной попытке - пусто

Т.е. событие срабатывает?
Значение может быть "пусто" если селектор у тебя не правильный и не находит нужный тебе элемент...

ksa 29.05.2018 09:04

Цитата:

Сообщение от Syfer43
там и алерт на этот счет стоит, если приглядеться

Если приглядеться, то он не на value заточен... :D

ksa 29.05.2018 09:06

Цитата:

Сообщение от Syfer43
var value = $('#cons-list').children('option:selected').val();

Если cons-list это ИД селекта - значение его берется проще. ;)
var value = $('#cons-list').val();

Syfer43 29.05.2018 09:36

Цитата:

Сообщение от ksa (Сообщение 486199)
Т.е. событие срабатывает?
Значение может быть "пусто" если селектор у тебя не правильный и не находит нужный тебе элемент...

Событие-то срабатывает, ибо событие - есть клик на див, импровизирующий кнопку.

Цитата:

Сообщение от ksa (Сообщение 486200)
Если приглядеться, то он не на value заточен... :D

Вообще, он заточен именно на value, но, ввиду того, что я пытался скрыть/переименовать некоторые элементы и при этом часть из них пропустил( :haha: ), получилась такая неразбериха. Я извиняюсь:-?

value = consignee


Цитата:

Сообщение от ksa (Сообщение 486201)
Если cons-list это ИД селекта - значение его берется проще. ;)
var value = $('#cons-list').val();

суть в том, что бы val() не был пустым. Если он не пустой(а там есть пустой селект с опцией readonly), див(импровизированная кнопка) имеет доп класс "disabled", и в этом случае, ведет себя как неактивная кнопка

и еще момент, первый раз значение берется верно. не срабатывает только повторно и третий раз и т.д.

laimas 29.05.2018 09:50

Цитата:

Сообщение от Syfer43
суть в том, что бы val() не был пустым

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

Syfer43 29.05.2018 10:03

Цитата:

Сообщение от laimas (Сообщение 486209)
Это никоим образом не означает, что значение списка нужно получать не как его свойство, а искать выбранную опцию. Если у списка выбрана опция с пустым значением, то и значение списка будет пустой строкой. А управлять доступностью кнопки нужно по изменению списка, при этом первую опцию можно сделать также недоступной для выбора.

Хорошо!
Сделал так. как вы предложили:
$(document).on('click', '.select-button', (function () {
        if ($(this).hasClass('enabled'))
        {
            var value = $('#cons-list').val();
            if (value != '') {
                $("#page-preloader").fadeIn(800);
                $(".dialog").dialog('close');
                jQuery.ajax({
                    type: 'POST',
                    url: URL,
                    data: {
                        'action': 'validateAndShow',
                        'value': '' + value
                    },
                    success: function (data) {
                        $('.result').html(data);
                        $("#page-preloader").fadeOut(800);
                    }
                })
            } else {
                alert('empty!');
            }
        }
        else
        {
            return false;
        }
    })


результат тот же. Первый раз данные отправляются нормально, второй раз value = ''. при этом. оба раза селект идентичный:
<select id="cons-list">
            <option readonly=""></option>
            <option value="val1">val1</option>
            <option value="val2">val2</option>
</select>

laimas 29.05.2018 10:16

$(document).on('click', '.select-button.enabled)', (function () {


И не надо проверять if ($(this).hasClass('enabled')).

В остальном либо с логикой у вас не так, либо есть ошибка. Ибо если отправляется пустое значение, то как же тогда if (value != '')? Кстати, просто if(value) ...

Syfer43 29.05.2018 10:50

Цитата:

Сообщение от laimas (Сообщение 486215)
$(document).on('click', '.select-button.enabled)', (function () {


И не надо проверять if ($(this).hasClass('enabled')).

В остальном либо с логикой у вас не так, либо есть ошибка. Ибо если отправляется пустое значение, то как же тогда if (value != '')? Кстати, просто if(value) ...

ок, принял во внимание ваши замечания, и даже решил этот аякс повесить на выбор значения селекта(т.е. отработка скрипта при выборе элемента)

сделал так:
$(document).on('change', '#cons-list', function () {
        var value = $('#cons-list').val();
        if (value ) {
            $("#page-preloader").fadeIn(800);
            $(".dialog").dialog('close');
            jQuery.ajax({
                type: 'POST',
                url: URL,
                data: {
                    'action': 'validateAndShow',
                    'value': '' + value
                },
                success: function (data) {
                    $('.result').html(data);
                    $("#page-preloader").fadeOut(800);
                }
            })
        }
    })


вывожу все на пхп:
print_r($_POST);


первый результат:
Array ( [action] => validateAndShow [value] => value)
второй:
Array ( [action] => validateAndShow [value] => )

laimas 29.05.2018 11:00

Я не знаю чего вы там делаете, поэтому не будут гадать чего у вас не так, ибо полного представления нет чего и как. Могу только заметить следующее - если получаемый список после первичного запроса заменяет предыдущий, то делегирование обработки его события по его ID, это нормально. Но если получаемый список добавляется в документ как новый список, но это уже ошибка.

Еще можно сказать, что 'value': '' + value - никчемное.

Syfer43 29.05.2018 12:35

Цитата:

Сообщение от laimas (Сообщение 486222)
Я не знаю чего вы там делаете, поэтому не будут гадать чего у вас не так, ибо полного представления нет чего и как. Могу только заметить следующее - если получаемый список после первичного запроса заменяет предыдущий, то делегирование обработки его события по его ID, это нормально. Но если получаемый список добавляется в документ как новый список, но это уже ошибка.

Еще можно сказать, что 'value': '' + value - никчемное.

[OFFTOP]
"чего" я "там" делаю - описано в теме. Не понятно что-то конкретное? уточните/спросите, постараюсь донести/объяснить/показать.

Про никчемное - не понял. если имеете ввиду то, что '' + <- вот это лишнее, ну что ж, давайте уберу, если глаза Вам режет. Давайте оставаться людьми.
[/OFFTOP]

по теме:

пресловутый проблемный "список" - он же селект, это результат вывода массива из бд со своими ид в атрибутах value. список этот выводится внутри тела тега див с ид="dialog-content", то есть, контент окна-диалога($('.dialog')). и в первый и во второй раз - это единственный тег селект с ид = "cons-list", но, в первый и во второй раз - значения там разные.

laimas 29.05.2018 13:20

Syfer43,
все что рассказано еще не дает представления о том, что творится на странице.

Не понятно почему '' + значение списка, это никчемное занятие? А зачем к значению списка добавлять пустую строку перед отправкой его на сервер?

$('body').on('change', '#cons-list', function () { - делегировать нужно ближайшему родителю
var value = $('#cons-list').val(); - это не нужно, если обработка события списка
if (this.value) { - отправление будет только в том случае, если выбрана опция с непустым значением - value="" - только так, а не так value=" " или value="0", ибо в последнем случае тогда if (+this.value)

и отправляемые данные

data: {
'action': 'validateAndShow',
'value': this.value
},


То есть у вас вообще не должно быть отправки, если пустое значение, а у вас то есть отправление! Ну так добавьте в код проверку и узнаете причину:

$('body').on('change', '#cons-list', function () {

console.log(this.value)

Syfer43 29.05.2018 14:22

Вангую, что не зря вы ругались на код, который был фекальным. переписал скрипт, разделил, использовал все наставления - работает. Спасибо!

laimas 29.05.2018 16:00

<select>
    <option selected disabled>Select...</option>
    <option value="1">AAAAA</option>
    <option value="2">BBBBB</option>
</select>


Попробуйте выбрать первую опцию. То есть событие списка будет наступать только при выборе опции со значением, а значит нет необходимости и проверять - if (this.value)

Syfer43 30.05.2018 07:43

да, спасибо! Вы очень помогли!


Часовой пояс GMT +3, время: 04:29.