Category Archives: JQuery/Javascript

AJAX with JQuery

Posted on by

Purpose: Does a get request to retrieve content of Studentlist.html and place content into a div with id “studentDiv”. Click on the student ID and JQuery will put the student ID into the textbox with id “studentID”

default.html

<!DOCTYPE html>
<html>
<head>
	<script src="jquery-1.9.1.js">
	</script>
	<script>
	    $(document).ready(function () {
	        $.get('studentlist.html', function (data) {
	            $('#studentDiv').html(data);

	            $('.studentid_link').click(function () {
	                $("#studentID").val($(this).text());
	            });
	        });
	    });
	</script>
</head>
<body>
    StudentID: <input type="text" id="studentID" /><br />
	<div id="studentDiv" style="height:100px;width:120px; background-color:Yellow; overflow:auto;">
	</div>
</body>
</html>

Studentlist.html

<table border="1">
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">1</a></td>
		<td>John</td>
	</tr>
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">2</a></td>
		<td>Sam</td>
	</tr>
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">3</a></td>
		<td>Samantha</td>
	</tr>
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">4</a></td>
		<td>Simon</td>
	</tr>
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">5</a></td>
		<td>Bertina</td>
	</tr>
	<tr>
		<td><a href="javascript:void(0)" class="studentid_link">6</a></td>
		<td>Isabella</td>
	</tr>
</table>