ChrisMoney/Server-JS-Async.txt

## Server-JS-Async.txt
--WebForm

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

</head>

<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Get Data
  <span class="popuptext" id="popupData">A Simple Popup!</span>
</div>

<script>

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("popupData");
  popup.classList.toggle("show");
}

</script>

</body>
--JS File

Function displayData(id) {

// first draw out UI

var parentDiv = document.getElementById("popup");
var table = "<table>";
jsonObj = obj


// Then go and get the data to populate the UI
var xhr = new XMLHttpRequest;
xhr.open("GET", serverSideFile.cs?Event=GetData&ID=id);
xhr.send();

xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

    var response = xhr.responseText;

    var i=0;
    for (var x in response){
      table += "<tr><td>x[Name]</td></tr>";
    }
}
    };
}
};

table += "</table>"
parentDiv.append(table);

}

--ServerSideFile

Int id = Request.QueryString(“ID).ToString();

If (Event == “GetData”) {

Object obj = New Factory().GetData(id);
string jsonObj = javaScriptSerializer.Serialize(obj);
Response.Write(jsonObj)
Response.End();

}

-- HTML Container File
popupContainer.html

<div id="parentContainer">

</div>
	--WebForm

	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	/* Popup container - can be anything you want */
	.popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	/* The actual popup */
	.popup .popuptext {
	visibility: hidden;
	width: 160px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -80px;
	}

	/* Popup arrow */
	.popup .popuptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
	}

	/* Toggle this class - hide and show the popup */
	.popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	}

	/* Add animation (fade in the popup) */
	@-webkit-keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
	}

	@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
	}
	</style>

	</head>

	<body style="text-align:center">

	<h2>Popup</h2>

	<div class="popup" onclick="myFunction()">Get Data
	<span class="popuptext" id="popupData">A Simple Popup!</span>
	</div>

	<script>

	// When the user clicks on div, open the popup
	function myFunction() {
	var popup = document.getElementById("popupData");
	popup.classList.toggle("show");
	}

	</script>

	</body>
	--JS File

	Function displayData(id) {

	// first draw out UI

	var parentDiv = document.getElementById("popup");
	var table = "<table>";
	jsonObj = obj



	// Then go and get the data to populate the UI
	var xhr = new XMLHttpRequest;
	xhr.open("GET", serverSideFile.cs?Event=GetData&ID=id);
	xhr.send();

	xhr.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {

	var response = xhr.responseText;

	var i=0;
	for (var x in response){
	table += "<tr><td>x[Name]</td></tr>";
	}
	}
	};
	}
	};

	table += "</table>"
	parentDiv.append(table);

	}

	--ServerSideFile

	Int id = Request.QueryString(“ID).ToString();

	If (Event == “GetData”) {

	Object obj = New Factory().GetData(id);
	string jsonObj = javaScriptSerializer.Serialize(obj);
	Response.Write(jsonObj)
	Response.End();

	}

	-- HTML Container File
	popupContainer.html

	<div id="parentContainer">

	</div>