jQuery .dialog inside .each loop - new dialog content divs are written on each iteration - how can I destroy the old divs on each loop?

debugcn Published at Dev

Luke

I have a webpage that is using ajax GET to download an xml file, then a function (xmlParser) parses the xml file in an .each loop. Inside the same .each loop, I am creating jQuery dialog boxes.

The ajax GET mentioned above re-runs every 1 second because the xml file it is getting is dynamic. Everything on the page works correctly (i.e. all content displays and functions properly), but when I look at the page Elements in Chrome's developer console, I noticed that the divs for the dialog content are being recreated everytime the ajax function loops, which eventually causes the page to crash.

How can I prevent this? I can't seem to figure out a way to properly overwrite these divs to stop new ones from being created each time.

I would really appreciate someone's help.

The full code is below:

<!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">
      <title>Page Title</title>
      <link rel='stylesheet' id='jquery-ui-theme-css'  href='css1.css' type='text/css' media='all' />
      <link rel='stylesheet' id='googlefonts-css'  href='css2.css' type='text/css' media='all' />
      <link rel='stylesheet' id='bootstrap-css'  href='css3.css' />
      <link rel='stylesheet' id='fontawesome-css'  href='css4.css' type='text/css' media='all' />
      <link rel='stylesheet' id='main-css'  href='css5.css' media='all' />
      <link rel='stylesheet' id='red-css'  href='css6.css' type='text/css' media='all' />
      <link rel='stylesheet' id='responsive-css'  href='css7.css' type='text/css' media='all' />
      <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></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();
    //$(".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="dialog_but">' + machineName + '</div><div class="dialog_content"><ul><li>Black Gain: ' + hdBlackGain + '</li><li>Luma Gain: ' + hdLumaGain + '</li><li>Chroma Gain: ' + hdChromaGain + '</li><li>Hue: ' + hdHue + '</li><li>IP Address: ' + ip + '</li></ul></div></div></div>');
            $(".proc").show();

        //loop through every button anchor element
        $('.dialog_but').each(function() {

            //create a local scope of a dialog variable to attach
            var $dialog;

            //create the dialog for the div.dialog_content standing next to the anchor element
            //we make the autoOpen false so that it can be reusable
            //also we set the modal = true to appear the dialog as a modal prompt
            $dialog = $(this).next('div.dialog_content').dialog({
              modal: true,
              autoOpen: false,
              width: 600,
              title: 'Current Proc Status: ' + machineName,
              buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
            });

            //now attach the open even of the dialog to the anchor element
            $(this).click(function(e) {
                //prevent the anchor element to go to the hyperlinked page
                e.preventDefault();

                //open the dialog
                $dialog.dialog('open');
            });
        });
            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;
}
</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="http://bcceng/wp-content/themes/opseng/img/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>
                <li>
                  <p>Last updated: 3/4/15 11:34pm</p>
                </li>            
              </ul>
              </div>
            </div>
          </div>
          <!-- Main Content end--> </div>
        <!-- Content End -->
        <!-- Footer Start -->
        <footer id="footer"></footer>
      <!-- Wrap End -->
</body>
    </html>

Arun P Johny

When you create dialog objects, there are elements which are added to the body which are not under the container main2, so calling $(".main2").empty() will not remove them.

In your case since the dialogs are created for elements dialog_content you can call the destroy method of dialog to remove them

$('.dialog_content').dialog('destroy');
$(".main2").empty();

Another option is to use a single dialog like

Add below html to your body

<div class="dialog_content">
    <ul>
        <li>Black Gain: <span class="hd-black-gain"></span></li>
        <li>Luma Gain: <span class="hd-luma-gain"></span></li>
        <li>Chroma Gain: <span class="hd-chroma-gain"></span></li>
        <li>Hue: <span class="hd-hue"></span></li>
        <li>IP Address: <span class="ip"></span></li>
    </ul>
</div>

then

$(document).ready(function () {
    setInterval("ajaxd()", 1000);

    var $dialog = $('.dialog_content').dialog({
        modal: true,
        autoOpen: false,
        width: 600,
        title: 'Current Proc Status: ',
        buttons: [{
            text: "OK",
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

    $('.main2').on('click', '.dialog_but', function (e) {
        var $this = $(this),
            data = $this.data();
        e.preventDefault();

        $dialog.dialog('option', 'title', 'Current Proc Status: ' + data.machineName);
        $dialog.find('.hd-black-gain').text(data.hdBlackGain);
        $dialog.find('.hd-luma-gain').text(data.hdLumaGain);
        $dialog.find('.hd-chroma-gain').text(data.hdChromaGain);
        $dialog.find('.hd-hue').text(data.hdHue);
        $dialog.find('.ip').text(data.ip);

        //open the dialog
        $dialog.dialog('open');
    })
});

function ajaxd() {
    "use strict";
    $.ajax({
        type: "GET",
        url: "output.xml",
        dataType: "xml",
        cache: false,
        success: xmlParser
    });
};

function xmlParser(xml) {
    "use strict";
    $(".main2").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 {
            var $proc = $('<div class="proc"><div class="title"><div class="dialog_but">' + machineName + '</div></div></div>').appendTo(".main2");
            $proc.find('.dialog_but').data({
                machineName: machineName,
                hdBlackGain: hdBlackGain,
                hdLumaGain: hdLumaGain,
                hdChromaGain: hdChromaGain,
                hdHue: hdHue,
                ip: ip
            })

            count = count + 1;
        }
    });
};

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-5

Comments

0 comments

From Dev

How can I use JQuery to populate multiple divs with content from external html page and update that content based on attributes on each div?

From Dev

Related Related

Article