[英]How to retrieve data from a jquery ajax response that is a list of maps?
[英]jQuery - How to add button close after retrieve data from Ajax?
我從Ajax檢索數據時遇到問題。 我想添加按鈕“ X”以關閉顯示數據后的彈出窗口。
我試圖添加一個像這樣的按鈕:
jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
在彈出窗口中,用戶可以關閉我的彈出窗口。
我的代碼如下:
function getData(domain){
var dataString = "domain=" + domain + "&security="+ mhdomain.security + "&action=getdomain" ;
jQuery.ajax({
action: "getDomain",
type: "post",
url: mhdomain.ajaxurl,
dataType: "json",
data: dataString,
beforeSend: function(xhr){
jQuery("#wrapper").append('<div class="popup" onclick="popupout(\'.popup\')"></div>');
jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />");
jQuery(".popup").fadeIn();
jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
},
success : function(data){
jQuery(".popup").html(data.data);
},
});
};
function popupout(popup){
jQuery(popup).fadeOut(1000);
jQuery(popup).remove();
}
我的CSS代碼:
.popup {
position: fixed;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
max-width: 780px;
width: 100%;
max-height: 480px;
height: 100%;
display: inline-block;
cursor: pointer;
background-color: white;
padding: 30px 50px;
color: black;
overflow-y: scroll;
border: 1px solid #f2f2f2;
}
在您的beforeSend
事件中,您可以附加html。 但是在成功事件中它將被替換。 在這一行中,問題是
jQuery(".popup").html(data.data);
但是,除了在這里追加data.data之外,還可以解決此問題。 像這樣
jQuery(".popup").append(data.data);
對於您的評論問題,您仍然可以使用beforeSend事件。 像這樣
beforeSend:function(){
// after your codes
jQuery(".popup").append("<img src='loading.gif' class='loading'>");
}
success:function(){
// after your codes
jQuery(".popup").find('.loading').remove();
}
您可以使用CSS調整圖像的外觀。 但是我分享了如何實現這一目標的想法
您可以成功添加close button
html。
function getData(domain){
var dataString = "domain=" + domain + "&security="+ mhdomain.security + "&action=getdomain" ;
jQuery.ajax({
action: "getDomain",
type: "post",
url: mhdomain.ajaxurl,
dataType: "json",
data: dataString,
beforeSend: function(xhr){
jQuery("#wrapper").append('<div class="popup" onclick="popupout(\'.popup\')"></div>');
jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />");
jQuery(".popup").fadeIn();
jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
},
success : function(data){
jQuery(".popup").html('<div class="popup" onclick="popupout(\'.popup\')"></div>'+data.data);
},
});
};
function popupout(popup){
jQuery(popup).fadeOut(1000);
jQuery(popup).remove();
}
jQuery(".popup").html(data.data);
覆蓋了關閉按鈕jQuery(".popup").html(data.data);
因為您要替換.popup
內的.popup
。
我在下面的代碼段中使用.append而不是.html編寫了一些代碼,並且您的按鈕出現了並且可以正常工作。
我只是在容納加載gif的彈出窗口中放置一個占位符,然后用數據替換該div的html。
function getData(){ jQuery("#wrapper").append('<div class="popup" onclick="popupout(\\'.popup\\')"></div>'); jQuery(".popup").append("<img src='https://i.imgur.com/CH8XnNt.gif' alt='loading' />"); jQuery(".popup").fadeIn(); jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>'); jQuery(".popup").append('popup data'); }; function popupout(popup){ jQuery(popup).fadeOut(1000); jQuery(popup).remove(); } getData();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper" ></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.