Returning from ajax callback ruins view

Question

Currently I am hooking into the add to cart form on my website. I added ajax to the edit quantity buttons like :

    $form_quantity[$key]['#ajax'] = [
      'callback' => 'update_cart_order',
      'disable-refocus' => FALSE,
      'wrapper' => $form_div_id,
      'event' => 'change',
      'progress' => [
        'type' => 'throbber',
        'message' => t('Updating Cart...'),
      ],
    ];

Which works lovely. I will note that $form_div_id is an id I'm wrapping the entire form in just above this.
Now I don't think I fully understand what I am supposed to return from my ajax. The view I am hooking into lists the products on one side and the order total on the other.

In my callback I (seem to) successfully update my cart quantities. But returning gets rid of the order total from this form.
I do nothing to edit the form and just return $form. All I do is update the order item.

I've looked around and think I may not understand what the ajax return really does but cannot seem to make sense of it. I just want to update my total price without refreshing the whole page.

In 'update_cart_order' I am changing the quantities and ending with this :

  $order->save();
  $order->recalculateTotalPrice();

  return $form;

This causes the total price display to disappear. After refreshing the page to get it back the quantities are properly adjusted.

Please let me know if any more information is needed. :)

Answer 1

It sounds like you have your AJAX callback working fine. But you said that the #ajax wrapper is wrapping the entire form. The elements returned from the ajax callback replace everything in the div provided as a wrapper. Since you are wrapping your whole form with the wrapper, everything inside that div (the whole form) is replaced with the elements from the ajax callback.

You'll need to be more selective with your wrapper element. Set it to only wrap the elements that should be replaced.