ps: here’s the entire code of a test page I’m using where I still get the wonky behavior. It still involves integration with our database and stuff so you can’t really run this code as is and have it work, but maybe it’ll lead to some insight…
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VuTrac Directional Survey Management</title>
<link rel="icon" type="image/png" href="../../public/img/Etech82X75.png"/>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- in case you wonder: This is the cool-kids-protocol-free way to load jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/application.js"></script>
<link rel="stylesheet" href="http://vutrac.local/public/css/vutrac-basic-styles.css" type="text/css" />
<link rel="stylesheet" href="http://vutrac.local/public/js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="http://vutrac.local/public/js/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<!-- 2 lines below added by Aaron Trumm for mobile responsiveness -->
<link rel="stylesheet" href="http://vutrac.local/public/js/jquery_mobile/jquery.mobile-1.4.5.min.css" type="text/css" />
<script type="text/javascript" src="http://vutrac.local/public/js/jquery_mobile/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxresponse.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxtouch.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxexpander.js"></script>
<!-- line below added by Aaron Trumm for mobile responsiveness -->
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxmaskedinput.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxpasswordinput.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdockpanel.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxchart.api.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var response = new $.jqx.response();
var device = response.device;
var type = device.type;
var viewPort = response.viewPort;
//var plotWidth = 0;
//var plotHeight = 0;
if(viewPort.width > 1000){
plotHeight = (viewPort.width/3)*.47+'px';
}
else if (viewPort.width < 600) {
plotHeight = viewPort.width*.47+'px';
}
else {
plotHeight = '280px';
}
$("#spiderPlot").css("height",plotHeight);
$("#vsPlot").css("height",plotHeight);
$("#planElements").css("height",plotHeight);
var resizeFunction = function () {
response.refresh();
var viewPort = response.viewPort;
if(viewPort.width > 1000){
plotHeight = (viewPort.width/3)*.47+'px';
}
else if (viewPort.width < 600) {
plotHeight = viewPort.width*.47+'px';
}
else {
plotHeight = '280px';
}
$("#spiderPlot").css("height",plotHeight);
$("#vsPlot").css("height",plotHeight);
$("#planElements").css("height",plotHeight);
}
response.resize([resizeFunction]);
initializeFormControls();
var urlBase = 'http://vutrac.local/';
var wellID = '1';
$("#WellID").val(wellID);
var source =
{
datatype: "json",
datafields: [
{ name: 'WellID' },
{ name: 'WellName' },
{ name: 'API' },
{ name: 'CompanyUWI'},
{ name: 'Easting' },
{ name: 'Northing' },
{ name: 'Latitude' },
{ name: 'Longitude'},
{ name: 'CRS'}
],
id: 'well_id',
url: urlBase + 'well/wellheader_data/' + wellID
};
var wellAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,
loadComplete: function () {
// get data records.
var record = wellAdapter.records[0];
$("#WellID").val(record.WellID);
$("#WellName").val(record.WellName);
$("#API").val(record.API);
$("#CompanyUWI").val(record.CompanyUWI);
$("#Easting").val(record.Easting);
$("#Northing").val(record.Northing);
$("#Latitude").val(record.Latitude);
$("#Longitude").val(record.Longitude);
$("#CRS").val(record.CRS);
}
}
);
/**Goes to the Survey Index page with the correct WellID*/
$('#Surveys').on('click', function (event)
{
window.location.href = urlBase + "survey/index/" + wellID;
});
/**Goes to the Plans Index page with the correct WellID*/
$('#Plans').on('click', function (event)
{
window.location.href = urlBase + "plan/index/" + wellID;
});
$('#SpiderPlot').on('click', function (event)
{
window.location.href = urlBase + "well/wellheaderSpiderPlot/" + wellID;
});
$('#VSPlot').on('click', function (event)
{
window.location.href = urlBase + "well/wellheaderVSPlot/" + wellID;
});
$('#PlanElements').on('click', function (event)
{
window.location.href = urlBase + "well/wellheaderPlanElements/" + wellID;
});
/**Update or ADD the row when the user clicks the 'Save' button on the well header form in the splitter.**/
$("#Save").click(function () {
var row = { WellID: $("#WellID").val(), WellName: $("#WellName").val(), API: $("#API").val(),
CompanyUWI: $("#CompanyUWI").val(), Easting: $("#Easting").val(), Northing: $("#Northing").val(),
Latitude: $("#Latitude").val(), Longitude: $("#Longitude").val(), CRS:$("#CRS").val()};
// synchronize with the server - send add command
$.ajax({
type: "POST",
dataType: 'json',
url: urlBase + 'well/update',
data: row,
success: function (data, status, xhr) {
// add command is executed.
if ($("#WellID").val()=="add") {
window.location = urlBase + 'well/wellheader/' + data;
}
},
error: function () {
// cancel changes.
//commit(false);
}
});
disableFormControls();
});
/**BUTTON HANDLERS
*
* Clicking the Cancel button when the value is Edit enables the form for editing.
* Need to add 'permission to edit' check to show this button at all.
* Clicking the Cancel button when the value is Cancel disables editing.
*/
$('#Cancel').on('click', function (event)
{
if( $("#Cancel").val() == 'Edit') {
enableFormControlsForEditing();
} else if( $("#Cancel").val() == 'Cancel') {
disableFormControls();
}
});
/**MENU ITEM HANDLERS
*
* Open the add well form with no data in it
*/
// $("#AddWellMenuItem").click(function () {
// $("#WellID").val('add');
// $("#WellName").jqxInput({disabled: false});
// $("#WellName").val('');
// $("#API").jqxInput({disabled: false});
// $("#API").val('');
// $("#CompanyUWI").jqxInput({disabled: false});
// $("#CompanyUWI").val('');
// $("#Save").show();
// $("#Cancel").val('Cancel');
// });
});
function initializeFormControls() {
var theme = 'energyblue';
var wellID = '1';
// get the epsg_coordinatereferencesystem lookup data
var crsSource =
{
datatype: "json",
datafields: [
{ name: 'CrsID' },
{ name: 'CrsName' }
],
id: 'epsg_crs_id',
url: 'http://vutrac.local/well/fillEpsgCrsDropdown'
};
var crsAdapter = new $.jqx.dataAdapter(crsSource, {
autoBind: true,
async: false
});
$("#jqxpanel").jqxPanel({theme: theme, width: '97%', height: '97%'});
// Create a jqxMenu
$("#appMenu").jqxMenu({theme: theme, width: '100%'});
$("#WellName").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#API").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#CompanyUWI").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#Easting").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#Northing").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#Latitude").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#Longitude").jqxInput({disabled: (wellID == 'add' ? false : true)});
$("#CRS").jqxDropDownList({
source: crsAdapter,
displayMember: 'CrsName',
valueMember: 'CrsID',
theme: theme,
width: "96%",
placeHolder: "Empty. Please Select:",
enableBrowserBoundsDetection: true,
itemHeight: 50,
disabled: (wellID == 'add' ? false : true),
/*
renderer: function (index, label, value) {
var table = '<hr>';
return table;
}
*/
});
$("#Surveys").jqxButton({});
$("#Plans").jqxButton({});
$("#Cancel").jqxButton({});
$("#Save").jqxButton({});
$("#SpiderPlot").jqxButton({});
$("#VSPlot").jqxButton({});
$("#PlanElements").jqxButton({});
//$("#Save").hide();
(wellID == 'add' ? $("#Save").show() : $("#Save").hide());
}
function enableFormControlsForEditing() {
$("#Save").show();
$("#Cancel").val('Cancel');
$("#WellName").jqxInput({disabled: false});
$("#API").jqxInput({disabled: false});
$("#CompanyUWI").jqxInput({disabled: false});
$("#Easting").jqxInput({disabled: false});
$("#Northing").jqxInput({disabled: false});
$("#Latitude").jqxInput({disabled: false});
$("#Longitude").jqxInput({disabled: false});
$("#CRS").jqxDropDownList({disabled: false});
}
function disableFormControls() {
$("#Save").hide();
$("#Cancel").val('Edit');
$("#WellName").jqxInput({disabled: true});
$("#API").jqxInput({disabled: true});
$("#CompanyUWI").jqxInput({disabled: true});
$("#Easting").jqxInput({disabled: true});
$("#Northing").jqxInput({disabled: true});
$("#Latitude").jqxInput({disabled: true});
$("#Longitude").jqxInput({disabled: true});
$("#CRS").jqxDropDownList({disabled: true});
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}
.well-data {
text-align: center;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
width: 96%;
height: 38px;
font-weight: bold;
font-size: 14pt;
}
.well-data-dropdown {
text-align: center;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
width: 96%;
font-size: 11pt;
}
#WellID {
text-align: right;
font-size: 11pt;
font-weight: bold;
}
#WellName, #API, #CompanyUWI, #Easting, #Northing, #Latitude, #Longitude {
font-weight: bold;
font-size: 16pt;
}
.view-button {
background-color: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 11pt;
font-weight: bold;
width: 100%;
height: 33px;
}
@media all and (max-width: 600px)
{
.my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b, .my-breakpoint .ui-block-c
{
width: 95%;
float: none;
margin-left: auto;
margin-right: auto;
}
#spiderPlot, #vsPlot, #planElements
{
height: 150px;
}
}
</style>
</head>
<body>
<div id="DIV1" style="width: 100%; height: 100%;">
<div id="jqxpanel" data-role="page">
<div id='appMenu'>
<ul>
<style>
.jqx-menu ul {
padding-bottom: 10px;
}
.jqx-menu ul li {
width: 280px;
font-size: 24px;
padding-top: 15px;
padding-bottom: 15px;
border-top: 1px solid black;
}
</style>
<li><a href="../../user/index">User Administration</a></li>
<li><a href="../../well/index">Wells</a></li>
<li><a href="../../login/showProfile">User Profile</a></li>
<li><a href="../../login/logout">Logout</a></li>
</ul>
</div>
<div id="ContentPanel" class="plotRow">
<table width="99%"><tr><td>Well Name:</td><td><td id="WellID">Well ID: 1</td></tr></table>
<table width="100%">
<tr>
<td width="25%"><input class="view-button" id="SpiderPlot" type="button" value="Spider Plot" /></td>
<td width="25%"><input class="view-button" id="VSPlot" type="button" value="VS Plot" /></td>
<td width="22%"><input class="view-button" id="PlanElements" type="button" value="Plan Elements" /></td>
</tr>
</table>
<center><input class="well-data" type="text" id="WellName" name="WellName" /></center>
API:<br>
<center><input class="well-data" type="text" id="API" name="API" /></center>
Company UWI:<br>
<center><input class="well-data" type="text" id="CompanyUWI" name="CompanyUWI" /></center>
Easting:<br>
<center><input class="well-data" type="text" id="Easting" name="Easting" /></center>
Northing:<br>
<center><input class="well-data" type="text" id="Northing" name="Northing" /></center>
Latitude:<br>
<center><input class="well-data" type="text" id="Latitude" name="Latitude" /></center>
Longitude:<br>
<center><input class="well-data" type="text" id="Longitude" name="Longitude" /></center>
CRS:<br>
<center><div class="well-data-dropdown" id="CRS" name="CRS" /></div></center>
<table width="100%">
<tr>
<td width="25%"><input class="view-button" id="Surveys" type="button" value="Surveys" /></td>
<td width="25%"><input class="view-button" id="Plans" type="button" value="Plans" /></td>
<td width="6%"></td>
<td width="22%"><input class="view-button" id="Cancel" type="button" value="Edit" /></td>
<td width="22%"><input class="view-button" type="button" id="Save" value="Save" /></td>
</tr>
</table>
</div><!-- end ContentPanel -->
</div><!-- end jxpanel -->
</div><!-- end DIV1 -->
