[英]how to reload a div in jQuery
I have a div in which I have used submit button
as follow : 我有一个div,其中我使用了submit button
,如下所示:
<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 : 在这种情况下,当我单击按钮sendmail3
将触发一个jquery,如下所示:
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 collapse3
,如下所示:
<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 在此div中动态加载数据
What I want is that when I click on sendmail3
button then only the div collapse3
should be reloaded. 我想要的是,当我单击sendmail3
按钮时,只有div collapse3
应该重新加载。 How can I reload this div only without refreshing the page 我如何仅在不刷新页面的情况下重新加载此div
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. 希望这行得通。
You can use the load() method: 您可以使用load()方法:
Load data from the server and place the returned HTML into the matched element. 从服务器加载数据,并将返回的HTML放入匹配的元素。
$('.myDiv').load('urlToGetUpdatedContent');
A very clean way with built-in jQuery logic. 内置jQuery逻辑的一种非常简洁的方法。 See full documentation: http://api.jquery.com/load/ 查看完整的文档: http : //api.jquery.com/load/
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 . 这个想法是在特定的div中获取您的页面,就像您通过ajax调用在问题中提到的内容一样,然后将数据返回到相同的div中。
for example : 例如 :
$("#sendmail3").click(function(){ var getdata= $("#collapse3").html(); ...
then make ajax call and put in the : 然后打电话给ajax并放入:
success: function(whatever-result) { $("#collapse3").html(getdata);...
that will only refresh the div with id 只会刷新ID为的div
UPDATE 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 : 我认为您希望通过上述div发送表单,然后重新加载div以再次显示表单,这是另一种解决方案:
$("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 . 然后,您可以使用JavaScript,JQuery或AJAX调用,可以通过上述代码进行操作,以使表单按原样进入div。 At the beginning of this answer i used to suggest to get the $("div").html();
在此答案的开头,我曾经建议获得$("div").html();
and put it as var getdata to be easy to put again into div.html after submission. 并将其作为var getdata提交, 以便在提交后再次轻松放入div.html中 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.