dtio35880438
2015-08-24 02:30
浏览 1.7k

如何在jQuery中重新加载div

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douqiang7976 2015-08-24 02:33
    已采纳

    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.

    已采纳该答案
    打赏 评论
  • duanbushi1867 2015-08-24 02:53

    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.

    打赏 评论
  • dtjxhf595733 2015-08-24 04:19

    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/

    打赏 评论

相关推荐 更多相似问题