Skip to content

Instantly share code, notes, and snippets.

@nl
Created June 21, 2013 21:11
Show Gist options
  • Save nl/5834348 to your computer and use it in GitHub Desktop.
Save nl/5834348 to your computer and use it in GitHub Desktop.
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StoryPlayer</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/additional-methods.min.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<![endif]-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body style="">
<div class="container-fluid">
<div class="row-fluid">
<article class="span12">
<h1>Users</h1>
<div id="outcomeFormDialog" class="modal hide fade in" role="dialog" style="display: block; " aria-hidden="false">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Change password</h3>
</div>
<div class="modal-body">
<form data-async="" data-target="#outcomeFormDialog" method="POST" novalidate="novalidate">
<div class="control-group error">
<label class="control-label" for="password">New password</label>
<div class="controls">
<input type="password" name="password" class="input-xlarge valid"><label for="password" class="error" style="display: none; ">This field is required.</label>
</div>
</div>
<button class="btn" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Change password</button>
</form>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Account ID</th>
<th>Username</th>
<th>Email</th>
<th>Date</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3fcca00f7905ec982916b4b00201a6f5</td>
<td>arnauld</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:29.398Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>3fcca00f7905ec982916b4b00201af5c</td>
<td>demo</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:29.401Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>3</td>
<td>3fcca00f7905ec982916b4b00201b61d</td>
<td>thomas</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:29.406Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>4</td>
<td>3fcca00f7905ec982916b4b00201ee4f</td>
<td>edouard</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.328Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>5</td>
<td>3fcca00f7905ec982916b4b00201e81b</td>
<td>test2</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.321Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>6</td>
<td>3fcca00f7905ec982916b4b00201ec84</td>
<td>storyplayer</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.326Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>7</td>
<td>3fcca00f7905ec982916b4b00201fd37</td>
<td>test1</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.332Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>8</td>
<td>3fcca00f7905ec982916b4b0020217a7</td>
<td>nico</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.333Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>9</td>
<td>3fcca00f7905ec982916b4b0020201d1</td>
<td>nico2</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.335Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>10</td>
<td>3fcca00f7905ec982916b4b0020210ae</td>
<td>test3</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.342Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>11</td>
<td>3fcca00f7905ec982916b4b00201f002</td>
<td>test_sp</td>
<td>[email protected]</td>
<td>2013-04-17T21:06:30.336Z</td>
<td>
<a data-toggle="modal" data-id="ISBN-001122" title="Change" class="openChangePasswordDialog btn btn-primary" href="#outcomeFormDialog"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".openChangePasswordDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
var validator = $('#outcomeFormDialog form').validate({
rules: {
password: {
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group')
.removeClass('success').addClass('error');
},
success: function (element) {
element.addClass('valid').closest('.control-group')
.removeClass('error').addClass('success');
},
submitHandler: function (form) {
$.ajax({
type: $(form).attr('method'),
url: "../php/client/json.php",
data: $(form).serialize(),
success: function (data, status) {
$(this).modal('hide');
}
});
return false;
}
});
$('#outcomeFormDialog').on('hidden', function () {
$('#outcomeFormDialog form .control-group').removeClass('success').removeClass('error');
validator.resetForm();
$('input[type="text"], input[type="password"]').val('')
});
});
</script>
</article>
</div>
</div>
<div class="modal-backdrop fade in"></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment