I have a problem with retrieve data from Ajax. I want to add button "X" to close popup after show data.
I tried to add a button like:
jQuery(".popup").append('<button style="font-size: 150%; color: red; top: 0; right: 0;">x</button>');
in to popup to the user can close my popup.
My code like:
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();
}
My CSS code:
.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;
}
In your beforeSend
event you are appending the html which is fine. But it gets replaced in success event. in this line the issue is
jQuery(".popup").html(data.data);
But instead of you just append data.data here also which will fix the issue. like this
jQuery(".popup").append(data.data);
For your question in comment, still you can use beforeSend event. Like this
beforeSend:function(){
// after your codes
jQuery(".popup").append("<img src='loading.gif' class='loading'>");
}
success:function(){
// after your codes
jQuery(".popup").find('.loading').remove();
}
You can tweak the appearance of the images using css. But I shared an idea for how to achieve that
You can add your close button
html in success.
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();
}
The close button is being overwritten by jQuery(".popup").html(data.data);
because you are replacing everything inside of .popup
.
I have some of your code in the snippet below using .append instead of .html and your button appears and it works.
I would just put a placeholder in the popup that houses the loading gif and replace that div's html with the data.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.