#set($username = $context.getRequestParameter("username"))
#set($productname = $context.getRequestParameter("productname"))
#set($productid = $context.getRequestParameter("productid"))

<h2>Section 1 (Forms)</h2>

<!-- Username Update Form -->
Update with DATA
<form data-ajax-post data-target="#section1" action="./section1.html?oemaxlevel=1" method="POST">
	<label>Change Username:</label>
	<input type="text" name="username" value="$!username" />
	<button type="submit">Update Username</button>

	<p>Local Username Display: <span >$!username</span></p>
</form>

<hr>

UPDATE with DOM:
<!-- Product Name Update Form -->
<form data-ajax-post data-target="#section1" action="./section1.html?oemaxlevel=1" method="POST">
	<label>Change Product Name:</label>
	<input type="text" name="productname" data-live-match="product-$productid-name" value="$!productname" />
	<input type="hidden" name="productid" value="$!productid" />
	<button type="submit">Update Product</button>

	<p>Local Product Display: <span data-live-match="product-$productid-name">$!productname</span></p>
</form>

#if($username)
<!-- Hidden area  -->
<div data-live-match="some-html" class="d-none" >
	Great to see you <h1 data-live-match="activeusername"></h1> 
</div>

#end

<!-- UI sync stuff -->
<div class="d-none" data-live-match-remove>	
	$pages.include("./menu.html")
</div>
<!-- Server could provide the json also -->
<script type="text/javascript" data-live-match-remove>

	var updatedata = {
		"tree-node-123-name": "Renamed via JSON"
		#ifnotnull($username)
			,
		"activeusername": "$username"
		#end
	};
</script>