how to reload a div in jQuery

Question

I have a div in which I have used submit button as follow :

<div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        <div class="logininput">
        <?php do_action( 'woocommerce_checkout_billing' ); ?>
        <button id="sendmail3" class="btn btn-info">Submit</button>
        </div>
        </div>
      </div>

in this when I click on button sendmail3 then a jquery is triggered as follow :

jQuery("#sendmail3").click(function(){
            var country = jQuery("#billing_country").val();
            var address = jQuery("#billing_address_1").val();
            var city = jQuery("#billing_city").val();
            var state = jQuery("#billing_state").val();
            //alert(state);
            var pincode = jQuery("#billing_postcode").val();

            var SecondData = "country="+country+"&address="+address+"&city="+city+"&state="+state+"&pincode="+pincode;
            var currenturl = jQuery(location).attr('href');
            var url = currenturl;
            jQuery.ajax({
                dataType : 'html',
                type: 'GET',
                url : url,
                data : SecondData,
                complete : function() { },
                success: function(data) 
                    {
                        jQuery("#collapse2").hide();
                        jQuery("#collapse3").show();
                    }
            });
          });

I have one more div collapse3 as follow :

<div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
            <form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( $get_checkout_url ); ?>" enctype="multipart/form-data">
            <div id="hideform">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
            </div>
            <h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>

                <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

                <div id="order_review" class="woocommerce-checkout-review-order">
                    <?php do_action( 'woocommerce_checkout_order_review' ); ?>
                </div>

                <?php do_action( 'woocommerce_checkout_after_order_review' ); ?></div>
                </form>
                <?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
      </div>

In this div data is loaded dynamically

What I want is that when I click on sendmail3 button then only the div collapse3 should be reloaded. How can I reload this div only without refreshing the page

Answer 1

I think this will work.

    success: function(data) 
                {
                    jQuery("#collapse2").hide();
                    jQuery("#collapse3").append(data); //I change this to .append() or try .html(data);


                }

Hope this works.

Answer 2

You can use the load() method:

Load data from the server and place the returned HTML into the matched element.

$('.myDiv').load('urlToGetUpdatedContent');

A very clean way with built-in jQuery logic. See full documentation: http://api.jquery.com/load/

Answer 3

The idea is to fetch your page in specific div , like what you mentioned in your question by ajax call and then return the data to same div .

for example :

$("#sendmail3").click(function(){ var getdata= $("#collapse3").html(); ...

then make ajax call and put in the :

success: function(whatever-result) { $("#collapse3").html(getdata);...

that will only refresh the div with id

UPDATE

I think you are looking to send your form through this mentioned div then reload the div to show the form again , here is another solution :

$("yourform").submit(function(event){
  var target =$(this).attr('action');
  event.preventDefault();
   $.post( target, $(this).serialize(), function(data){
     $("#supposed-div").html(data);// this will force submitting this form only through this div 
             });
      });

Then you can use JavaScript , JQuery or AJAX call ,it could be through the above code ,to let form come into div as it is . At the beginning of this answer i used to suggest to get the $("div").html(); and put it as var getdata to be easy to put again into div.html after submission.