I am using the jQuery popup overlay (http://ift.tt/1qIfnfS) for popup windows that are triggered when clicking divs on an html page. Everything works great if I just run my JavaScript code a single time, but when I call the function using setInterval() for a 1 second refresh, the page loads perfectly the first time, but the second time around my popup window content gets added into a second div, totally separate from where the content was added the first time and it is visible on the page instead of being hidden like it is on the 1st run.
Here is the full code for the page:
<!DOCTYPE html>
<!--[if IE 8]>
<html class="ie ie8">
<![endif]-->
<!--[if IE 9]>
<html class="ie ie9">
<![endif]-->
<!--[if gt IE 9]>
<!-->
<html>
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='stylesheet' id='googlefonts-css' href='css1.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='css2.css' type='text/css' media='all' />
<link rel='stylesheet' id='main-css' href='css3.css' type='text/css' media='all' />
<link rel='stylesheet' id='responsive-css' href='css4.css' type='text/css' media='all' />
<title>Text goes here</title>
<script src="http://ift.tt/Qr2aCe"></script>
<script src="http://ift.tt/VMXvD3"></script>
<script>
$(document).ready(function () {
setInterval("ajaxd()", 1000);
});
function ajaxd() {
"use strict";
$.ajax({
type: "GET",
url: "output.xml",
dataType: "xml",
cache: false,
success: xmlParser
});
};
function xmlParser(xml) {
"use strict";
$(".main2").empty();
$(".my_popup").empty();
//$(".main").html(''); //blank out appended info on each load
$('#load').hide();
var count = 1;
$(xml).find("proc").each(function () {
//var ip = $(this).find("ip").text();
var hdBlackGain = $(this).find("hdBlackGain").text();
var hdLumaGain = $(this).find("hdLumaGain").text();
var hdChromaGain = $(this).find("hdChromaGain").text();
var hdHue = $(this).find("hdHue").text();
var machineName = $(this).find("machineName").text();
if (hdBlackGain === '0' && hdLumaGain === '0' && hdChromaGain === '0' && hdHue === '0') {
} else {
$(".main2").append('<div class="proc"><div class="title"><div class="my_popup' + count + '_open">' + machineName + '</div></div></div><div class="my_popup" id="my_popup' + count + '"><li>Source: ' + machineName + '</li><li>Black Gain: ' + hdBlackGain + '</li><li>Luma Gain: ' + hdLumaGain + '</li><li>Chroma Gain: ' + hdChromaGain + '</li><li>Hue: ' + hdHue + '</li><br><button class="my_popup' + count + '_close">Close</button></div>');
$(".proc").show();
$('#my_popup' + count).popup({
color: 'black',
opacity: 1,
transition: '0.3s',
scrolllock: true
});
count = count + 1;
}
});
}
</script>
<style>
.main2{
width:1150px;
margin:0 auto;
height:130px;
}
.proc{
width:208px;
float:left;
margin:10px;
border:1px #dedede solid;
padding:5px;
display:none;
background-color:#A0492E;
}
.title{
text-align:center;
color:#ffffff;
}
.description{font-size:11px;}
.date{font-size:10px; color:#999; margin-top:4px;}
.loader{
height:11px;
}
.my_popup {
transform: scale(0.8);
font-size:20px;
}
.popup_visible .mypopup{
transform: scale(1);
}
</style>
</head>
<body class="boxed home-3">
<div class="wrap">
<!-- Header Start -->
<header id="header">
<!-- Main Header Start -->
<div class="main-header">
<div class="container">
<!-- TopNav Start -->
<div class="topnav navbar-header">
<a class="navbar-toggle down-button" data-toggle="collapse" data-target=".slidedown"> <i class="fa fa-angle-down icon-current"></i>
</a>
</div>
<!-- TopNav End -->
<!-- Logo Start -->
<div class="logo pull-left">
<h1>
<a href="http://bcceng">
<img src="logo.png" alt="Text goes here" width="222" height="32" style="vertical-align: baseline !important;"></a>
</h1>
</div>
<!-- Logo End --> </div>
</div></header>
<!-- Main Header End -->
<!-- Content Start -->
<div id="main">
<!-- Slogan Start-->
<div class="slogan bottom-pad-small">
<div class="container">
<div class="row">
<div class="slogan-content">
<div class="col-lg-12 col-md-12">
<h2 class="slogan-title">Text goes here</h2>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- Slogan End-->
<!-- Main Content start-->
<div class="main-content">
<div class="container">
<div class="row">
<div align="center">Text goes here:</div>
</div>
</div>
<div class="row">
<div class="main2">
<div align="center" class="loader">
<img src="loader.gif" id="load" alt="Please wait..." width="16" height="11" align="absmiddle"/>
</div>
</div>
<div class="clear"></div>
</div>
<div class="row">
<p>
<br>
<br></p>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<ul class="contact-us">
<li>
<p>Last updated: mm/dd/yy 11:11pm</p>
</li>
<li>
<p> <strong>Text goes here</strong>
</p>
</li>
<li>
<p>Text goes here</p>
</li>
</ul>
</div>
</div>
</div>
<!-- Main Content end--> </div>
<!-- Content End -->
<!-- Footer Start -->
<footer id="footer"></footer>
<!-- Wrap End -->
</body>
</html>
To prove that the issue only occurs on the second run of the ajaxd() function, I removed this line:
setInterval("ajaxd()", 1000);
and replaced it with
ajaxd();
to only load a single time. Then I replaced it with
ajaxd();
ajaxd();
and, sure enough, strange divs were added the second time around.
Does anyone have any thoughts what may be happening here? I am banging my head against the wall trying to figure this out. I have scoured the web for an answer, but I can't find anything that helps.
I need to run ajaxd() every second because the XML file it is getting changes every few seconds. Without the refresh interval, everything works fine, but the refresh is a necessity.
Any help anyone can offer would be very much appreciated!
Aucun commentaire:
Enregistrer un commentaire