Ajax响应冲突CSS

Question

I am displaying two functions in Modal head and Modal body using ajax. Before sending ajax request the modal looks like this

After ajax response the modal looks like this

Where is the issue?

Cart.php

include('includes/Cart_code.php');

    <?php

    if (isset($_POST['ID'])) {
        $cart_class = new cart_class($_POST['ID']);
        $cart_class->cart_head_info_print();
        $cart_class->cart_body_info_print();
        exit();
       }
    ?>

<script type="text/javascript">

    $(document).ready(function(){
            $.ajax({
                type: "POST",
                url: "Cart.php",
                data: {"ID":id},
                success: function(result){
                    $('#ajaxResult').html(result);

                }
            });
        });
</script>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
          <img src="" class="showPic">
            <div id="ajaxResult">
            <div class="modal-header" style="padding:35px 50px;">

              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <!---HERE HEADER DATA WILL BE DISPLAY---->

            </div>
            <div class="modal-body" style="padding:40px 50px;">
                <!---HERE BODY DATA WILL BE DISPLAY---->
            </div>
           </div>
        </div>
      </div> 
    </div>

Answer 1

Please the take product name from ajax response and append to the header part like below,

success:function(data){

   if(!data){$('#ajaxResult .modal-header').append(data);}    

}

as the same append into corresponding div for description and all.

REF: How to return PHP variables on success AJAX/jQuery POST

Hope you will found the answer here.!!