How to keep elements non-refreshed

Asked
Active3 hr before
Viewed126 times

9 Answers

elements
90%

Create a 'master' page, that we're going to call index.html from now on.,So, our index must have the static part of our page, e.g menu, logo, footer etc.,Simulate that our links are effectively transfering between pages using the History API:, Bash Regex - string should not start and end with a dot

In the example, the pages are loaded in from a div within the page but could be used to load another URL or file:

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if ($('.' + link).length) {
      $('.viewport span.body').html($('.' + link).html());
   }
});
load more v
88%

I also have to mention that for the menu I've tried to keep the state using jQuery-Storage-API and storage=jQuery.sessionStorage; as you can see in mynewmenu.js file but that will not solve the non-refreshing elements problem.,The main goal is to keep non-refreshed the logotext <div class="small-7 medium-4 columns logo"> and the menu <nav class="pagedMenu" role="navigation">,without clipping on page refresh or while the content is loading from a page to another. Also, the menu state should be preserved from a page to another. ,The main goal is to keep non-refreshed the logotext and the menu ,without clipping on page refresh or while the content is loading from a page to another. Also the menu state should be preserved from a page to another.,demo: http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/

Also in Chrome console there is an error:

Uncaught SyntaxError: Unexpected token;
(anonymous
   function) @ ajaxify.js ? ver = 4.3 .1 : 175
n.extend.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.fn.n.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
$.bind.$.ajax.success @ ajaxify.js ? ver = 4.3 .1 : 169
n.Callbacks.j @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.Callbacks.k.fireWith @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
x @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4

At this point we have ajax.min.js file updated with these lines:

(function($) {

   jQuery(document).ready(function() {
      jQuery('#page-container').ajaxify({
         requestDelay: 400,
         forms: false
      });
   });

})(jQuery);
load more v
72%

The main goal is to keep non-refreshed the logotext and the menu ,without clipping on page refresh or while the content is loading from a page to another. Also the menu state should be preserved from a page to another.,The main goal is to keep non-refreshed the logotext <div> and the menu <nav role="navigation">,without clipping on page refresh or while the content is loading from a page to another. Also, the menu state should be preserved from a page to another. ,And then, in our index.html page, we see if there is any page in the sessionStorage, and we load it, if there is, otherwise we load our home page.,In these conditions, on menu click, the links are changed (like it should), menu/ logotext elements seems to working almost fine (sometimes get skippy changing position), but the content is not loading correctly in all cases; Same here, everything is getting back to normal on manual page refresh (f5), but doesn't help.

Also in Chrome console there is an error:

Uncaught SyntaxError: Unexpected token;
(anonymous
   function) @ ajaxify.js ? ver = 4.3 .1 : 175
n.extend.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.fn.n.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
$.bind.$.ajax.success @ ajaxify.js ? ver = 4.3 .1 : 169
n.Callbacks.j @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.Callbacks.k.fireWith @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
x @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4

At this point we have ajax.min.js file updated with these lines:

(function($) {

   jQuery(document).ready(function() {
      jQuery('#page-container').ajaxify({
         requestDelay: 400,
         forms: false
      });
   });

})(jQuery);

That done, now we must change our links to use AJAX instead of doing full refresh:

/* we add a 'click' event handler to our menu */
document.getElementById('menu-menu-2').addEventListener('click', function(e) {
   var el = e.target;

   /* then, we see if the element that was clicked is a anchor */
   if (el.tagName === 'A') {
      /* we prevent the default functionality of the anchor (i.e redirect to the page) */
      e.preventDefault();
      /* we show our spinner, so the user can see that something is loading */
      spinner.classList.remove('hidden');

      /* and we call our AJAX function, passing a function as the callback */
      ajax(el.href, function(xhr) {
         /* we get our main div, and we replace its HTML to the response that came
            from the AJAX request */
         document.getElementById('main').innerHTML = xhr.responseText;
         /* since the request was finished, we hide our spinner again */
         spinner.classList.add('hidden');
      });
   }
});

Simulate that our links are effectively transfering between pages using the History API:

/* inside our ajax callback, we save the fake-redirect we made into the pushState */
ajax(el.href, function(xhr) {
   document.getElementById('main').innerHTML = xhr.responseText;

   /* save the new html, so when the user uses the back button, we can load it again */
   history.pushState({
      html: main.innerHTML,
      title: el.textContent + '| neuegrid'
   }, '', el.href);

   /* (...) */
});

/* and outside it, we add a 'popstate' event handler */
window.addEventListener('popstate', function(e) {
   /* so, if we've saved the state before, we can restore it now */
   if (e.state) {
      document.getElementById('main').innerHTML = e.state.html;
      document.title = e.state.title;
   }
});

So we create a redirect.js file, and we reference it in all of our subpages:

/* save the page that the user tried to load into the sessionStorage */
sessionStorage.setItem('page', location.pathname);
/* and them, we redirect him to our main page */
location.replace('/');

And then, in our index.html page, we see if there is any page in the sessionStorage, and we load it, if there is, otherwise we load our home page.

var page = sessionStorage.getItem('page') || 'home';
/* we look into the menu items, and find which has an href attribute 
   ending with the page's URL we wanna load */
document.querySelector('#menu-menu-2 > li > a[href$="' + page + '"').click();

Note: Just for reference, this is our ajax function:

function ajax(url, callback, method, params) {
   if (!method) method = 'GET';

   var xhr = new XMLHttpRequest();
   xhr.open(method, url);

   if (callback) xhr.addEventListener('load', function() {
      callback.call(this, xhr);
   });

   if (params) {
      params = Object.keys(params).map(function(key) {
         return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
      xhr.send(params);
   } else {
      xhr.send();
   }
}
load more v
65%

I also have to mention that for the menu I've tried to keep the state using jQuery-Storage-API and storage=jQuery.sessionStorage; as you can see in mynewmenu.js file but that will not solve the non-refreshing elements problem.,The main goal is to keep non-refreshed the logotext and the menu ,without clipping on page refresh or while the content is loading from a page to another. Also the menu state should be preserved from a page to another.,At this point we have ajax.min.js file updated with these lines:,Everything is getting back to normal on page refresh but doesn't help at all, being useless.

Also in Chrome console there is an error:

Uncaught SyntaxError: Unexpected token;
(anonymous
   function) @ ajaxify.js ? ver = 4.3 .1 : 175
n.extend.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.fn.n.each @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
$.bind.$.ajax.success @ ajaxify.js ? ver = 4.3 .1 : 169
n.Callbacks.j @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
n.Callbacks.k.fireWith @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 2
x @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery - 2.1 .4.min.js ? ver = 2.1 .4 : 4

At this point we have ajax.min.js file updated with these lines:

(function($) {

   jQuery(document).ready(function() {
      jQuery('#page-container').ajaxify({
         requestDelay: 400,
         forms: false
      });
   });

})(jQuery);
load more v
75%

Local state is not preserved for class components (only function components and Hooks preserve state).,The file you're editing might have other exports in addition to a React component.,Fast Refresh preserves React local state in function components (and Hooks) by default.,As more of your codebase moves to function components and Hooks, you can expect state to be preserved in more cases.

load more v
40%

These will create a document and immediately refresh the index so it is visible:,The Index, Update, Delete, and Bulk APIs support setting refresh to control when changes made by this request are made visible to search. These are the allowed values:, Never start multiple refresh=wait_for requests in a row. Instead batch them into a single bulk request with refresh=wait_for and Elasticsearch will start them all in parallel and return only when they have all finished. , The more changes being made to the index the more work wait_for saves compared to true. In the case that the index is only changed once every index.refresh_interval then it saves no work.

PUT / test / _doc / 1 ? refresh {
   "test": "test"
}
PUT / test / _doc / 2 ? refresh = true {
   "test": "test"
}
load more v
22%

Amazon Redshift currently doesn't support incremental refresh for materialized views that are defined with a query using any of the following SQL elements: ,Depending on the input argument type, Amazon Redshift still supports incremental refresh for materialized views for the following functions with specific input argument types: DATE (timestamp), DATE_PART (date, time, interval, time-tz), DATE_TRUNC (timestamp, interval). ,Some operations in Amazon Redshift interact with materialized views. Some of these operations might force a REFRESH MATERIALIZED VIEW operation to fully recompute the materialized view even though the query defining the materialized view only uses the SQL features eligible for incremental refresh. For example: ,External tables referenced as base tables in the query that defines the materialized view.

Syntax

REFRESH MATERIALIZED VIEW mv_name
load more v
60%

The refresher provides pull-to-refresh functionality on a content component. The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data.,ion-refresher-content,Refresherion-refresherion-refresher-content,The minimum distance the user must pull down until the refresher will go into the refreshing state. Does not apply when the refresher content uses a spinner, enabling the native refresher.

<!-- Default Refresher -->
<ion-content>
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
   <ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
      <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
      </ion-refresher-content>
   </ion-refresher>
</ion-content>
load more v
48%

Surprisingly if i keep mydiv also its working while it should not have to. but you are right i need to put “container” instead of “mydiv”.,I have tried this. its not working only. ,SpikeZ pls enlighten… why does #mydiv work? Instead of #Container? In case I ever go into the whole jQuery thing…,I suck at JS but if this were my script I’d try fixing those things first and then see if it still didn’t work.

Here is the code snippet from the page containing the data I’m looking to refresh when a user click the “update” form button:

<div id="data">
   <table cellpadding="0" cellspacing="2">
      <tr>
         <th>column 1</th>
         <th>column 2</th>
         <th>column 3</th>
         <th>column 4</th>
      </tr>
      <?php echo getList($currentpage, $highlight); ?>
   </table>
</div>

<p>
<form method="link" action="javascript:document.location.reload()"><input type="submit" value="update" onClick="this.value = 'updating...'"></form>
</p>
load more v

Other "elements-undefined" queries related to "How to keep elements non-refreshed"