How to update the contents of a Bootstrap modal?

Question

Within a modal, I need to update the information shown there, every time it opens. But it seems like everything, keeps it in the cache.

Previous question where the code is.

Share more info and your code so that this can be answered. – Ambrish Pathak Dec 31 '16 at 03:48 — Ambrish Pathak, Dec 31 '16 at 03:48
I added a link to a previous question, there is the code. – David Santiago Dec 31 '16 at 03:53 — David Santiago, Dec 31 '16 at 03:53

score 0 · Answer 1 · answered Dec 31 '16 at 03:50

0

Just try deleting cookies and cache on your browser, and be sure you are opening the file you are actually editing!

answered Dec 31 '16 at 03:50

Enrique Garga

1
2

It would be a very drastic solution to eliminate everything, I just need to update the content within the Modal. – David Santiago Dec 31 '16 at 03:54

score 0 · Accepted Answer · answered Dec 31 '16 at 11:38

Find the solution, using `$router` from AngularJS.

var helloApp = angular.module('helloApp',["ngRoute"]);


 helloApp.config(function($routeProvider) {
   $routeProvider
   .when("/", {
     templateUrl : "modal.html",
     controller: 'DataCtrl'
   })
   .when("/red", {
     templateUrl : "1.htm"
   })
   .when("/green", {
     templateUrl : "2.htm"
   })
   .when("/blue", {
     templateUrl : "3.htm"
   });
 });


 helloApp.controller("CompanyCtrl",['$scope',function($scope){

  $scope.numbers = [1,2,3,4,5,6,7,8,9];
  $scope.tableTitle = "SEMESTRE ";
  $scope.checked1 = false; //DELETE

  $scope.number = 7;
  $scope.getNumber = function(num) {
      return new Array(num);   
  }

  $scope.companies = [
                     { 'name':'Infosys Technologies',
                      'employees': 125000,
                      'headoffice': 'Bangalore'},
                      { 'name':'Cognizant Technologies',
                       'employees': 100000,
                       'headoffice': 'Bangalore'},
                       { 'name':'Wipro',
                        'employees': 115000,
                        'headoffice': 'Bangalore'},
                        { 'name':'Tata Consultancy Services (TCS)',
                         'employees': 150000,
                         'headoffice': 'Bangalore'},
                         { 'name':'HCL Technologies',
                          'employees': 90000,
                          'headoffice': 'Noida'},
                     ];
     $scope.vAddGroup = [

     ];

 $scope.addGroup = function(name){ 
  var index = -1; 
  var comArr = eval( $scope.companies );
   for( var i = 0; i < comArr.length; i++ ) {
    if( comArr[i].name === name ) {
     index = i;
     break;
    }
   }
   if( index === -1 ) {
    alert( "Something gone wrong" );
   }

  $scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
  $scope.checked1 = true;

  var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
  d.className = " subjectOK not-active";

 };


 $scope.addRow = function(){  
  $scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
  $scope.name='';
  $scope.employees='';
  $scope.headoffice='';
 };

 $scope.removeRow = function(name){    
   var index = -1;  
   var comArr = eval( $scope.vAddGroup );
   for( var i = 0; i < comArr.length; i++ ) {
    if( comArr[i].name === name ) {
     index = i;
     break;
    }
   }
   if( index === -1 ) {
    alert( "Something gone wrong" );
   }
   $scope.vAddGroup.splice( index, 1 ); 
   $scope.checked1 = false;


   var d = document.getElementById(1); // IDENTIFICADOR UNICO CADA MATERIA
   d.className = " subject";
  };

 }]);



helloApp.controller('DataCtrl', function($scope, $http, $route) {
 console.log("DataCtrl");
 
 $scope.reloadData = function(){
  $scope.content = [];
  console.log("Reload before 2");
  $route.reload();

  console.log("inOpenModal2");
    $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function(response) {
        $scope.content = response.data.records;
    }, function(response) {
        $scope.contentWrong = response.config;
    });

  console.log("Reload after 2");

 };
 
  console.log("inOpenModal1");
    $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function(response) {
        $scope.content = response.data.records;
    }, function(response) {
        $scope.contentWrong = response.config;
    });

  
 
});


function closeModal(){
 $('.modalCloseID').modal('hide');
 //$('#inbox').remove();
 console.log("closeModal");
}

function initModal(){
 console.log("initModal");
}

.subject {
    background-color: #4CAF50; /* Green */
    /* border: none; */
    border: 1px solid white;
    border-radius: 4px;
    color: white; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    cursor: hand;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}
.subject:hover {
    background-color: #241E4E; 
    color: white; 
    border: 1px solid #555555;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}
.subject:focus {
outline:0px;
}

.subjectOK {
  background-color: white; 
    /* border: none; */
    border: 2px solid black;
    border-radius: 30%;
    color: black; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:not-allowed;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;


     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}

.csstr {
 border: 0px solid black;

}


.csstitle {
    border-left: 6px solid red;
    background-color: lightgrey;
}

.not-active {
   pointer-events: none;
   cursor: default;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>

 <meta http-equiv="Expires" content="0">
 <meta http-equiv="Last-Modified" content="0">
 <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
 <meta http-equiv="Pragma" content="no-cache">


<title>AngularJS</title>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="controllers.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>


   
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<div ng-app="helloApp" ng-controller="DataCtrl">

 <h2 class="csstitle">Seleccionar Materias</h2>



 <div class="table-responsive">          
   <table class="table">
     <thead>
       <tr>
         <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
       </tr>
     </thead>
     <tbody>
       <tr class="csstr" ng-repeat="item in content | limitTo: 7">

         <td> <!-- SEMESTRE #1 -->
          <div id="{{numbers[0]}}" ng-click="reloadData()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
         </td>

         <td><!-- SEMESTRE #2 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
         </td>

         <td><!-- SEMESTRE #3 -->
            <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div> 
         </td>

         <td><!-- SEMESTRE #4 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div> 
         </td>

         <td><!-- SEMESTRE #5 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div> 
         </td>

         <td><!-- SEMESTRE #6 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div> 
         </td>

         <td><!-- SEMESTRE #7 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div> 
         </td>

         <td><!-- SEMESTRE #8 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div> 
         </td>

         <td><!-- SEMESTRE #9 -->
          <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div> 
         </td>

       </tr>

     </tbody>
   </table>
   </div>



<div ng-repeat="item in numbers | limitTo: 9">
  <!-- Modal -->
  <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Materia # {{item}}</h4>
        </div>
        <div class="modal-body">
          <p>Seleccione un horario.</p>

          

     <label>Filtro</label>
     <input type="text" class="form-control" ng-model="searchKeyword"/> 

      {{content}}
      {{contentWrong}}
     

    <div id="inbox"> 
     <table class="table">
      <tr>
       <th>Name
       </th>
       <th>Employees
       </th>
       <th>Head Office
       </th>
       <th>Acción
       </th>
      </tr>
      <tr ng-repeat="company in companies  | filter: searchKeyword ">
       <td>
        {{company.name}}
       </td>
       <td>
        {{company.employees}}
       </td>
       <td>
        {{company.headoffice}}
       </td>
       <td>
       <input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
       </td>
      </tr>
     </table>
    

     <button ng-click="reloadData()"> Reload data</button>


    </div> <!-- Contenido dinamico, por cada CLICK -->

  


    </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
  <!-- END MODAL-->
</div>
 



 <hr>
 <h2 class="csstitle">Materias seleccionadas</h2>

 <table class="table">
  <tr>
   <th>Name
   </th>
   <th>Employees
   </th>
   <th>Head Office
   </th>
   <th>Acción
   </th>
  </tr>
  <tr ng-repeat="item in vAddGroup">
   <td>
    {{item.name}}
   </td>
   <td>
    {{item.employees}}
   </td>
   <td>
    {{item.headoffice}}
   </td>
   <td>
   <input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
   </td>
  </tr>
 </table>


</div>
</body>
</html>

How to update the contents of a Bootstrap modal?

2 Answers2