Reputation: 4557
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
Upvotes: 2
Views: 2660
Reputation: 4302
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.
Upvotes: 1
Reputation: 5796
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/
Upvotes: 2
Reputation: 3407
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.
Upvotes: 2