JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<div class="alert alert-success" id="validationSummary" ><button type="button" class="close" data-dismiss="alert">×</button>Success Confirmation.</div>
<fieldset class="form-horizontal input-append">
<legend>Evelyn Jones<span class="badge badge-success">Account Active</span></legend>
<div class="control-group">
<label class="control-label" for="inputEmail">Email Address</label>
<div class="controls">
<input name="ctl00$ctl00$PortalContent$PortalContent$txtEmailAddress" type="text" value="[email protected]" id="txtEmailAddress" disabled="disabled" class="aspNetDisabled span3">
<a id="lnkEditEmailAddress" class="btn" data-attr="editEmailAddress"><i class="icon-edit"></i></a>
</div>
</div>
<div class="control-group">
<label class="control-label" for="txtUserName">Username</label>
<div class="controls">
<input name="ctl00$ctl00$PortalContent$PortalContent$txtUserName" type="text" value="jonharding123" id="txtUserName" disabled="disabled" class="aspNetDisabled span3">
<a id="lnkEditUsername" class="btn" data-attr="edit" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEditUsername','')"><i class="icon-edit"></i></a>
<a id="lnkEmailUsername" class="btn" data-attr="email" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEmailUsername','')"><i...
CSS
.input-append, .input-prepend { margin-bottom: 0px; }
fieldset legend .badge { float: right; margin-top:10px; }
fieldset.input-append .alert { margin-top:10px; font-size: 12px; }
.control-group { clear: both; }
JavaScript
String.prototype.parseWithJSONDate = function () {
/// <summary>
/// Parses a JSON string and converts ISO date strings into
/// native javascript data objects.
/// </summary>
/// <returns type="String" />
return this.replace(/\/Date\((.*?)\)\//gi, 'new Date($1)');
};
serviceProxy = function (serviceUrl, options) {
/// <summary>
/// Generic Service Proxy class that can be used to
/// call Ajax-enabled services.
/// </summary>
/// <param name="serviceUrl" type="String">
/// The Url of the service ready to accept the method name
/// should contain trailing slash (or other URL separator ?,&)
/// </param>
var me = this;
this.async = false;
this.serviceUrl = serviceUrl;
this.timeout = 100000;
this.contentType = 'application/json; charset=utf-8';
this.requestType = 'POST';
this.dataType = 'json';
// Allow optional overrides
$.extend(me, typeof (serviceUrl) === 'object' ? serviceUrl : options);
return {
invoke: function (method, params, successCallback, errorCallback, completeCallback) {
/// <summary>
/// Calls a WCF/ASMX service and returns the result.
/// </summary>
/// <param name="method" type="String">
/// A string naming the service method to call.
/// </param>
/// <param name="params" optional="true" type="Object">
/// An object representing the parameters to pass.
/// </param>
/// <param name="successCallback" optional="true" type="Function">
/// The callback function called when the AJAX request succeeds.
/// </param>
/// <param name="errorCallback" optional="true" type="Function">
/// The callback function called when the AJAX request fails.
/// </param>
/// <param name="completeCallback" optional="true" type="Function">
...