title: My HTML Div Element disappears immediately when page loads
body: <p>I am fetching HTML elements via AJAX and dynamically adding to a DIV element. The problem is that sometimes the DIV is loaded correctly, but sometimes it goes blank and show nothing on the DIV element even the data is logging correctly in the browser but not showing up. I am attaching links to the screenshots of the problem for better understanding.</p>
  
  <p><a href="https://i.stack.imgur.com/aHSym.png" rel="nofollow noreferrer" title="Image 1">Page loaded for first time</a></p>
  
  <p><a href="https://i.stack.imgur.com/IeBrg.png" rel="nofollow noreferrer" title="Image 2">Page refreshed several times and data appears</a></p>
  
  <p><a href="https://i.stack.imgur.com/OEc9A.png" rel="nofollow noreferrer" title="Image 3">Data disappears again when page is refreshed but AJAX is fetching the html code correctly</a>    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//////fetch table from database 
  var getTable = function (id, value, tableId, context){
  
     $.ajax({
      url:'getJSON.php',
      type:'POST',
      dataType: 'json',
      data:id+"="+value,
      success:function(data){
       
      
      console.log(data);
      
      ///////////////table/////////////
       
      if(data.length&gt;0)
      {
         var table = $('#'+tableId).
            dataTable({
             "pageLength": 5,
             "lengthChange": false
            });
         var row,cell;
       var count = Object.keys(data[0]).length;
       
  
        for(i=0;i&lt;data.length;i++){
       
          if(context.toLowerCase()==="classenroll")
          {
           table.fnAddData([
                                      data[i].CODE,
           data[i].NAME
          ]); 
  
       }
  
       if (context.toLowerCase()==="showmodifyassign") {
  
        table.fnAddData([
        
             data[i].TITLE,
       
          data[i].DESCRIPTION,
  
          data[i].DEADLINE,
  
          data[i].NAME,
         
          "&lt;a href=\"#\"&gt;Edit&lt;/a&gt;"
         
        ]);
        
        
       }
  
  
       if (context.toLowerCase()==="submittedassignments") {
  
        table.fnAddData([
         
         data[i].STUDENT_ID,
         
         data[i].FULL_NAME,
         
         data[i].CLASS_NAME,
  
         data[i].TITLE,
  
         data[i].DEADLINE,
  
         data[i].SUBMISSION_DATE,
  
         "&lt;a href = "+data[i].FILENAME+"&gt;"+"Download Now"+"&lt;/a&gt;"
        ]);
  
       }
  
       if (context.toLowerCase()==="showdueassignments") {
  
        table.fnAddData([
  
         data[i].TNAME,
  
         data[i].TITLE,
  
         data[i].POSTINGDATE,
  
         data[i].DEADLINE,
  
         "&lt;a target=\"_blank\" href = \"submit.php\"&gt;Submit&lt;/a&gt;"
        ]);
        
       }
  
       if (context.toLowerCase()==="modifyclass") {
  
  
        table.fnAddData([
  
         data[i].CODE,
  
         data[i].NAME,
  
         data[i].DESCRIPTION,
  
         "&lt;a href = \"#\"&gt;Edit&lt;/a&gt;"
        ]);
        
       }
  
       
      
     }
      /////////////////////////////////////////////////
    }
   }
  });
   
  
  
    }
  
  
  ///code for the dynamic navbar
  
  $("#wb_element_section_teacher").ready(function(e){
      
      getForm("homeTeacher");
      getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
    topMargin(0);
   
  
   });
   
   $('body').on('click', '#teacherHome', function(){
           
           getForm("homeTeacher");             
          getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
              tempHeight=650;
        $("#wb_element_section_teacher").css('height',tempHeight+'px');
        topMargin(tempHeight-divHeight);
         return false;
      });
  
      
      $('body').on('click', '#createAssign', function(){
        
        getForm("createAssign");
         tempHeight=650;
        $("#wb_element_section_teacher").css('height',tempHeight+'px');
        topMargin(tempHeight-divHeight);
       return false;
      });
      
  
      $('body').on('click', '#modifyAssign', function(){
       
        getForm("modifyAssign");
        tempHeight=950;
        getTable("showMod","somevalue","modAssign","showmodifyassign");
        $("#wb_element_section_teacher").css('height',tempHeight+'px');
        topMargin(tempHeight-divHeight);
       return false;
      });
  
       
       $('body').on('click', '#createClass', function(){
        getForm("createClass");
        tempHeight=650;
        $("#wb_element_section_teacher").css('height',tempHeight+'px');
        topMargin(tempHeight-divHeight);
       return false;
      });
       
  
       $('body').on('click', '#modifyClass', function(){
       getForm("modifyClass");
       getTable("modClass","somevalue","modClass","modifyclass");
       tempHeight=1000;
       $("#wb_element_section_teacher").css('height',tempHeight+'px');
       topMargin(tempHeight-divHeight); 
      return false;
      });
  
  $("#wb_element_section_teacher").ready(function(){
      
      getForm("homeStudent");
      getTable("due","somevalue","dueAssignments","showdueassignments"); 
   topMargin(0);
  
  });
  }  
  
  $('body').on('click', '#homeStudent', function(){
          
          getForm("homeStudent");   
          getTable("due","somevalue","dueAssignments","showdueassignments");          
          tempHeight=650;
    $("#wb_element_section_teacher").css('height',tempHeight+'px');
    topMargin(tempHeight-divHeight);
     return false;
  });
  
  
  $('body').on('click', '#enrollClasses', function(){
    
    getForm("enrollClasses");
     tempHeight=650;
    $("#wb_element_section_teacher").css('height',tempHeight+'px');
    topMargin(tempHeight-divHeight);
   return false;
  });
  
  
    $('body').on('click', '#viewEnrolled', function(){
    getForm("viewEnrolled");
    getTable($("#hStudentTitle").val(),$("#hStudentId").val(),"enrolledClassesTable","classEnroll");
    tempHeight=650;
    $("#wb_element_section_teacher").css('height',tempHeight+'px');
    topMargin(tempHeight-divHeight);
   return false;
  });
  
  $('body').on('click', '#viewSent', function(){
   
    getForm("viewSent");
    getTable("sent","somevalue","sentAssignments","showsentassignments");
    tempHeight=950;
    $("#wb_element_section_teacher").css('height',tempHeight+'px');
    topMargin(tempHeight-divHeight);
   return false;
  });
  
     
  
     ///////////
  
  ////JS to fetch the Elements (HTML)
  getForm = function (userType){
  
     $.ajax({
  
      url: "forms.php",
      type:"POST",
      data:"type="+userType,
      success:function(data){
       console.log(data);
       $("#wb_element_section_teacher").html(data);
       return true;
      }
  
     });
  
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--
  In Javascript code:
  
  hTeacherTitle.val() = "TEACHER_ID";
  hTeacherId.val()=(Integer value) ID of the teacher returned from the Database;
  
  --&gt;
  
  
  
  
  &lt;!-- Code that is fetched when page loads--&gt;
  &lt;div class="navbar-header"&gt;
  &lt;button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navItems" aria-expanded="false"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span class="glyphicon glyphicon-th-list"&gt;&lt;/span&gt; &lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="navigation" class="col-md-12 "&gt;
  
  &lt;ul class="nav nav-pills navbar-default collapse navbar-collapse nav-justified" id="navItems" &gt;
  
      &lt;li id="teacherHome"&gt;&lt;a href="#" class="navbar-text"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li id="createAssign"&gt;&lt;a href="#" class="navbar-text"&gt;Create Assignment&lt;/a&gt;&lt;/li&gt;
       &lt;li id="modifyAssign"&gt;&lt;a href="#" class="navbar-text"&gt;Modify Assignments&lt;/a&gt;&lt;/li&gt;
       &lt;li id="createClass"&gt;&lt;a href="#" class="navbar-text"&gt;Create Class&lt;/a&gt;&lt;/li&gt;
          &lt;li id="modifyClass"&gt;&lt;a href="#" class="navbar-text"&gt;Modify Class&lt;/a&gt;&lt;/li&gt;
       
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container-fluid" style="margin-top:10%;"&gt; &lt;center&gt;&lt;h3&gt;New Assignments&lt;/h3&gt;&lt;/center&gt;
  &lt;/div&gt;
  &lt;div id="newAssign"&gt;
   &lt;table id="newAssignTable" class="table table-bordered table-striped"&gt;
   
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Student\'s ID&lt;/th&gt;
        &lt;th&gt;Student\'s Name&lt;/th&gt;
        &lt;th&gt;Class Name&lt;/th&gt;
        &lt;th&gt;Assignment Title&lt;/th&gt;
        &lt;th&gt;Due Date&lt;/th&gt;
        &lt;th&gt;Submission Date&lt;/th&gt;
        &lt;th&gt;Download&lt;/th&gt;
    &lt;/tr&gt; 
      &lt;/thead&gt;
     
      &lt;tbody&gt;
      &lt;/tbody&gt;
   
   &lt;/table&gt;
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>