Loading full page using SPA

We have two approaches, The First is mapping the link directly using Ajax, as shown below

<a href="https://www.wpoets.com/plot/tasks" class="" bind="click" route_ajax="tasks" control="main" axn="page.update" document_title="Tasks">
  <span>Tasks</span>
</a>

<span>Tasks</span>

</a>

by adding axn=page.update: you can make a link to send an Ajax request to the “route_ajax” module and update the response to the page.

The second approach is using JavaScript, assuming the following HTML snippet

<a href="https://www.wpoets.com/sonnet/home" data-module="home" class="btn ajax_menu">
         	Home 
         </a>

Home

</a>

You can write the following code to achieve a similar result as the first approach

<script type="spa/axn" axn="core.run_script">      
      $('.ajax_menu').click(function(e){
      	spa.loader.show();
      	e.preventDefault();
      	spa.page.update({
        	route_ajax: $(this).data('module'),
        	href: $(this).attr('href')
        }).then(function(){
        	spa.loader.hide();
        });
      });
    </script>

$('.ajax_menu').click(function(e){

spa.loader.show();

e.preventDefault();

spa.page.update({

route_ajax: $(this).data('module'),

href: $(this).attr('href')

}).then(function(){

spa.loader.hide();

});

</script>

here is another sample in case we can’t add data-module to anchor tage

    <script axn='core.run_script' type="spa/axn">
              $( ".left-side-bar-nav-links" ).on( "click", "a", function(event) {	 
                spa.loader.show();	 
                var href = $(this).attr('href');	 
                route_href=href.replace(spa.settings.path, "");	 	 
                if(route_href.length===0)
                	route_href='home';
                  
                event.preventDefault();	 
                spa.page.update({	 
                  route_module: route_href,	 
                  href: href	 
                }).then(function(){	 
                  spa.loader.hide();	 
                });	 
                return false;	
              });
         </script>

$( ".left-side-bar-nav-links" ).on( "click", "a", function(event) {

spa.loader.show();

var href = $(this).attr('href');

route_href=href.replace(spa.settings.path, "");

if(route_href.length===0)

route_href='home';

event.preventDefault();

spa.page.update({

route_module: route_href,

href: href

}).then(function(){

spa.loader.hide();

});

return false;

});

</script>

Updated on May 18, 2024