Skip to content

Instantly share code, notes, and snippets.

@ilmoralito

ilmoralito/app

Created October 10, 2014 14:52
Show Gist options
  • Save ilmoralito/dbe4c7958d03f864e792 to your computer and use it in GitHub Desktop.
Save ilmoralito/dbe4c7958d03f864e792 to your computer and use it in GitHub Desktop.
Download ZIP
passingDataToIds
Raw
app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-family: sans-serif;
width: 960px;
font-size: 12px;
margin: 0 auto;
}
table {
float: left;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><a href="#" class="trigger" data-name="hutch" data-email="hutch@gmail.com" data-city="Leon">Link1</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="nami" data-email="nami@gmail.com" data-city="Esteli">Link2</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="peluso" data-email="peluso@gmail.com" data-city="Granada">Link3</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="ready" data-email="ready@gmail.com" data-city="Managua">Link4</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="gataLoca" data-email="gataLoca@gmail.com" data-city="Masaya">Link5</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="coco" data-email="coco@gmail.com" data-city="Leon">Link6</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="bointa" data-email="bointa@gmail.com" data-city="Chontales">Link7</a></td>
</tr>
<tr>
<td><a href="#" class="trigger" data-name="purun" data-email="purun@gmail.com" data-city="Chinandega">Link8</a></td>
</tr>
</tbody>
</table>
<div id="dialog">
<table>
<tbody>
<tr>
<td>Name</td>
<td id="name">Dummy text</td>
</tr>
<tr>
<td>Email</td>
<td id="email">Dummy text</td>
</tr>
<tr>
<td>City</td>
<td id="city">Dummy text</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery.min.js"></script>
<script>
$(".trigger").on("click", function (e) {
e.preventDefault()
var data = $(this).data()
$("#name").html(data.name)
$("#email").html(data.email)
$("#city").html(data.city)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment