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.
Related
And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.
I try jQuery click event but it is stopped the form submission.
myHTML file:
<!doctype html>
<html lang="en">
<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>xxx</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead">
<div class="inner">
<!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
<nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">xxx</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sifirla.php">Sıfırla</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="guncelle.php">Güncelle</a>
</li>
</ul>
</nav>
</div>
</header>
<div><img src="image/xxx.png" alt="xxx" style="width: 150px;height: 150px;"></div>
<div>
<?php echo $result; ?>
</div>
<main role="main" class="inner cover">
<form id="form1" name ="form1" method="POST" action="guncelle.php" >
<div class="form-group">
<label for="uname">Kullanıcı Adınız:</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<span id="unametxt" name="unametxt" class="required"></span>
<div class="form-group">
<label for="password">Mevcut Şifreniz:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<span id="passwordtxt" name="passwordtxt" class="required"></span>
<div class="form-group">
<label for="newPassword">Yeni Şifreniz:</label>
<input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
</div>
<span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>
<div class="form-group">
<label for="new2Password">Yeni Şifreniz Tekrar:</label>
<input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
</div>
<span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>
<!--<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
</div>
-->
<p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle" ></p>
</form>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>#2018 xxxx</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When this form submitted , I controlled php side like this:
if (isset($_POST['Submit1'])) {
and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.
I want to disable the button when form submitting. How can I this?
You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below
<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">
Try with this code
<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">
<script>
$(document).ready(function(){
$('#form1').on('submit',function(e){
e.preventDefault();
$('#submit1').prop('disabled','disabled');
});
});
</script>
I am trying to make the value of the input with the name "game-name" to be in the "Name of the game" column of the table when I click on the "add game" button. Also the delete button does not work.
Here is my code:
$(function() {
var $td = '<td>' + '</td>';
$('input[name=add-game]').click(function() {
$('tbody').append('<tr>' + $td + $td + $td + '</tr>');
var $tableRows = $('tbody tr').length
$('tbody tr').eq($tableRows).children().eq(0).text($('input[name=game-name]').val())
$('td:nth-child(3)').html('<button>');
$('button').text('Delete').addClass('delete btn btn-block btn-sm btn-danger');
});
$('.delete').click(function() {
$(this).parent().parent().empty();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody>
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>
Here's a quick solution. Hope this helps.
$(function() {
$('input[name=add-game]').click(function() {
// Lets get the information ready to be added
var name = '<td>' + $('input[name="game-name"]').val() + '</td>';
var rating = '<td>' + $('input[name="game-rate"]').val() + '</td>';
var btnDelete = '<td><button class="delete btn btn-block btn-sm btn-danger">Delete</button></td>'
// Lets append the information into the game table
$('tbody[id="game-table"]').append('<tr>' + name + rating + btnDelete + '</td>');
// Since we've created a delete button, we need to bind
// an event listener to the button so that we can
// delete it from the table if the user clicks it
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody id="game-table">
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>
Your code is in $(function()... it means that when the dogument gets ready these codes will run. You add delete buttons after all codes ended. In another way your delete buttons add after the codes running and this:
$('.delete').click(function() {
$(this).parent().parent().empty();
});
Does not register for new added .delete buttons.
To elements that dynamically adding to page you need to use delegate:
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});
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.
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
I'm currently designing a UI for an automated parking system. One of the pages (garage status) has a table which contains spot numbers and their corresponding ticket numbers. The valet has to be able to type in either a spot number or ticket number into the search box and as he types each letter, the options in the table are filtered according to what he types. I'm using List.js for this, however, I also need to have an onscreen keypad for the valet to input the numbers, which for that I use jQuery Keypad plugin. Unfortunately, filtering is only performed if I directly input from my laptop keyboard, not when I use the keypad plugin. I would be very grateful if someone could give some input on how to solve this problem.
<!DOCTYPE html>
<html>
<title>Garage Status</title>
<head>
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="font/material-design-icons/material.css" rel="stylesheet" />
<!--Import jQuery before materalize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#grgKeypad').keypad({target: $('.search'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>GARAGE STATUS</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn-large' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
<!--Quick access buttonss to inpark and outpark menus-->
<a id="quick_outpark_btn" class="waves-effect waves-light btn-large" href="outmenu.html">OUTPARK</a>
<a id="quick_inpark_btn" class="waves-effect waves-light btn-large" href="inmenu.html">INPARK</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li>Dashboard</li>
<li class="divider"></li>
<li>Inpark</li>
<li class="divider"></li>
<li>Outpark</li>
<li class="divider"></li>
<li>Shuffle</li>
<li class="divider"></li>
<li>Outpark Queue Menu</li>
<li class="divider"></li>
<li>Transactions</li>
</ul>
<!--Dashboard Button, press to return to dashboard-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<!--Home icon-->
<i class="material-icons" style="font-size: 48px"></i>
</a>
</div>
<!--Form that takes ticket number or spot number and searches for that car's ticket number and spot number-->
<!--Note that the search form shouldn't be sending data back to the server to search for the car, the data should already be loaded onto the page and the search should be performed with the already loaded data or something like that idk if you want to change-->
<div id="locations">
<div class="row">
<form class="col s7" style="margin: 0px; padding: 0px;">
<div class="row">
<div class="input-field col s9">
<input placeholder="Enter ticket or spot number" id="search" type="search" class="search">
<label for="search"><i class="material-icons" id="searchicon"style="font-size: 48px"></i></label>
</div>
</div>
</form>
</div>
<!--Table that displays cars in the garage-->
<!--Data will be dynamically displayed, currently these are just placeholder data-->
<div class="table" id="searchtable">
<table class="centered striped bordered scroll">
<thead>
<tr>
<th>Spots</th>
<th>Ticket Number</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="spot">1-22-35</td>
<td class="ticketnum">696969</td>
</tr>
<tr>
<td class="spot">1-22-34</td>
<td class="ticketnum">696968</td>
</tr>
<tr>
<td class="spot">6-22-33</td>
<td class="ticketnum">696967</td>
</tr>
<tr>
<td class="spot">1-22-32</td>
<td class="ticketnum">696966</td>
</tr>
<tr>
<td class="spot">8-22-31</td>
<td class="ticketnum">696965</td>
</tr>
<tr>
<td class="spot">8-22-30</td>
<td class="ticketnum">696964</td>
</tr>
<tr>
<td class="spot">1-22-39</td>
<td class="ticketnum">696953</td>
</tr>
</tbody>
</table>
</div>
<!--Div containing the keypad-->
<div id="grgKeypad"></div>
<!--Import List.js-->
<script src="list.js"></script>
<script>
var options = {
valueNames: ["spot","ticketnum"]
};
var userList = new List("locations",options);
</script>
</body>
</html>