Ajax response conflicting 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>

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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

edited May 23 '17 at 10:33

Community

1
1

answered Jun 18 '16 at 11:47

iyyappan

767
4
11

And for the body i will write same like if(!data){$('#ajaxResult .modal-body').append(data);} – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 11:55
From ajax response, i am receiving ID of product to which against i am calling two functions in my header and body, Now how will i split them into their corresponding portions? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 11:56
if you are getting prodcut id means,split it first.after the apply into it. – iyyappan Jun 18 '16 at 12:00
What is the method to split them ? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:01
example: var pn=data.productid;append to header($(selector for header).append(pn);) and then var pd=data.description.append to body($(selector for body).append(pd);) – iyyappan Jun 18 '16 at 12:03
which type of data format you getting?json or else? – iyyappan Jun 18 '16 at 12:04
I am trying to follow your logic. In my case, i am receiving ID, so should i split it like this? var pn=data.ID;append to header($(selector for header).append(pn);)? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:05
if your data coming json object data format.you may split like this – iyyappan Jun 18 '16 at 12:07
refer this links: http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript – iyyappan Jun 18 '16 at 12:08
return the values in different variable in php and get the result via ajax from php function 1) $cart_class->cart_head_info_print(); 2) $cart_class->cart_body_info_print(); – iyyappan Jun 18 '16 at 12:12
use those variable which will be coming via ajax. – iyyappan Jun 18 '16 at 12:13
And append into body and header selectors..thats simple – iyyappan Jun 18 '16 at 12:13
mean to say that i should grab the ID coming from ajax in two seperate php variables? Is that you are saying ? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:15
after grab value in two separate variables, next how would i update ajax and html part? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:20
please refer it.http://stackoverflow.com/questions/13212882/how-to-return-php-variables-on-success-ajax-jquery-post – iyyappan Jun 18 '16 at 12:22
Sample of your requirement.Use this one. – iyyappan Jun 18 '16 at 12:23
Hey! my header and body displaying contents based on same ID. By splitting same ID into two php variables and further working based on your suggested solution would be feasible? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:27
And yes, i am getting ID in the form of variable like $id. Now how to split it into two different variables? – bc110402307 Syed Zeeshan Haide Jun 18 '16 at 12:30

Ajax response conflicting css

1 Answers1