重新开放的fancybox引起我的自定义的Ajax函数来调用多次我的、自定义、函数、fancybox
我使用的输入域和内部的fancybox列表，以搜索和获取客户，有2个自定义的Ajax功能。
一切正常，但是当重新打开相同的fancybox，我的Ajax功能将被触发多次。
1日AJAX功能： searchClient（），获取客户的新列表
第二AJAX功能： selectClient（），获取客户信息，并关闭
在的fancybox
有没有一种方法可以重设的fancybox，而不是重新开启？ 或者，我需要重新考虑我的功能结构？如果是这样，怎么样？
更新：我只是需要重置我的fancybox的内容，首先分配内容，当DOM加载的变量，并把这个变量的内容早在DOM的fancybox关闭时。这将允许的fancybox再次打开相同的内容，并再次，没有所有的更改。
幸得Nick汤姆林。
修正：
// DOM的准备
VAR弹出= $（'＃弹出-接触）HTML（）。
//的fancybox
$ .fancybox.open（{
HREF：＃弹出-接触，
填充：0，
autoWidth：真正的，
箭：假的，
closeBtn：假的，
scrollOutside：真正的，
助手：{
覆盖： {
CSS：{
'背景'：'RGBA（0，0，0，0.5）'
}，
锁定：假的
}
}，
afterShow：函数（）{
selectClient（）;
searchClient（）;
}，
afterClose：函数（）{
$（'＃弹出-接触）HTML（弹出）; //重置弹出内容
}
}）;
原来的code：
函数searchClient（）{
$（'。弹出.search）。KEYUP（函数（K）{
如果（（k.key code取代; = 48＆安培;＆安培; k.key code＆LT; = 90）||（k.key code取代; = 96＆安培;＆安培; k。关键code＆LT; = 105）|| k.key code == 8 || k.key code == 46 || k.key code == 109 ||ķ。关键code == 189）
{
VAR搜索= $ .trim（$（本）.VAL（））;
VAR dataString ='阿贾克斯=真放，行动= searchClient和放大器;搜索='+ EN codeURIComponent（搜索）;
$阿贾克斯（{
键入：POST，
网址：$（本）.attr（'相对'），
缓存：假的，
数据：dataString，
数据类型：JSON，
成功：函数（响应）{
如果（response.status =='比赛'）{
（'的弹出联系人）。$找到（UL）HTML（response.clients）。
selectClient（）;
}
如果（response.status =='错误'）{
$（'弹出窗口的联系人）找到（UL）HTML。（'＆LT;李＆GT;+ response.message +'＆LT; /李＆GT;'）;
}
}，
错误：函数（）{
}
}）;
}
}）;
}
功能selectClient（）{
$（'。弹出UL李）。点击（函数（）{
VAR contactNumber = $（本）.attr（'相对'）;
VAR dataString ='阿贾克斯=真放，行动= selectClient和放大器; contactNumber ='+ contactNumber;
$阿贾克斯（{
键入：POST，
网址：$（本）.parent（）ATTR（'相对'），
缓存：假的，
数据：dataString，
数据类型：JSON，
成功：函数（响应）{
如果（response.status =='成功'）{
$（'textarea的[名称=infoTo]）专注（）VAL（response.clientInfo）。
$ .fancybox.close（）;
}
如果（response.status =='错误'）{
}
}，
错误：函数（）{
}
}）;
}）;
}
//打开的fancybox
$（'textarea的[名称=infoTo]）。重点（函数（）{
如果（$ .trim（$（本）.VAL（））==''）
{
$ .fancybox.open（{
HREF：＃弹出-接触，
填充：0，
autoWidth：真正的，
箭：假的，
closeBtn：假的，
scrollOutside：真正的，
助手：{
覆盖： {
CSS：{
'背景'：'RGBA（0，0，0，0.5）'
}，
锁定：假的
}
}，
afterShow：函数（）{
selectClient（）;
searchClient（）;
}
}）;
}
}）;
解决方案
解决方案：我只是需要重置我的fancybox的内容，首先分配内容，当DOM加载的变量，并把这个变量的内容返回在DOM时的fancybox关闭。这将允许的fancybox再次打开相同的内容，并再次，没有所有的更改。
幸得Nick汤姆林。
修正：
// DOM的准备
VAR弹出= $（'＃弹出-接触）HTML（）。
//的fancybox
$ .fancybox.open（{
HREF：＃弹出-接触，
填充：0，
autoWidth：真正的，
箭：假的，
closeBtn：假的，
scrollOutside：真正的，
助手：{
覆盖： {
CSS：{
'背景'：'RGBA（0，0，0，0.5）'
}，
锁定：假的
}
}，
afterShow：函数（）{
selectClient（）;
searchClient（）;
}，
afterClose：函数（）{
$（'＃弹出-接触）HTML（弹出）; //重置弹出内容
}
}）;
I'm using an input field and a list inside Fancybox to search and fetch clients, with 2 custom Ajax functions.
Everything works, but when re-opening the same Fancybox, my Ajax functions will get triggered multiple times.
1st ajax function: searchClient(), retrieves new list of clients
2nd ajax function: selectClient(), fetches client info and closes
the Fancybox
Is there a way to reset the fancybox, rather than re-opening? Or do I need to re-think my function structure? If so, how?
UPDATE: I just needed to reset my Fancybox content, by first assigning the content to a variable when the dom is loaded, and put the content of this variable back in the dom when Fancybox closes. This will allow the Fancybox to open the same content again, and again, without all the changes.
Credit goes to Nick Tomlin.
Fix:
// on DOM ready
var popup = $('#popup-contacts').html();
// Fancybox
$.fancybox.open({
href: '#popup-contacts',
padding: 0,
autoWidth: true,
arrows: false,
closeBtn: false,
scrollOutside: true,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.5)'
},
locked: false
}
},
afterShow: function() {
selectClient();
searchClient();
},
afterClose: function() {
$('#popup-contacts').html(popup); // Reset popup content
}
});
Original Code:
function searchClient() {
$('.popup .search').keyup(function(k) {
if ((k.keyCode >= 48 && k.keyCode <= 90) || (k.keyCode >= 96 && k.keyCode <= 105) || k.keyCode == 8 || k.keyCode == 46 || k.keyCode == 109 || k.keyCode == 189)
{
var search = $.trim($(this).val());
var dataString = 'ajax=true&action=searchClient&search='+encodeURIComponent(search);
$.ajax({
type: 'POST',
url: $(this).attr('rel'),
cache: false,
data: dataString,
dataType: 'json',
success: function(response) {
if (response.status == 'match') {
$('.popup-contacts').find('ul').html(response.clients);
selectClient();
}
if (response.status == 'error') {
$('.popup-contacts').find('ul').html('<li>'+response.message+'</li>');
}
},
error: function() {
}
});
}
});
}
function selectClient() {
$('.popup ul li').click(function() {
var contactNumber = $(this).attr('rel');
var dataString = 'ajax=true&action=selectClient&contactNumber='+contactNumber;
$.ajax({
type: 'POST',
url: $(this).parent().attr('rel'),
cache: false,
data: dataString,
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('textarea[name="infoTo"]').focus().val(response.clientInfo);
$.fancybox.close();
}
if (response.status == 'error') {
}
},
error: function() {
}
});
});
}
// Open Fancybox
$('textarea[name="infoTo"]').focus(function() {
if ($.trim($(this).val()) == '')
{
$.fancybox.open({
href: '#popup-contacts',
padding: 0,
autoWidth: true,
arrows: false,
closeBtn: false,
scrollOutside: true,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.5)'
},
locked: false
}
},
afterShow: function() {
selectClient();
searchClient();
}
});
}
});
解决方案
Solution: I just needed to reset my Fancybox content, by first assigning the content to a variable when the dom is loaded, and put the content of this variable back in the dom when Fancybox closes. This will allow the Fancybox to open the same content again, and again, without all the changes.
Credit goes to Nick Tomlin.
Fix:
// on DOM ready
var popup = $('#popup-contacts').html();
// Fancybox
$.fancybox.open({
href: '#popup-contacts',
padding: 0,
autoWidth: true,
arrows: false,
closeBtn: false,
scrollOutside: true,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.5)'
},
locked: false
}
},
afterShow: function() {
selectClient();
searchClient();
},
afterClose: function() {
$('#popup-contacts').html(popup); // Reset popup content
}
});
