i've 3 files 1) search-installment.php 2) pay-installment.php 3) update_installment.php first step enter card no into search-installment.php posting value search_cardno to pay-installment.php then updating particular installment row clicking pay button in that row which opens form in modal window after pressing submit button it's updating data in table, but while refreshing the table #example after submit form the data is disappearing from table cells.

how to fix this issue.

//search-installment.php

<?php
include 'include/db.php';
include 'include/settings.php';
include 'include/functions.php';
if(!isset($_SESSION['userid']) || $_SESSION['userid'] == ''){
    echo '<script type="text/javascript">window.location = "index.php"; </script>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>Control Panel - Pay Installment</title>
    <meta name="description" content="Dashboard">
    <meta name="keyword" content="Dashboard">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/style.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>

    <!-- end: CSS -->


    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
        <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- end: Favicon -->




</head>

<body>

        <!-- start: Header -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                                <a class="brand" href="dashboard.php"><span><?php echo TITLE; ?></span></a>

                <!-- start: Header Menu -->
                                <?php header_bar(); ?>
                <!-- end: Header Menu -->

            </div>
        </div>
    </div>
    <!-- start: Header -->

        <div class="container-fluid-full">
        <div class="row-fluid">

            <!-- start: Main Menu -->
                        <?php side_menu(); ?>
            <!-- end: Main Menu -->


            <!-- start: Content -->
            <div id="content" class="span10">


            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a href="index.php">Home</a>
                    <i class="icon-angle-right"></i> 
                </li>
                <li>
                    <i class="icon-money"></i>
                    <a href="#">Pay Installment</a>
                </li>
            </ul>



            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="icon-money"></i><span class="break"></span>Pay Installment</h2>

                    </div>
                    <div class="box-content">
                        <form id="containerForm" class="form-horizontal" action="pay-installment.php" method="post">
                            <fieldset>

                              <div class="control-group">
                                                              <label class="control-label" for="cardno">Enter Card Number</label>
                                <div class="controls">
                                                                    <input type="text" id="search_cardno" name="search_cardno" class="search_cardno" autocomplete="off">                                          

                                </div>
                                                          </div>


                              <div class="form-actions">
                                <button type="submit" id="submit" name="search" class="btn btn-primary">Search</button>
                              </div>

                            </fieldset>
                          </form>

                    </div>
                </div><!--/span-->

            </div><!--/row-->




    </div><!--/.fluid-container-->

            <!-- end: Content -->
        </div><!--/#content.span10-->
        </div><!--/fluid-row-->


    <div class="clearfix"></div>

    <footer>

        <p>
                    <span style="text-align:left;float:left">XYZ CO</span>

        </p>

    </footer>

    <!-- start: JavaScript-->

        <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-migrate-1.0.0.min.js"></script>

        <script src="js/jquery-ui-1.10.0.custom.min.js"></script>

        <script src="js/jquery.ui.touch-punch.js"></script>

        <script src="js/modernizr.js"></script>

        <script src="js/bootstrap.min.js"></script>

        <script src="js/jquery.cookie.js"></script>

        <script src='js/fullcalendar.min.js'></script>

        <script src='js/jquery.dataTables.min.js'></script>

        <script src="js/excanvas.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.pie.js"></script>
    <script src="js/jquery.flot.stack.js"></script>
    <script src="js/jquery.flot.resize.min.js"></script>

        <script src="js/jquery.chosen.min.js"></script>

        <script src="js/jquery.uniform.min.js"></script>

        <script src="js/jquery.cleditor.min.js"></script>

        <script src="js/jquery.noty.js"></script>

        <script src="js/jquery.elfinder.min.js"></script>

        <script src="js/jquery.raty.min.js"></script>

        <script src="js/jquery.iphone.toggle.js"></script>

        <script src="js/jquery.uploadify-3.1.min.js"></script>

        <script src="js/jquery.gritter.min.js"></script>

        <script src="js/jquery.imagesloaded.js"></script>

        <script src="js/jquery.masonry.min.js"></script>

        <script src="js/jquery.knob.modified.js"></script>

        <script src="js/jquery.sparkline.min.js"></script>

        <script src="js/counter.js"></script>

        <script src="js/retina.js"></script>

        <script src="js/custom.js"></script>
                <script src="js/jquery.validate.min.js"></script>
                <script src="js/additional-methods.min.js"></script>
<script type="text/javascript">
$(function()
{
 $('.search_cardno').keyup(function()
 {
   var search_cardno=$(this).val();
   search_cardno=trim(search_cardno);
   if(search_cardno!=''){
   $('.check').show();
   $('.check').fadeIn(400);
   var dataString = 'search_cardno='+ search_cardno;
   $.ajax({
      type: "POST",
      url: "check_cardno.php",
      data: dataString,
      cache: false,
      success: function(result){
      var result=trim(result);
      if(result==''){
          $('.check').html(search_cardno+' card number Available');
          $(".search_cardno").removeClass("red");
          $(".search_cardno").addClass("white");
      }else{
          $('.check').html(search_cardno+' '+result);
          $(".search_cardno").removeClass("white");
          $(".search_cardno").addClass("red");
      }
     }
  });
 }else{
    $('.check').html('');

 }
 });
});
function trim(str){
    var str=str.replace(/^\s+|\s+$/,'');
    return str;
}

       </script>

 <script type="text/javascript">
 $('#containerForm').validate({
        rules: {
      search_cardno: {
      required: true,
      digits: true
    }
        },
        highlight: function(element) {
            $(element).closest('.control-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.control-group').removeClass('has-error');
        }
    });

</script>       
       <!-- end: JavaScript-->

</body>
</html>



// pay-installment.php

<?php
include 'include/db.php';
include 'include/settings.php';
include 'include/functions.php';
$bd=mysqlConnect();
if(!isset($_SESSION['userid']) || $_SESSION['userid'] == ''){
    echo '<script type="text/javascript">window.location = "index.php"; </script>';
}
$search_cardno=$_POST['search_cardno']; 
$search_cardno = mysql_real_escape_string(stripslashes($search_cardno));
$result = mysql_query("SELECT * FROM custreg WHERE reg_no=$search_cardno");
$row = mysql_fetch_array($result);
$member_name=$row['firstname'].' '.$row['lastname'];
$mobno1=$row['mobno1'];
$mobno2=$row['mobno2'];
$city=$row['city'];
$main_agent=$row['magentname'];
$sub_agent=$row['sagentname'];

?>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>Control Panel - Pay Installment</title>
    <meta name="description" content="Dashboard">
    <meta name="keyword" content="Dashboard">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/style.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
    <!-- end: CSS -->


    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
        <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- end: Favicon -->




</head>

<body>

        <!-- start: Header -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                                <a class="brand" href="dashboard.php"><span><?php echo TITLE; ?></span></a>

                <!-- start: Header Menu -->
                                <?php header_bar(); ?>
                <!-- end: Header Menu -->

            </div>
        </div>
    </div>
    <!-- start: Header -->

        <div class="container-fluid-full">
        <div class="row-fluid">

            <!-- start: Main Menu -->
                        <?php side_menu(); ?>
            <!-- end: Main Menu -->


            <!-- start: Content -->
            <div id="content" class="span10">


            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a href="index.php">Home</a>
                    <i class="icon-angle-right"></i> 
                </li>
                <li>
                    <i class="icon-money"></i>
                    <a href="#">Pay Installment</a>
                </li>
            </ul>

            <div class="row-fluid sortable"> 
                <div class="box span12">
                    <div class="box-header">
                        <h2><i class="halflings-icon user"></i><span class="break"></span>MEMBER DETAILS</h2>

                    </div>
                    <div class="box-content">
                        <table class="table table-bordered table-striped table-condensed">
                              <thead>
                                  <tr>
                                      <th>Card No</th>
                                      <th>Member Name</th>
                                      <th>Mobile No 1</th>
                                      <th>Mobile No 2</th>                                          
                                      <th>City</th>                                                                                                                    
                                      <th>Main Agent</th>                                          
                                      <th>Sub Agent</th>                                                                                                                                                                                              
                                  </tr>
                              </thead>   
                              <tbody>
                                <tr>
                                    <td><?php echo $search_cardno; ?></td>
                                    <td class="center"><?php echo $member_name; ?></td>
                                    <td class="center"><?php echo $mobno1; ?></td>
                                    <td class="center"><?php echo $mobno2; ?></td>                                       
                                    <td class="center"><?php echo $city; ?></td>                                                                                                               
                                    <td class="center"><?php echo $main_agent; ?></td>                                                                                                                                                                                       
                                    <td class="center"><?php echo $sub_agent; ?></td>                                                                                                                                                                                                                                                               
                                </tr>

                              </tbody>
                         </table>  

                    </div>
                </div><!--/span-->
            </div><!--/row-->


            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                                            <h2><i class="icon-money"></i><span class="break"></span>INSTALLMENT DETAILS</h2>

                    </div>
                    <div class="box-content">

<table id="example" class="table table-striped table-bordered bootstrap-datatable">
        <thead>
            <tr>
                <th>Installment No</th>                
                <th>Amount Paid</th>
                <th>Paid Date</th>
                <th>Collection Agent</th>
                <th>Actions</th>
            </tr>
        </thead>

        <tbody>
                <?php
            $mydata = mysql_query("SELECT * FROM slabpay WHERE ac_no='$search_cardno'");
                        while($record = mysql_fetch_array($mydata)) 
             { 
             $id=$record['id'];
                  ?>                    
                            <tr class='fired' id='<?php echo $record['id']; ?>'>
                                <td class="center"><?php echo $record['install_no'] ?></td>
                                <td class="center"><?php echo $record['install_amt'] ?></td>
                                <td class="center"><?php echo date('d/m/Y',strtotime($record['install_date'])) ?></td>
                                <td class="center"><?php echo $record['agent_name'] ?></td>
                                <td id="fired" class="center">
                                                                    <?php
                                                                    if($record['install_amt']>0)
                                                                    {?>
                                                                       <span class="label label-success">Paid</span> 
                                                                   <?php } 
                                                                    if($record['install_amt']=='000000')
                                                                    {
                                                                        ?>

<div id="thanks"><a class="open-PayInstallmentDialog btn btn-danger" href="#payAmt" data-installno="<?php echo $record['install_no']; ?>" data-acno="<?php echo $record['ac_no']; ?>">
  Pay    
    </a></div>                                                                        
                                                                    <?php
                                                                    }
                                                                    ?>
                                </td>
                            </tr>

                                                            <?php
            }
?>                                                        
                                                  </tbody>


    </table>            
                                        </div>
                </div><!--/span-->

            </div><!--/row-->




    </div><!--/.fluid-container-->

            <!-- end: Content -->
        </div><!--/#content.span10-->
        </div><!--/fluid-row-->


    <div id="payAmt" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">            
        <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Pay Installment</h4>
      </div>
         <form class="form-horizontal">          
    <fieldset>  
      <div class="modal-body">
        <input type="hidden" name="memId" id="memId" value="" />
        <input type="hidden" name="installNo" id="installNo" value="" />

    <div class="control-group">
    <label class="control-label">Installment No</label>
    <div class="controls">
    </div>
    </div>  
    <div class="control-group">
    <label class="control-label" for="date01">Select Date</label>
    <div class="controls">
    <input type="text" name="installdate" class="input-small datepicker" id="date01" value="<?php echo date('m/d/Y');  ?>">
    </div>
    </div>          
       </fieldset>
    </form>
      </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="submit">Save changes</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->    
    <div class="clearfix"></div>

    <footer>

        <p>
                    <span style="text-align:left;float:left">XYZ CO</span>

        </p>

    </footer>

    <!-- start: JavaScript-->

        <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-migrate-1.0.0.min.js"></script>

        <script src="js/jquery-ui-1.10.0.custom.min.js"></script>

        <script src="js/jquery.ui.touch-punch.js"></script>

        <script src="js/modernizr.js"></script>

        <script src="js/bootstrap.min.js"></script>

        <script src="js/jquery.cookie.js"></script>

        <script src='js/fullcalendar.min.js'></script>

        <script src='js/jquery.dataTables.min.js'></script>

        <script src="js/excanvas.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.pie.js"></script>
    <script src="js/jquery.flot.stack.js"></script>
    <script src="js/jquery.flot.resize.min.js"></script>

        <script src="js/jquery.chosen.min.js"></script>

        <script src="js/jquery.uniform.min.js"></script>

        <script src="js/jquery.cleditor.min.js"></script>

        <script src="js/jquery.noty.js"></script>

        <script src="js/jquery.elfinder.min.js"></script>

        <script src="js/jquery.raty.min.js"></script>

        <script src="js/jquery.iphone.toggle.js"></script>

        <script src="js/jquery.uploadify-3.1.min.js"></script>

        <script src="js/jquery.gritter.min.js"></script>

        <script src="js/jquery.imagesloaded.js"></script>

        <script src="js/jquery.masonry.min.js"></script>

        <script src="js/jquery.knob.modified.js"></script>

        <script src="js/jquery.sparkline.min.js"></script>

        <script src="js/counter.js"></script>

        <script src="js/retina.js"></script>

        <script src="js/custom.js"></script>
                <script src="js/installment-jquery.js"></script>
<script>
$(document).on("click", ".open-PayInstallmentDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var mymemId = _self.data('acno');
    $("#memId").val(mymemId);

    var myInstallno = _self.data('installno');
    $("#installNo").val(myInstallno);

    $(_self.attr('href')).modal('show');
});
</script>

<script>
 $(function() {
//twitter bootstrap script
    $("button#submit").click(function(){
            $.ajax({
            type: "POST",
        url: "update_installment.php",
        data: $('form.form-horizontal').serialize(),
            success: function(msg){
                     $("#example").html(msg)
                    $("#payAmt").modal('hide');    
                 },
        error: function(){
            alert("failure");
            }
              });
    });
});
</script>
    <!-- end: JavaScript-->

</body>
</html>




// update_installment.php

<?php

include 'include/db.php';
$bd=mysqlConnect();

if (isset($_POST['memId'])) {
$memId = mysql_real_escape_string($_POST['memId']);
$installNo = mysql_real_escape_string($_POST['installNo']);
$installdate = mysql_real_escape_string($_POST['installdate']);
$installdate1 = date('Y-m-d', strtotime($installdate));

include 'include/switch.php';

$sql = "update slabpay set install_amt='$installmentamt',install_date='$installdate1' where ac_no='$memId' AND install_no='$installNo'";
mysql_query($sql);
}

?>
Member Avatar for diafol
$("#example").html(msg)

That will overwrite the contents of the #example table with msg.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.