Neuromantic
New Coder
Hope that someone can push me in the right direction. Below is some sample code. Aim is to update a variable and the display that value several places within an html page using JS and Ajax...
I have tried to make the code self explanatory...
Some syntax is from WebDNA language but please abstract from that.
And the parse file...
I have tried to make the code self explanatory...
Some syntax is from WebDNA language but please abstract from that.
HTML:
<!DOCTYPE html>
<html lang="da-dk">
<!--HAS_WEBDNA_TAGS-->
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$( document ).on("submit", "form", function(e){
var formID = $( this ).closest('form').attr('name');
var data = $( this ).serializeArray();
console.log(data + " " + formID);
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'parse.dna', // the url where we want to POST
data : data, // our data object
dataType : 'text', // what type of data do we expect back from the server
success : function (data, status)
{
$('#' + formID).html(data); //content loads here
console.log(data);
},
error: function (xhr, desc, err)
{
console.log("error");
}
})
e.preventDefault();
return false;
});
</script>
</head>
<body>
<div id="wrapper" style="text-align: center; background-color: white; padding-top: 25px;">
<form name="card_1" action="">
<input name="query" value="1" type="hidden">
<button>Refresh variable A</button>
</form>
<form name="card_2" action="">
<input name="query" value="2" type="hidden">
<button>Refresh variable B</button>
</form>
<form name="card_3" action="">
<input name="query" value="3" type="hidden">
<button>Refresh variable C</button>
</form>
<div id="card_1" style="border: 1px solid black; padding: 10px; margin: 10px;">
Box 1, show Variable A
</div>
<div id="card_2" style="border: 1px solid black; padding: 10px; margin: 10px;">
Box 2, show Variable B
</div>
<div id="card_3" style="border: 1px solid black; padding: 10px; margin: 10px;">
Box 3, show Variable C
</div>
<div style="border: 1px solid black; padding: 10px; margin: 10px;">
Box 4, show Variable A
<br><br>
When a variable is updated it should be possible to show the result in more than one box.
<br>
Example: When updating 'variable a' then the content of the First and Fourth box should be uddated with that specific value
</div>
</div>
</body>
</html>And the parse file...
HTML:
<!--HAS_WEBDNA_TAGS-->
[showif [query]=1]
<div id="card_[query]">
Box 1, show Variable A: [time]
</div>
[/showif]
[showif [query]=2]
<div id="card_[query]">
Box 2, show Variable B: [time]
</div>
[/showif]
[showif [query]=3]
<div id="card_[query]">
Box 3, show Variable C: [time]
</div>
[/showif]
