1

Hard refresh removes the search cookie: cookieId.bs.table.searchText

All other cookie values are maintained including filter values.

Using the refresh button keeps the cookie value. My main issue is the following:

Why does the value get removed with a hard refresh?

I just noticed that the live example has two search options, which I'm not understanding why is happening. The local environment shows only one search. Removing data-search="true" removes both searches.

Code below is available in this live example

Update: I'm noticed that removing the jquery script only shows one search box instead of two, but the issue still persists with regards to caching. When there are two search boxes, the second box retains the cache. Again the two searches never occur in my local environment.

Update: Removing data filter control options fixes the cookie search issue. Seems like data-filter-control="true" might be the cause.

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <h1 id="title"></h1>
<div id="toolbar">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="xxx"><span class="glyphicon glyphicon-facetime-video"></span>
Other Dashboard </a>    </li>
    <li class="nav-item">
      <a class="nav-link" href="xxxx"><span class="glyphicon glyphicon-tag"></span> X Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="xxx"><span class="glyphicon glyphicon-user"></span> Personal Dashboard</a>
    </li>
  </ul>
</div>
  <table id="table"
         data-cookie="true"
         data-cookie-id-table="cookieId"
         data-cookie-expire="2y"
         data-toggle="table"
         data-toolbar="#toolbar"
         data-show-columns="true"
         data-show-refresh="true"
         data-show-button-text="true"
         data-auto-refresh="true"
         data-flat="true"
         data-search="true"
         data-filter-control="true"
         data-sort-name="env"
         data-sort-order="desc"
         data-detail-view="true"
         data-detail-view-by-click="true"
         data-detail-view-icon="false"
         data-detail-formatter="detailFormatter"
         data-url="/data.json"
         data-mobile-responsive="true"
         data-show-search-clear-button="true"
         data-show-button-icons="true"
         data-buttons-class="primary">
    <thead>
      <tr>
        <th data-field="env" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Environment</th>
        <th data-field="job_id_href" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true" data-sorter="sortTable" >Job</th>
        <th data-field="repo_id"  data-sortable="true">Repo Id</th>
        <th data-field="created_by" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Created By</th>
        <th data-field="version_id" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Version</th>
        <th data-field="state" data-cell-style="stateCellStyle" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">State</th>
        <th data-field="duration" data-sortable="true">Duration</th>
        <th data-field="telemetry_ui_href" data-sortable="false">Telemetry</th>
        <th data-field="spark_ui_href" data-sortable="false">Spark</th>
        <th data-field="logs_ui_href" data-sortable="false">Logs</th>
        <th data-field="success_ratio" data-cell-style="cellStyle" data-sortable="true" data-sorter="sortSuccess">Success</th>
        <th data-field="update_time_pst" data-cell-style="lastUpdateCellStyle" data-sortable="true">Last Update (PST)</th>
      </tr>
    </thead>
  </table>
</div>
<div class="container">
  <br>
  <button onclick="darkModeToggle()">Toggle Dark Mode</button>
  &nbsp;
  <a target="_blank" href='__health'>Health</a>
  &nbsp;
  <a target="_blank" href='XXX>Hubble</a>
  &nbsp;
  <a target="_blank" href='XXX'>GitHub</a>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/cookie/bootstrap-table-cookie.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/addrbar/bootstrap-table-addrbar.min.js"></script>
```
  • Welcome to SO @user13770782 ! Your code example is really long, so my advice is to cut it down to just the most relevant bits first so that people can focus on just helping you with that. – Nick Jun 18 '20 at 21:32

0 Answers0