How to use JQuery with an HTML Macro in Confluence

chetan vartak August 24, 2016

Hi,

I've this page and I want to use it in confluence. I saw some links but still not sure what exactly I need to do. I've already enabled HTML macro.

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
th {
border-bottom: 1px solid #d6d6d6;
}

tr:nth-child(even) {
background: #e9e9e9;
}
</style>
</head>
<body>

<div data-role="page" id="pageone">
<div data-role="header">
<h1>Filterable Tables</h1>
</div>

<div data-role="main" class="ui-content">
<form>
<input id="filterTable-input" data-type="search" placeholder="Search For Customers...">
</form>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable" data-filter="true" data-input="#filterTable-input">
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquería</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>México D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Berguvsvägen 8</td>
<td>Luleå</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>

</tbody>
</table>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>

 

2 answers

0 votes
chetan vartak August 25, 2016

Yes. I'm using Html Macro. And I'm able to embed a javascript. But not able to use JQuery. The above code work fine as a standalone html page. It does show up within confluence/html macro. But Search and Filter doesn't work.

0 votes
Robert Massaioli _Atlassian_
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 24, 2016

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events