Signature Pad looses focus - javascript

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.

Related

My Success Message (Alert Message) doesn't vanish

My applications has different sides on which the user can add Hardware. If the user successfully add a item a Success Message is shown which vanish after a few seconds. Unfortunetly on one side it won't vanish. Does somebody know why?
On this side the message does vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Greenify | Travel</title>
<!-- ############### -->
<!-- ## CSS Files ## -->
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css">
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- JS-File with Dashboard-Charts -->
<script th:src="#{js/dimensions_it_travel_expenses.js}" src="../static/js/dimensions_it_travel_expenses.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_flights = [[${emission_value_flights}]];
oEmissions.emissions_train = [[${emission_value_trains}]];
oEmissions.emissions_car = [[${emission_value_cars}]];
oEmissions.emissions_hotel = [[${emission_value_hotels}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add Travel Expenses travel based - Modal -->
<div th:insert="fragments/ITTravelExpenses_Modal_Add :: ITTravelExpenses_Modal_Add"></div>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<div class='col mh-100 overflow-auto pe-4'>
<!-- Row 1 (Headline) -->
<div class="row">
<!-- Headline Dimensions -->
<h1 class="display-6 text-center">IT - Travel Expenses</h1>
</div>
<!-- Test Yearly Emissions<span th:each="year : ${yearlyEmissions}" th:text="${year.getValue()} + ', '">, </span> -->
<!-- Success Message -->
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Travel Expenses -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
<h5>Travel Expenses (<span th:text="${#numbers.formatDecimal(emissions_total, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Travel Expenses via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITTravelExpenses_Modal_Add" style="background-color: var(--own-green-2); float: right;">
<i class="bi bi-plus-lg" style="color: white;"></i>
</button>
<!-- Check if there are entries for trips. If there are no entries, a hint text will be displayed -->
<div th:if="__${trips.size()}__ == 0">
<p class="fs-6">Currently there are no entries for trips. You can add them via the add button!</p>
</div>
<!-- Check if there are entries for trips table -->
<div th:if="__${trips.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Startdate</th>
<th scope="col">Enddate</th>
<th scope="col">Amount of Persons</th>
<th scope="col">Overnight Stays</th>
<th scope="col">Travel Destination</th>
<th scope="col">Details</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="trip : ${trips}">
<td th:text="${trip.travelName}">Business Trip 1</td>
<td th:text="${#temporals.format(trip.startDate, 'dd.MM.yyyy')}">2000-08-2</td>
<td th:text="${#temporals.format(trip.endDate, 'dd.MM.yyyy')}">2000-08-22</td>
<td th:text="${trip.participants}">4</td>
<td th:text="${trip.stays} + ' days'">5</td>
<td th:text="${trip.destinationCountry}">Italy</td>
<td><i class="bi bi-box-arrow-up-right" role="button" data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Details' + ${trip.id }"></i></td>
<td>
<table class="d-flex justify-content-center">
<tr>
<!-- <td>-->
<!-- <div>-->
<!-- <i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer"-->
<!-- data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Update' + ${trip.id }"></i>-->
<!-- </div>-->
<!-- </td>-->
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer"
data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Delete' + ${trip.id }"></i>
</div>
</td>
</tr>
<!-- Delete Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Delete :: ITTravelExpenses_Modal_Delete"></div>
<!-- Update Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Update :: ITTravelExpenses_Modal_Update"></div>
</table>
<!-- Travel Detail Information Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Details :: ITTravelExpenses_Modal_Details"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<!-- Accordion-Item 5: Hotel -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingFive">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false" aria-controls="panelsStayOpen-collapseFive">
<h5>Hotel (<span th:text="${#numbers.formatDecimal(emission_value_hotels, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
<div class="accordion-body">
<!-- Check if there are entries for hotelovernights. If there are no entries, a hint text will be displayed -->
<div th:if="__${hotelovernights.size()}__ == 0">
<p class="fs-6">Currently there are no entries for hotel overnight stays.</p>
</div>
<!-- Check if there are entries for hotelovernights table -->
<div th:if="__${hotelovernights.size()}__ >= 1">
<!-- Table with Hotel -->
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Name of Trip</th>
<th scope="col">Location</th>
<th scope="col">Amount overnight stays</th>
<th scope="col">Amount of Traveller</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="hotel : ${hotelovernights}">
<td th:text="${hotel.trip.travelName}">1</td>
<td th:text="${hotel.country}">Land</td>
<td th:text="${hotel.amountOfOvernightStays}">tage</td>
<td th:text="${hotel.trip.participants}">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
While on this side the Message does not vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="../../../../favicon.ico" />
<title>Greenify | IT Infrastructure</title>
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css"/>
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css"/>
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JS-File with Charts -->
<script th:src="#{js/dimension_it_infrastructure.js}" src="../static/js/dimension_it_infrastructure.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_servers = [[${servers_emissions}]];
oEmissions.emissions_clouds = [[${cloud_emissions}]];
// Labels and Values for IT Equipment CO2 Emissions Line Chart
aTotalEmissionsByYearITInfraLabels = [[${total_emissions_by_year_it_infra_labels}]];
aTotalEmissionsByYearITInfraValuesNow = [[${total_emissions_by_year_it_infra_valuesNow}]];
aTotalEmissionsByYearITInfraValuesFC = [[${total_emissions_by_year_it_infra_valuesFC}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add IT-Infrastructure Own Data Center - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Add :: ITInfrastructure_OwnDataCenter_Modal_Add"></div>
<!-- Add IT-Infrastructure Cloud - Modal -->
<div th:insert="fragments/ITInfrastructure_Cloud_Modal_Add :: ITInfrastructure_Cloud_Modal_Add"></div>
<!-- Page content -->
<div class="row flex-grow-1 overflow-hidden">
<!-- Sidebar -->
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<!-- Content Section -->
<div class="col mh-100 overflow-auto pe-4">
<!-- Row 1 (Headline) -->
<div class="row">
<h1 class="display-6 text-center">IT - Infrastructure</h1>
</div>
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables of Own Data Centers and Cloud -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Own Data Centers -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button
class="accordion-button collapsed p-4"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<h5>Own Data Centers (<span th:text="${#numbers.formatDecimal(servers_emissions, 0, 'POINT', 2, 'COMMA')}">0</span>kg CO<sub>2</sub>e)
</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Own Data Centers via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Add" style="background-color: var(--own-green-2); float: right">
<i class="bi bi-plus-lg" style="color: white"></i>
</button>
<!-- Check if there are entries for servers table. If there are no entries, a hint text will be displayed -->
<div th:if="__${servers.size()}__ == 0">
<p class="fs-6">
Currently there are no entries for own data centers. You
can add them via the add button!
</p>
</div>
<!-- Check if there are entries for servers table -->
<div th:if="__${servers.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Amount</th>
<th scope="col">Location</th>
<th scope="col">Start Date</th>
<th scope="col">Period of use</th>
<th scope="col">State</th>
<th scope="col">Power Consumption Active Mode</th>
<th scope="col">
Daily Usage in Active Mode (in hours)
</th>
<th scope="col">Power Consumption IDLE Mode</th>
<th scope="col">
Daily Usage in IDLE Mode (in hours)
</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="server : ${servers}">
<!--<td th:text="${tablet.id}">1</td>-->
<td th:text="${server.title}">5</td>
<td th:text="${server.amount}">5</td>
<td th:text="${server.location}">Germany</td>
<td th:text="${#temporals.format(server.startDate, 'dd.MM.yyyy')}">Lenovo</td>
<td th:text="${server.periodOfUse}">4</td>
<td th:text="${server.state}">4</td>
<td th:text="${server.activeMode}">60</td>
<td th:text="${server.usageActiveMode}">60</td>
<td th:text="${server.standbyMode}">60</td>
<td th:text="${server.usageStandbyMode}">60</td>
<td>
<table class="d-flex justify-content-center">
<tr>
<td>
<div>
<i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Update"
th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Update' + ${server.id}"
></i>
</div>
</td>
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer" data-bs-toggle="modal"
data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Delete" th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Delete' + ${server.id}"
></i>
</div>
</td>
</tr>
<!-- Update IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Update :: ITInfrastructure_OwnDataCenter_Modal_Update"></div>
<!-- Delete IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Delete :: ITInfrastructure_OwnDataCenter_Modal_Delete"></div>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
The Java Script coding to let the Message vanish is the following:
/* globals Chart:false, feather:false */
window.onload = function () {
// This coding let the Success Message vanish after some time
$(document).ready(function () {
// autodismiss alerts
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);
});
}
I load the Java Script coding in a extra file but it doesn't causes the problem, even if i put the coding in the same file in which the coding for the side is, it still does not vanish....
Does anyone know why?

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);
})
});

Module fails to load every couple of times the browser is refreshed

I am having a problem with a module loading once every 6-7 times my webpage is being loaded. I have a medication.php file and in it I am connecting to a medication.js javascript file. This javascript file contains I am loading a module and setting up a controller. I have tried this on chrome, and safari as well, and again when the page is originally loaded an error is thrown and is also thrown once every 7-8 times a page is refreshed. You can test this for yourself by reloading This page several times and you will find that the content will not display randomly, and the following error is thrown: This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded. medication.php: Here the medication.js, and the Angular CDN are loaded. As you can see I have my ng-app and I also have my ng-controller.
<html ng-app="myModule1">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Shop For Medication </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex-theme-os.css"/>
</head>
<body>
<ul class="nav nav-tabs">
<div class="container">
<div class="navbar-header" style="background-color:#2a6cd6">
<a class="navbar-brand" href="#">The Med Company</a>
</div>
<ul class="nav navbar-nav" style="background-color: #2a6cd6" role="navigation">
<li > Home Page </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Purchase Something<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Vitamins</li>
<li>Medication</li>
</ul>
</li>
<li>About Us</li>
</ul>
<ul class="nav navbar-nav navbar-right" style="background-color:#2a6cd6"role="navigation">
<li><span class="glyphicon glyphicon-shopping-cart"></span>Check Out</li>
<li><span class="glyphicon glyphicon-user"></span> Sign Out</li>
</ul>
</div>
</ul>
<div class="container" ng-controller="mycontroller1" ng-cloak>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:10%">Quantity</th>
<th style="width:10%">Subtotal</th>
<th style="width:20%"></th>
</tr>
</thead>
<form id="medication-product-1" method="POST">
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img id="small-pic2" src="images/benadryl.png"></img>
</div>
<div class="col-sm-10">
<h4 class="nomargin"><input type="hidden" name="name1" value="Benadryl">
Benadryl</input>
</h4>
<p>
A medication which reduces itching, sneezing, coughing through because of its properties as an anti-histamine.
</p>
</div>
</div>
</td>
<td data-th="Price"><input type="hidden" name="Price1" value=01.99>
$1.99</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal1" ng-init="subtotal.subtotal1=0" name="Quantity1" ng-change="changed()" id="amount1" class="form-control text-center" min="0"/>
</td>
<td data-th="Subtotal" id="subtotal-1" name="Subtotal" class="text-center" ng-bind="1.99*subtotal.subtotal1"></td>
<td>
<input type="hidden" name="step" value="1"></input>
<button type="button" id="button1" name="button-1" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</form>
<form id="medication-product-2" method="POST">
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img src="images/motrin.jpg" id="small-pic"></img>
</div>
<div class="col-sm-10">
<h4 >
<input type="hidden" name="name2" value="Motrin"></input>
Motrin
</h4>
<p>
Pain Reliever and Fever Reducer
</p>
</div>
</div>
</td>
<td data-th="Price">
<input type="hidden" name="Price2" value="3.99">
$3.99
</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal2" ng-change="changed2()" ng-init="subtotal.subtotal2=0" name="Quantity2"
id="amount2" min="0" class="form-control text-center"></input>
</td>
<td data-th="Subtotal" id="subtotal-2"
name="Subtotal" ng-bind="3.99*subtotal.subtotal2" class="text-center" >
</td>
<td>
<input type="hidden" name="step" value="2"></input>
<button type="button" id="button2" name="button-2" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="vex/dist/js/vex.combined.js"></script>
<script type="text/javascript"> vex.defaultOptions.className = 'vex-theme-os'</script>
<script type="text/javascript" src="js/medication.js"></script>
<script type="text/javascript" src="js/signout.js"></script>
</body>
</html>
medication.js:
window.onload=function(){
button1=document.getElementById("button1");
button2=document.getElementById("button2");
number1=document.getElementById("amount1");
number2=document.getElementById("amount2");
number1.value=0;
number2.value=0;
button1.disabled=true;
button2.disabled=true;
var medicine=angular.module("myModule1",[])
.controller("mycontroller1",function($scope){
var subtotal={
subtotal1:0,
subtotal2:0
}
$scope.subtotal=subtotal;
$scope.changed=function(){
if(subtotal.subtotal1>0){
button1.disabled=false;
}
else {
button1.disabled=true;
}
}
$scope.changed2=function(){
if(subtotal.subtotal2>0){
button2.disabled=false;
}
else{
button2.disabled=true;
}
}
});
button1.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-1").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
}
button2.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-2").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
};
}

Turns out one needs to place the angular.js file in the head in order to "avoid the flash of uncompiled content". If you dont do this then one must use ng-cloak. Although it uncommon to place the angular.js file in the head, content will not always load unless its done in this case. Please anyone feel free to add onto my answer as to why this fixed the problem.

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

Jquery .load not using stylesheet

Sorry for bad English title, but I'm currently making my ASE and I want dynamic pages. One container and when clicked on a navigation item it will load the pages into the container.
However, if I use jQuery .load, the style is not correct. It seems it doesn't use the stylesheet from either the main page as the content page. I put the stylesheet link on both. I use Bootstrap.
This is my main.php (the main page with the container):
<?php
include('../includes/global.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title><?php echo Core::getSettings()->getValue('blogname'); ?> ASE - Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="../styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../scripts/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../scripts/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script/ase_main.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><?php echo Core::getSettings()->getValue('blogname'); ?></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<?php include ('headers/navigator.php'); ?>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="mainContent"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/docs.min.js"></script>
<script src="../scripts/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This is the Dashboard.php (the page dynamically loaded):
<link href="../styles/dashboard.css" rel="stylesheet">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
This is the .js (which loads the content):
$(document).ready(function()
{
console.log($('.nav.nav-sidebar').children());
$('.navItem').unbind('click').click(changeContentType);
});
function changeContentType()
{
$('.navItem').removeClass('active');
$(this).addClass('active');
$('#mainContent').load($(this).data('content') + '.php', function(){});
}
Why doesn't it apply the stylesheet?

Categories

Resources