#Ajax change the input wrapper

Question

i've made a form which update the price of a product. The user just need to select a duration by a select-list and it update the price by an Ajax callback. It update well the price but it change the structure of my select and then the select when is changed again does nothing...

The form inputs :

$key = array('field_friterie_suggest', 'MY-PRODUCT-SKU');

$form['content']['deals'][$key[0]]['purchase']['value'] = array(
            '#type' => 'select',
            '#name' => 'update-price-'.$key[0],
            '#options' => array(               
                5 => t('- None -'),
                0 => t('1 month'),
                1 => t('3 month'),
                2 => t('6 month'),
                3 => t('1 year'),
            ),
            '#default_value' => $default_purchase_value,
            '#ajax' => array(
                'callback' => 'fritr_commerce_update_pricing_callback',
                'wrapper' => 'pricing-'.$key[0],                
            ),
            '#attributes' => array(
                'data-update' => array(
                    'pricing-'.$key[0],  
                ),
                'data-type' => array(
                    $key[1],  
                ),
            ),
        );        
        $form['content']['deals'][$key[0]]['purchase']['pricing'] = array (
            '#prefix' => '<div class="pricing" id="pricing-'.$key[0].'">',
            '#suffix' => '$</div>',
            '#markup' => 0,
        ); 

And my callback :

$month = $form_state['triggering_element']['#value'];
    $price = 0;
    if ($mont != 5) {
        $month_definition = array(1,3,6,12);
        // get the product by his SKU
        $product = commerce_product_load_by_sku($form_state['triggering_element']['#attributes']['data-type'][0]);        
        // get the product price and reduction
        $product_base_price = ($product->commerce_price[LANGUAGE_NONE][0]['amount'] / 100) * $month_definition[$month];
        $reduction = $product->field_commerce_reductions[LANGUAGE_NONE][$month]['value'];        
        // set the new price
        $price = $product_base_price - ($product_base_price * ($reduction/100));                    
    }
    return array (
        '#prefix' => '<div class="pricing" id="'.$form_state['triggering_element']['#attributes']['data-update'][0].'">',
        '#suffix' => '€</div>',
        '#markup' => $price,
    );

So my input become :

<select data-update="pricing-field_friterie_suggest" data-type="MY-PRODUCT-SKU" class="form-control form-select ajax-processed" id="edit-content-deals-field-friterie-suggest-purchase-value" name="update-price-field_friterie_suggest"></select>

to :

<div class="form-item form-item-update-price-field-friterie-suggest form-type-select form-group">
    <div class="input-group">
        <select data-update="pricing-field_friterie_suggest" data-type="MISE-EN-AVANT-SITE" class="form-control form-select ajax-processed" id="edit-content-deals-field-friterie-suggest-purchase-value" name="update-price-field_friterie_suggest"></select>
        <span class="input-group-addon"></span>
    </div>
</div>

Then when i change the value of the select, it does nothing. Can you help me please ?

Answer 1

The solution proposed by Jaypan works well. The solution was to not put the modifications of my field in the callback but in the form definition and set the value here by checking the $form_state fields.