Swap Operations

The mx-swap attribute determines how the response content is inserted into the target element, as specified by the mx-target attribute. If the mx-swap attribute is not provided, it defaults to innerHTML, which replaces the inner HTML of the target element.

Available Swap Methods:

Examples:

Prepend Data:

This code sample below uses the mx-swap="afterbegin" method to insert the response content as the first child of the target element.

PLEASE NOTE: This example uses Trongate's form_button() function. There's no obligation to use Trongate's form helper functions and it's acceptable to work with pure HTML, if you wish.

<?php
$btn_attr = [
  'mx-get' => 'api/data',
  'mx-target' => '#task-list',
  'mx-swap' => 'afterbegin'
];
echo form_button('add_task_btn', 'Add New Task', $btn_attr);
?>

<ul id="task-list">
  <li>Finish project documentation</li>
  <li>Review pull requests</li>
  <li>Update dependencies</li>
</ul>

Here's how you can accomplish the same using pure HTML:

<button mx-get="api/data" 
        mx-target="#task-list" 
        mx-swap="afterbegin">Add New Task</button>

<ul id="task-list">
  <li>Finish project documentation</li>
  <li>Review pull requests</li>
  <li>Update dependencies</li>
</ul>

Clicking the button adds a new task to the top of the task list. For example, if the response text from the server is <li>Schedule team meeting</li>, it will become the first item in the list.

Replace Entire Element:

Here, mx-swap="outerHTML" is used to replace the entire target element with the response content.

Using Trongate's form_button() function:

<?php
$btn_attr = [
  'mx-get' => 'api/data',
  'mx-target' => '#result',
  'mx-swap' => 'outerHTML'
];
echo form_button('replace_btn', 'Replace Element', $btn_attr);
?>

<div id="result">Old Content</div>

For those who prefer working with pure HTML, the equivalent solution is here:

<button mx-get="api/data" 
        mx-target="#result" 
        mx-swap="outerHTML">Replace Element</button>

<div id="result">Old Content</div>

Insert Before Target:

This example demonstrates how to insert content before the target element using mx-swap="beforebegin".

Using Trongate's form_button() form helper:

<?php
$btn_attr = [
  'mx-get' => 'api/data',
  'mx-target' => '#result',
  'mx-swap' => 'beforebegin'
];
echo form_button('insert_before_btn', 'Insert Before', $btn_attr);
?>

<div id="result">Existing Content</div>

Alternatively, the same functionality can be achieved with pure HTML:

<button mx-get="api/data" 
        mx-target="#result" 
        mx-swap="beforebegin">Insert Before</button>

<div id="result">Existing Content</div>

Repopulate Form Field:

In the following example, mx-swap="value" is used to update the value of a form textarea element. This approach can be particularly useful for applications such as code beautifiers, date-pickers or any other tool that modifies form input values.

PLEASE NOTE: The code sample below utilizes a variety of Trongate's form helper functions; however, their usage is entirely optional:

<?php 
$form_attr = [
   'mx-post' => 'beautify/submit_code',
   'mx-target' => '#code-input',
   'mx-swap' => 'value'
];
echo form_open('beautify/submit_code', $form_attr); 
echo form_textarea('my_code', '', array('id' => 'code-input'));
echo form_submit('submit', 'Beautify Code');
echo form_close();
?>

If you prefer a more HTML-centered approach, you could use the following syntax:

<form mx-post="beautify/submit_code" 
      mx-target="#code-input" 
      mx-swap="value">
  <textarea name="my_code" id="code-input"></textarea>
  <input type="submit" name="submit" value="Beautify Code">
</form>