2013-11-22 63 views
1

我有一个JavaScript弹出窗口,可以正常工作10次,并在其后停止显示。意思是当我点击名称链接时,它显示正常。第二次工作正常。第十一次尝试失败时弹出。它没有出现。如果我刷新页面并再次单击,它会显示罚款10次。这似乎是一些缓存问题。点击10次后,JavaScript弹出窗口无法显示

function toggle(div_id) { 
    var el = document.getElementById(div_id); 
    if (el.style.display == 'none') { el.style.display = 'block';} 
    else {el.style.display = 'none';} 
} 
function blanket_size(popUpDivVar) { 
    if (typeof window.innerWidth != 'undefined') { 
     viewportheight = window.innerHeight; 
    } else { 
     viewportheight = document.documentElement.clientHeight; 
    } 
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { 
     blanket_height = viewportheight; 
    } else { 
     if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { 
      blanket_height = document.body.parentNode.clientHeight; 
     } else { 
      blanket_height = document.body.parentNode.scrollHeight; 
     } 
    } 
    var blanket = document.getElementById('blanket'); 
    blanket.style.height = blanket_height + 'px'; 
    var popUpDiv = document.getElementById(popUpDivVar); 
    popUpDiv_height=blanket_height/2-200;//100 is half popup's height 
    popUpDiv.style.top = popUpDiv_height + 'px'; 
} 
function window_pos(popUpDivVar) { 
    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerHeight; 
    } else { 
     viewportwidth = document.documentElement.clientHeight; 
    } 
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { 
     window_width = viewportwidth; 
    } else { 
     if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { 
      window_width = document.body.parentNode.clientWidth; 
     } else { 
      window_width = document.body.parentNode.scrollWidth; 
     } 
    } 
    var popUpDiv = document.getElementById(popUpDivVar); 
    window_width=window_width/2-250;//250 is half popup's width 
    popUpDiv.style.left = window_width + 'px'; 
} 
function popup(windowname) { 
    blanket_size(windowname); 
    window_pos(windowname); 
    toggle('blanket'); 
    toggle(windowname); 
} 
function doAjaxGet(alertId) { 
    $.ajax({ 
      type : "GET", 
      url : "alerts/alertNotification.htm", 
      dataType : 'json', 
      data : "alertId=" + alertId, 
      success : function(response) { 
      $("#popUpDiv").remove(); 
      $("#popUpDiv").append("<table>"); 
      $("#popUpDiv").append("<tr><th>ID</th><th>Event Type</th><th>Process Name</th><th>Status</th><th>Notification Sent</th><th>Text</th></tr>"); 
      $("#popUpDiv").append("<tr><td>" + response.alertId + "</td><td>" + response.eventTypeName + "</td><td>" + response.processName + "</td><td>" + response.status + "</td><td>" + response.notificationSent + "</td><td>" + response.comments + "</td></tr>"); 
      $("#popUpDiv").append("</table>"); 
      popup('popUpDiv'); 

    }, 
    error : function(e) { 
     alert('Error: ' + e); 
    } 
}); 
} 

$(document).ready(function() { 
     // Bind click event to a link 

     // Cancel the mouseup event in the popup 
     $("#popUpDiv").mouseup(function() { 
     return false; 
     }); 
     // Bind mouseup event to all the document 
     $(document).mouseup(function(e) { 
     // Check if the click is outside the popup 
     if($(e.target).parents("#popUpDiv").length==0 && !$(e.target).is("#popUpDiv")) { 
      // Hide the popup 
      $("#popUpDiv").slideUp("fast"); 
      $("#blanket").slideUp("fast"); 
     } 
     }); 
}); 

我的HTML是:

<td align="center"><input type="hidden" id="alertName" name="alertName${count}" value="${alert.alertName}" /> 

<label><a onclick="doAjaxGet(${alert.id})" href="#"><c:out value="${alert.alertName}"></c:out></a></label> 

<div style="display: none;" id="blanket"></div> 
<div style="display: none; background: none;" id="popUpDiv"></div> 
</td> 
+0

html中的alertName $ {count}是什么? – P5Coder

+0

$ {count}是行号。我有一个for循环,根据列表中的项目显示行。为了使每个输入的名称都是唯一的,我使用“alertName”添加了$ {count}。 –

回答

0

的问题是与$("#popUpDiv").remove();doAjaxGet方法。它完全删除了div,并且blanket_size(popUpDivVar)将div取为null。我用$("#popUpDiv").empty();代替,它工作正常。