Question

我有一个x-editable select（称为marketing_event_id），需要根据另一个选择选项（称为how_heard_cat_id）填充其选项。

这两个选项都是动态采购的。

当更改how_heard_cat_id时，我想更新marketing_event_id的源选项。当更新how_heard_cat_id以更改其他菜单的选项时，我尝试使用成功回调。在Chrome的网络标签中，我可以看到通过ajax触发了URL，并且选项在那里，但第二个菜单始终显示零结果。

以下是它们在屏幕上显示的方式：

 <li>
   <strong>Referral Source:</strong>
   <a href="#" id="how_heard_cat_id" class="edit_me" data-type="select" data-value="<?php echo $invoice->data()->how_heard_cat_id; ?>" data-placement="right" data-original-title="Please enter the invoice referral source."></a>
 </li>
 <li>
   <strong>Promotion Code:</strong> <a href="#" id="marketing_event_id" class="edit_me" data-value="<?php echo $invoice->data()->marketing_event_id; ?>" data-placement="right" data-original-title="Please enter the invoice promotion code." data-type="select2"><?php echo $invoice->data()->promo_code; ?></a>
 </li>

这是我的how_heard_cat_id：

     $('#how_heard_cat_id').editable({
        emptytext: ".....",
        prepend: "",
        source: "ajax_get_json.php?what=howheard",
        pk: <?php echo $invoice_id; ?>,
        url: "ajax_xeditable_update.php?table=invoices",
        success: function (response, newValue) {

            //get the promo codes for the select2 box for xeditable. 
            var promo_codes_updated = [];
            $.ajax({
              dataType: "json",
              url: "ajax_get_json.php?what=location_promo_codes_by_type",
              data: { type_id: newValue },
              success: function (data) {
                    $.each(data, function (index) {
                        promo_codes_updated.push({
                            id: data[index].value,
                            text: data[index].text
                        });
                    });

                    $('#marketing_event_id').editable('option', 'source', promo_codes_updated); 
                }

            });

        }
    });

这是名为marketing_event_id的从属第二个菜单：

    //get the promo codes for the select2 box for xeditable. 
    var promo_codes = [];

    $.getJSON('ajax_get_json.php?what=location_promo_codes_by_type', {
        type_id: $('#how_heard_cat_id').attr('data-value')
     }, 
              function (data) {

        $.each(data, function (index) {
            promo_codes.push({
                id: data[index].value,
                text: data[index].text
            });
        });

    });


    $('#marketing_event_id').editable({
        emptytext: ".....",
        pk: <?php echo $invoice_id; ?>,
        url: "ajax_xeditable_update.php?table=invoices",
        source: promo_codes,
        select2: {
            width: 200,
            placeholder: 'Select promotion code...',
            allowClear: true
        }
    });

有关第一个菜单更改时如何更新源的任何想法？

Answer 1

我想我明白了。如果有人遇到这个。当更新第一个选项并在响应回调中，我销毁第二个选择x-editable，然后使用更新的ajax信息恢复它。

似乎工作。

 $('#how_heard_cat_id').editable({
        emptytext: ".....",
        prepend: "",
        source: "ajax_get_json.php?what=howheard",
        pk: <?php echo $invoice_id; ?>,
        url: "ajax_xeditable_update.php?table=invoices",
        success: function (response, newValue) {

            //get the promo codes for the select2 box for xeditable. 
            var promo_codes_updated = [];
            $.ajax({
              dataType: "json",
              url: "ajax_get_json.php?what=location_promo_codes_by_type",
              data: { type_id: newValue },
              success: function (data_updated) {

                    $.each(data_updated, function (index) {
                        promo_codes_updated.push({
                            id: data_updated[index].value,
                            text: data_updated[index].text
                        });
                    });
                    $('#marketing_event_id').editable("destroy");

                    $('#marketing_event_id').editable({
                        emptytext: ".....",
                        pk: <?php echo $invoice_id; ?>,
                        url: "ajax_xeditable_update.php?table=invoices",
                        source: promo_codes_updated,
                        select2: {
                            width: 200,
                            placeholder: 'Select promotion code...',
                            allowClear: true
                        }
                    });

                    $('#marketing_event_id').editable('toggleDisabled');

                }

            });

        }
    });

X-Editable更新选择ajax源

1 个答案: