title: jquery acting strange on nginx and apache but normal on laravel dev server
body: <p>i try make todo list app with laravel as api and jquery to fetch result on api and upadate UI is working find when using laravel server but when i tried upload it using nginx or apache server is get wrong value at first i thought it was because uncleared event but when i  console.log fetch value is displaying the wrong value so i thougth it because some wrong in configuration serve i tried to clear all the chache and prevent it from sending cache it it not working so i tried to serve front and in different url and make it static but its til the same can you please help me?</p>
  <p>here's my nginx conf:</p>
  <pre><code> server{
   
           add_header Access-Control-Allow-Origin *;
   
           listen 192.168.43.181:8080;
   
           server_name nginx-handbook.test;
           include /etc/nginx/mime.types;
   
           root /srv/todo/public;
   
          location /api {
                    try_files $uri $uri/ /index.php?$query_string;
   
                           # kill cache
           add_header Last-Modified $date_gmt;
           add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
           if_modified_since off;
           expires off;
           etag off;
   
           }
           location ~ \.php$ {
                   fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
                   fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                   include /etc/nginx/fastcgi_params;
   
                           # kill cache
           add_header Last-Modified $date_gmt;
           add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
           if_modified_since off;
           expires off;
           etag off;
   
           }
   
   }
   
   
   server{
   
           add_header Access-Control-Allow-Origin *;
   
           listen 192.168.43.181:8000;
   
           server_name nginx-handbook.test;
   
           include /etc/nginx/mime.types;
   
           root /srv/todo/public/root;
   
       location ~* \.(css)$ {
           root /srv/todo/public/root/css;
   
                   # kill cache
           add_header Last-Modified $date_gmt;
           add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
           if_modified_since off;
           expires off;
           etag off;
   
       }
       location ~* \.(js)$ {
           root /srv/todo/public/root/js;
                   # kill cache
           add_header Last-Modified $date_gmt;
           add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
           if_modified_since off;
           expires off;
           etag off;
       }
  </code></pre>
  <p>jquery code:</p>
  <pre><code>app.js
  
   import {
       SendTodoEvent,
       getAlllist,
       getAllActive,
       getAllComplete,
       deletecomplete,
       completeAll, } from &quot;./ajax.js&quot;; import { removeGetAlllisterner } from &quot;./EventClean.js&quot;;
   
       $(&quot;#new-todo&quot;).keypress(function (event) {
           SendTodoEvent(event);
       });
   
       $(&quot;#clear-completed&quot;).click(function () {
           deletecomplete();
           removeGetAlllisterner();
           getAlllist();
       });
   
       $(&quot;#getAll&quot;).click(function () {
           location.reload();
       });
       $(&quot;#getActive&quot;).click(function () {
           removeGetAlllisterner();
           getAllActive();
       });
   
       $(&quot;#getCompleted&quot;).click(function () {
           removeGetAlllisterner();
           getAllComplete();
       });
       $(&quot;#toggle-all&quot;).click(function () {
           completeAll();
               removeGetAlllisterner();
               getAlllist();
       });
       //get all element
       getAlllist();
  </code></pre>
  <p>ajax.js</p>
  <pre><code>    async function countAll() {
      const settings = {
          url: RootUrl + &quot;/api/all&quot;,
          method: &quot;GET&quot;,
          timeout: 0,
      };
  
      const response = await $.ajax(settings);
      const data = response.count;
      return data;
  }
  
  async function fetchAllList() {
      const ms = Date.now();
      var myHeaders = new Headers();
      myHeaders.append(&quot;pragma&quot;, &quot;no-cache&quot;);
      myHeaders.append(&quot;cache-control&quot;, &quot;no-cache&quot;);
      var requestOptions = {
          method: &quot;GET&quot;,
          headers: myHeaders,
      };
  
      const response = await fetch(RootUrl + &quot;/api/&quot; + ms, requestOptions);
      const hasils = await response.json();
      const hasil = hasils.hasil;
      return hasil;
  }
  
  export async function getAlllist() {
      const element = [];
      $(&quot;#list-show&quot;).empty();
      const hasil = await fetchAllList();
      console.log(hasil);
      if (hasil.length === 0) {
          $(&quot;#mainsection&quot;).css(&quot;visibility&quot;, &quot;hidden&quot;);
      }
      if (hasil.length &gt; 0) {
          $(&quot;#mainsection&quot;).css(&quot;visibility&quot;, &quot;visible&quot;);
      }
      hasil.map((hasil, index) =&gt; {
          element.push(`&lt;li id=${hasil.id}li class=${
              hasil.active ? &quot;view&quot; : &quot;completed&quot;
          }&gt;
          &lt;div class=&quot;view&quot;&gt;
              &lt;input id=${hasil.id}toogle class=&quot;toggle&quot; type=&quot;checkbox&quot; ${
              hasil.active ? null : &quot;checked&quot;
          } /&gt;
              &lt;label id=${hasil.id}view &gt;${hasil.content}&lt;/label&gt;
              &lt;button id=${hasil.id}destroy class=&quot;destroy&quot;&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;input id=${hasil.id}edit class=&quot;edit&quot; /&gt;
      &lt;/li&gt;`);
          $(document).on(&quot;click&quot;, `#${hasil.id}view`, function () {
              $(`#${hasil.id}li`).removeClass(&quot;view&quot;).addClass(&quot;editing&quot;);
          });
          $(document).on(&quot;click&quot;, `#${hasil.id}destroy`, function () {
              hapus(hasil.id);
              $(`#${hasil.id}li`).remove();
          });
          $(document).on(&quot;keypress&quot;, `#${hasil.id}edit`, function (event) {
              EnterPress(event, hasil.id, hasil.active);
              hasil.content = event.target.value;
          });
          $(document).on(&quot;click&quot;, `#${hasil.id}toogle`, function () {
              if ($(`#${hasil.id}li`).hasClass(&quot;view&quot;)) {
                  changeToComplete(hasil.id);
                  $(`#${hasil.id}li`).removeClass(&quot;view&quot;).addClass(&quot;completed&quot;);
              } else {
                  changeToActive(hasil.id);
                  $(`#${hasil.id}li`).removeClass(&quot;completed&quot;).addClass(&quot;view&quot;);
              }
          });
      });
  
      $(&quot;#list-show&quot;).append(element);
      const count = await countAll();
      console.log(count);
      $(&quot;#count&quot;).text(count);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/vggD4.jpg" rel="nofollow noreferrer">when its click it must update all value and get it from data base</a></p>
  <p>when i check in database is update value success fully and its true</p>
  <p>but fetchalllist function get wrong value event when i check response value in console
  <a href="https://i.stack.imgur.com/7g1qw.jpg" rel="nofollow noreferrer">enter image description here</a></p>