On Popup data fetch is seen twice through ajax : php mysql

[shashib]

I am struggling from past 2 hours .Tried :

    location.reload();    reset form

many features but after i close my popup and when reopen or open some another id ..my previous id data is still seen there and its continuous for all id. style :

 #overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: #000;    filter:alpha(opacity=70);    -moz-opacity:0.7;    -khtml-opacity: 0.7;    opacity: 0.7;    z-index: 100;    display: none;    }    .content a{    text-decoration: none;    }    .popup{    width: 100%;    margin: 0 auto;    display: none;    position: fixed;    z-index: 101;    }    .content{    min-width: 800px;    width: 900px;    min-height: 150px;    margin: 0px auto;    background: #f3f3f3;    position: relative;    z-index: 103;    padding: 10px;    border-radius: 5px;    box-shadow: 0 2px 5px #000;    }    .content p{    clear: both;    color: #555555;    text-align: justify;    }    .content p a{    color: #d91900;    font-weight: bold;    }    .content .x{    float: right;    height: 35px;    left: 22px;    position: relative;    top: -25px;    width: 34px;    }    .content .x:hover{    cursor: pointer;    }

Jquery / ajax :Below is my popup box + ajax to fetch and show record under Input field

$('#class').on('click delegate mouseenter', 'a', function (e) {                           var data = dt.row( $(this).parents('tr') ).data();                var valuea = data[1];                                      $(function(){                    e.preventDefault();                       var table = $('#class').DataTable();                    var overlay = $('<div id="overlay"></div>');                        $('.close').click(function(){                        $('.popup').hide();                        overlay.appendTo(document.body).remove();                        location.reload();                        resetForms();                        $("span.ajax_loader").hide(); // success                        var pathlaser = "server_processing_laser.php";                        tablel.clear();                        tablel.draw();                        tablel.ajax.url(pathlaser).load();                        return false;                    });                                         $('.xclose').click(function(){                        $('.popup').hide();                        overlay.appendTo(document.body).remove();                        location.reload();                        resetForms();                        $("span.ajax_loader").hide(); // success                        var pathlaser = "server_processing_laser.php";                        tablel.clear();                        tablel.draw();                        tablel.ajax.url(pathlaser).load();                        return false;                    });                     // POPUP BOX                    $('.click_'+data[0]+'').click(function(e){e.preventDefault();                               overlay.show();                        overlay.appendTo(document.body);                        $('.popup').show();                    $("div.note_msg").hide();                        $('.popup .id').val(valuea);                            // FETCHING DATA TO SHOW                        $.ajax({                           type:"GET",                           url:"fetchrecord.php",                           data:{                               valuea:valuea,                                 },                             async: false,                           success:function(html){                             $("#display").after(html);                             }                             });                             return false;                    });                     });        });         }); **below is popup code :**    <div class='popup'>    <div class='content'>    <a href='' class="xclose"><img src='../datatables/media/images/close.png' alt='quit' class='x' id='x' /> </a>    <p>                    <form method="post" action="" id="feedback_form">             <div class="langtrx_fr" align="center">                    <table align="center">                     <div id="display"></div>                    </table>                                 </div>        </form>           <span class="ajax_loader"></span>         <table align="center"><tr><td> <a href='' class='close'><strong>Close</strong></a> </td></tr> </table>        </p>    </div>    </div>

fetchrecord.php

    $valuepktid = $_REQUEST['valuea'];        $sql = "SELECT stoneone,stonetwo,stone3,loss FROM stone          WHERE pid = ".db_escape($valuepktid)."          GROUP BY id";    $resultpkt = mysqli_query($db,$sql);    $abpkt = mysqli_fetch_array($resultpkt);         ?>        <?php     header('Pragma: no-cache', true);     header("Cache-Control: no-store, no-cache, must-revalidate", true);         ?>             <tr>    <td class="label">Stone 1 :</td>    <td  class="form">    <input name="stoneone" id="stoneone" readonly value="<?php echo $abpkt['stoneone'];?>" class="stoneone" autocomplete="off"  type="number"/>    </td>    </tr>        <tr>    <td class="label">Stone 2 :</td>    <td class="form"><input name="stonetwo" readonly value="<?php echo $abpkt['stonetwo'];?>" class="stonetwo" autocomplete="off"  type="number" /></td>    </tr>         <tr>    <td class="label">Loss :</td>    <td class="form"><input name="loss" readonly  value="<?php echo $abpkt['loss'];?>" class="loss" value="" autocomplete="off"  type="number" /></td>    </tr>

All is working fine.. i mean i am getting databut when i close and open any other ID , then popup show me above tr/td data twice.means the latest data and the old one which i closed.i tried reload of page so that i get fresh data, but some time its showing me proper data and some time multiple with old one.I think its something related to cache of DIV. which remain as its after close of popup.**popup link :** http://stackoverflow.com/questions/24902935/jquery-datatables-jquery-popup-box-not-working-under-function-php-mysqlany idea please help

Edited August 13, 2014 by shashib

[justsomeguy]

The code that gets the data and fills in the popup is not clearing or replacing the element, it is adding new data to it. It will keep adding new data, not removing what is already there.

[shashib]

Hey your correct .. its happening same here ...

 

So what is the solution for this ?

[justsomeguy]

That should be fairly obvious. The solution is to clear the element before adding new content, or just replace the content with the new content.