Рельсы 3 и Formtastic.Как отобразить поля в соответствии с выделением (ajax)? - PullRequest
Новая
       12

Рельсы 3 и Formtastic.Как отобразить поля в соответствии с выделением (ajax)?

0 голосов
/ 29 декабря 2011

Если у меня есть отгрузки, каждая отгрузка имеет один из четырех возможных режимов.Когда я хочу создать счет-фактуру, я перехожу в «Новый счет-фактура», выбираю отгрузку в меню выбора (для какой отправки предназначен счет-фактура).Если выбранный груз имеет режим A, тогда некоторые поля будут отображаться в форме;Если выбранный груз имеет режим B, то будут отображаться некоторые другие поля.

Все, что мне нужно, это то, что в форме «Новый счет-фактура», когда кто-то выбрал груз, он может легко найти режим груза (shipment.mode).

1 Ответ

0 голосов
/ 09 января 2012

Вы можете реализовать это следующим образом:

Ваш взгляд: 

<div data-shipment-mode="A" style="display:none;">
    fields that should only be shown for shipment mode A
</div>
<div data-shipment-mode="B" style="display:none;">
    fields that should only be shown for shipment mode B
</div>

Ваш JavaScript: 

$(document).ready(function() {
    $('id-of-shipment-select-menu').change(function() {
        var successHandler = function(data) {
            var mode = data.mode;
            $("div[data-shipment-mode!=" + mode + "]").hide();
            $("div[data-shipment-mode=" + mode + "]").show();
        };

        var shipmentId = $(this).val();
        /* replace service_url with the appropriate controller/action */
        $.getJSON("/service_url/" + shipmentId, successHandler);
    });
});

Изначально все поля, зависящие от режимаскрытыЗатем при выборе отправки будет вызван обратный вызов change.Он отправляет запрос в службу (действие контроллера), которая возвращает режим для данной отправки.И вы используете этот режим и показываете только тем элементам div, что их data-shipment-mode имеет одинаковое значение.

Вы можете даже развернуть это, и когда вы скрываете div, вы можете очистить значения всех входов (ивыбирает и т. д.) внутри него, а также отключает их.

Вы можете избежать отправки запроса на сервер, если встраиваете режим для каждой отправки в ее тег тега:

Просмотр:

<option id="A_SHIPMENT_ID" 
        data-shipment-mode="SHIPMENT_MODE_FOR_THIS_SHIPMENT">
        Shipment A
</option>

JavaScript: 

$(document).ready(function() {
    $('id-of-shipment-select-menu').change(function(e) {
        var mode = $(e.target).data("shipment-mode");
        $("div[data-shipment-mode!=" + mode + "]").hide();
        $("div[data-shipment-mode=" + mode + "]").show();
    });
});
...