Manual reload necessary before input button works
All,
I have a small webapp with an index page. The index page has a button "Login customers", which starts up a new page. On this new page the user can enter id and password and click the "login" button.
however, initially the button does not respond, but after manual reloading it does work. It seems to be that javascript is not loaded.
A related problem is probably: at first my added "Back" button is available and works. After the manual reload however it has disappeared. It seems to be related.
Below the important pieces of my code, hope anyone can help.
INDEX.HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="qw.css">
<link rel="stylesheet" href="style.css">
</head>
<body width = "device-width">
<!-- PAGE INDEX -->
<div data-role="page" id="index">
<div data-role="header">
<h1>Leads to Clients</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="inloggen.html" data-transition="flip">Login customers</a></li>
</ul></p>
INDEX.HTML
INLOGGEN.HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="qw.css">
<link rel="stylesheet" href="style.css">
<div data-role="content">
<p>
<div id="resultLog" class="start_rood"></div>
<div data-role="fieldcontain">
<label for="textinput">Gebruiker:</label>
<input type="text" name="textinput" id="gebruiker" value="" />
</div>
<div data-role="fieldcontain">
<label for="passwordinput">Wachtwoord:</label>
<input type="password" name="passwordinput" id="ww" value="" />
</div>
<script type="text/javascript">
$(function() {
$("#checkLogin").click(function() {
var gebruiker = $.trim($("#gebruiker").val());
var ww = $.trim($("#ww").val());
$.ajax({
type: "POST",
url: "inloggen.php",
data: { "gebruiker": gebruiker, "ww": ww },
cache: false,
dataType: "text",
success: onSuccess
});
});
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
});
function onSuccess(data) {
if (data.substring(0,1) == 'k') { window.location.assign(data)}
else { $("#resultLog").html(data); }
}
});
</script>
<input id="checkLogin" type="button" value="Inloggen"/>
</p>
</div><!-- /content -->