pp-append-params

The pp-append-params attribute is used to append query parameters to the URL using anchor tags. This attribute is particularly useful when you need to dynamically add query parameters to the URL based on user interactions or other conditions. By utilizing the pp-append-params attribute, you can effortlessly modify the URL, enabling you to create highly dynamic and interactive web applications.

The default behavior of the a tag is to navigate to the specified URL. However, when using the pp-append-params attribute, the URL is modified to include the appended query parameters before navigating to the specified URL.

Example Usage using anchor tags

Append Hello World 
<a class="link" href="?appended=helloWorld" pp-append-params="true">Append Hello World</a>
  <a class="link" href="?appended=helloWorld&pphp=is-awesome" pp-append-params="true">Append Hello World</a>

Note: The href attribute is used to specify the URL to navigate to, while the pp-append-params attribute is used to append the specified query parameters to the URL before navigating to it.

Example Usage using input elements

Similarly, the pp-append-params attribute can be used with input elements to append query parameters to the URL based on user input. This can be particularly useful when you need to dynamically modify the URL based on user interactions with input elements.

To ensure the input works correctly, you need to pass the event that triggers the appending of the input value to the URL. In this example, we use the oninput event to pass the event to the function that appends the input value to the URL. If you want to control the timing of the request to the server, use the pp-debounce="500" attribute. This attribute helps to manage the frequency of requests, making the process more efficient by preventing a request for each character typed.

Example Usage using javascript

<input class="border rounded-md" type="text" oninput="ppInputAppend" pp-append-params="true" name="appended" placeholder="Your message" />
<script>
    function ppInputAppend(data) {
        console.log("🚀 ~ ppInputAppend ~ data:", data)
    }
</script>

Example Usage using PHP

<?php

use Lib\StateManager;
use Lib\Request;

$appendedParams = Request::$params;
$appendedParamsUri = Request::$uri;
echo "appendedParamsUri: $appendedParamsUri";
echo '<pre>';
print_r($appendedParams);
echo '</pre>';

$inputValue = StateManager::getState('inputValue', $appendedParams->appended);
function ppInputAppend($data)
{
    print_r($data);
    StateManager::setState('inputValue', $data->appended);
}

?>

<input class="border rounded-md p-1" type="text" oninput="ppInputAppend" pp-append-params="true" name="appended" placeholder="Your message" value="<?= $inputValue ?>" />