Quick snippet for updating control with SPA

Here are two approaches.

Assuming the following HTML code

<section role="status">
   <span class=" status gray-darker js-status" data-quote_id="123445">approval-pending</span>
</section>

<span class=" status gray-darker js-status" data-quote_id="123445">approval-pending</span>

</section>

Normal Approach

  <script type='spa/axn'  
        bind='click'
        bind_selector='.js-status'
        route_ajax='[aw2.get module.slug].quote-status-form'
        axn='control.update'
       control='trigger.parents.status'></script>

this is the example in you want to bind it to child elements
   <script type='spa/axn'  
        bind='click'
         bind_selector='body'
        bind_children='.js-priority'
        route_ajax='[aw2.get module.slug].form'
        axn='control.update'
       control='trigger.parents.blocked'></script>

bind='click'

bind_selector='.js-status'

route_ajax='[aw2.get module.slug].quote-status-form'

axn='control.update'

control='trigger.parents.status'></script>

this is the example in you want to bind it to child elements

bind='click'

bind_selector='body'

bind_children='.js-priority'

route_ajax='[aw2.get module.slug].form'

axn='control.update'

control='trigger.parents.blocked'></script>

This code will call the module ‘quote-status-form‘ on the click and update the ‘<section>‘ tag with the result of the Ajax request.

Using JavaScript

Similar behaviour can be achieved using the code shown below, The important thing to note is how the ‘o’ object is created.

 <script type="spa/axn" axn="core.run_script">
      $( ".modereation" ).on( "click", "span.js-status", function(event) {
           event.stopPropagation();
            
            var quote_id = $( this ).attr('data-quote_id');
            var o={};
              o.block={};
              o.block.trigger=$(this);
              o.block.target=$(event.target);
              o.block.delegate_target=$(event.delegateTarget);
              o.block.event=event;
              o.block.params=[{
                        	      quote_id: quote_id,
                              }];
              o.block.route_ajax='[aw2.get module.slug].quote-status-form';
              o.route_ajax='[aw2.get module.slug].quote-status-form';
              o.control='trigger.parents.status';
              spa.control.update(o);
              return false;
          });
       </script>

$( ".modereation" ).on( "click", "span.js-status", function(event) {

event.stopPropagation();

var quote_id = $( this ).attr('data-quote_id');

var o={};

o.block={};

o.block.trigger=$(this);

o.block.target=$(event.target);

o.block.delegate_target=$(event.delegateTarget);

o.block.event=event;

o.block.params=[{

quote_id: quote_id,

}];

o.block.route_ajax='[aw2.get module.slug].quote-status-form';

o.route_ajax='[aw2.get module.slug].quote-status-form';

o.control='trigger.parents.status';

spa.control.update(o);

return false;

});

</script>

Updated on Jul 01, 2024