X-Editable update select ajax source

Question

I have an x-editable select (called marketing_event_id) that needs to populate its options based on another select option (called how_heard_cat_id).

Both options are sourced dynamically.

When how_heard_cat_id is changed, I want to update the source options for marketing_event_id. I'm trying to use the success callback when the how_heard_cat_id is updated to change the options for the other menu. From the network tab in Chrome, I can see the URL is fired via ajax and the options are there, but the second menu always displays zero results.

Here's how they show up onscreen:

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

Here's my 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); 
                }

            });

        }
    });

Here's the dependent second menu called 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
        }
    });

Any thoughts on how to update the source when the first menu changes?

Answer 1

I think I figured it out. If anyone comes across this. When the first option is updated and in the response callback I destroy the second select x-editable and then reinstate it with the updated ajax information.

Seems to work.

 $('#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');

                }

            });

        }
    });