Develop Reference

jQuery how to get element

I have this code below and I want to check for every input (class="Comment-modal-input") if it's not empty - get its closest element (class="svg-icon") which is upper in the hierarchy and add it class "active".
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS0105, 'assets/icons/utility-sprite/svg/symbols.svg#page')}"></use>
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<apex:inputTextarea rows="5" styleClass="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
This is the jQuery I'm trying to do:
$('.comment-modal-input').each(function() {
if ($(this).val()){
var icon = $(this).parents('td').closest('.svg-icon');
icon.addClass('active');
}
});
Any help ?

To add a class to an SVG you need to use .attr('class','class you want')
.closest('td') will find the first td that contains your $(this).
.find('.svg-icon') will search the td and for any element with that class
var icon = $(this).closest('td').find('.svg-icon');
icon.attr('class', 'svg-icon active');
demo
$('.comment-modal-input').each(function() {
if ($(this).val()) {
var icon = $(this).closest('td').find('.svg-icon');
icon.attr('class', 'svg-icon active');
console.log(icon.attr("class"))
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<input rows="5" class="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
</tr>
</tbody>
</table>

You better get td-comment element as a parent and loop those elements and check if Comment-modal-input under each solves your condition and then add the active class under the current td-comment element.
Also, Comment-modal-input is not the same as in the code: comment-modal-input.
Edited:
I got this minus but I was correct :)
Sorry didn't posted the code.
$('.td-comment').each(function() {
var $this = $(this),
commentModalInput = $this.find('.comment-modal-input'),
icon = $this.find('.svg-icon');
if (commentModalInput.val()) {
icon.addClass('active');
}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table>
<tbody>
<tr>
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<input rows="5" class="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
</tr>
</tbody>
</table>

HTML Table, retrieving data from row and displaying it elsewhere

I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". As well as the Name in the table, filling out the Name field under "Readings". How would I go about doing this?
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<!-- end row -->

There you go pal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input
type="text"
id="numberInput"
class="form-control"
placeholder="Number"
disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input
type="text"
id="deviceInput"
class="form-control"
value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#numberInput');
var device = document.querySelector('#deviceInput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
device.value = data[1];
}
})();
</script>
</body>
</html>

With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.
You can either use the onclick attribute or addEventListener method of HTML elements. You can explicitly state the input to the function or calculate it. So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). The latter will pass the row element that was clicked and you can extract the pertinent information.

$(document).ready(function(){
$(".gradeA").click(function(){
var currentRow = this;
var number = $(this).find("td")[0].innerText;
var name = $(this).find("td")[1].innerText;
$("form input[type='text']").val(number);
$("form input[type='device']").val(name);
})
});

Signature Pad looses focus

I have this html code with javascript that uses bootstrap and Signature Pad. I am using Bootstrap's Collapse feature. When I set first panel as default the Signature Pad does not work(I am not able to sign) but when I add 3rd panel as Default where the Signature Pad is place, it works as intended.
Any idea why would this happen?
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<link href="css/signature-pad.css" rel="stylesheet" />
<title>Employee Onboarding Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/signature-pad.css">
</head>
<body onselectstart="return false">
<form id="form1" >
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Enter Your Personal Details</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" ID="txtFName" name="txtFName"></td>
<td></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" ID="txtLName" name="txtLName"></td>
<td></td>
</tr>
<tr>
<td>Middle Initial</td>
<td>
<input type="text" ID="txtMiddleI" name="txtMiddleI"></td>
<td></td>
</tr>
<tr>
<td>Other Name</td>
<td>
<input type="text" ID="txtOtherName" name="txtOtherName"></td>
<td></td>
</tr>
<tr><td colspan="3"><button ID="btnSavePersonal" OnClick="btnSavePersonal_Click">Save</button>
</td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Answer These Questions</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table>
<tr>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" /></td>
<td>1. A citizen of the United States</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox2" runat="server" /></td>
<td>2. A noncitizen national of the United States (See instructions)</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox3" runat="server" /></td>
<td>3. A lawful permanent resident. (Alien Registration Number/USCIS Number):</td>
<td>
<asp:TextBox ID="txtARNUSCIS" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox4" runat="server" /></td>
<td>4. An alien authorized to work until (expiration date, if applicable, mm/dd/yyyy):</td>
<td>
<asp:TextBox ID="txtARNExpDt" runat="server"></asp:TextBox></td>
</tr>
<tr><td colspan="3"><asp:Button ID="btnSaveQA" runat="server" Text="Save" OnClick="btnSaveQA_Click" /></td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Sign Here</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save">Save</button>
<input type="text" name="abc" id="abc">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>
</body>
</html>

You have to initialise your canvas. can looks like this:
signaturePad = new SignaturePad(canvas);

I ended up putting my Signature Pad script in iFrame and then handled the responses back to the main page using a hidden input. Worked like a charm.

How to map data coming dynamically into the designed table individually in respective form fields using jquery?

My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here

in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];

you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});

I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}

The home page not displayed in google chrome

I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>

One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview

You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.

To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com