i have the following code
<html>
<head>
<meta charset="utf-8">
<title>insurence</title>
<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>
<style type="text/css">
div {text-align: center}
#result { margin-top: 15px; }
</style>
</head>
<body>
<div data-role="page" id="insurance" data-theme="b">
<div id="insurance">
<form action="submit.php" method="post" id="insuranceForm">
<h2><label>Car</label></h2>
<div>Insurance Group</div>
<input name="insurance" type="text" maxlength="3" data-mini="true" /><br>
<input name="submit" data-role="button" data-inline="true" type="submit" value="submit" /></form>
</div></div>
<div id="result"></div></body>
<script>
$("#insuranceForm").on("submit", function(e){
var $inputs = $('#insuranceForm :input'),
values = {};
$inputs.each(function() {
values[this.name] = this.value;
});
$.ajax({
type : "POST",
url : "submit.php",
data: values,
success : function(res) {
$("#result").html(res);
$("input[type=text]").val("");
}
});
return false;
});
$(".back").on("click", function(){
$("#result").html("");
});
</script>
<!--End Stats Page -->
</html>
When i use jquery mobile to style it the results never appear back in the results div but if i remove the jquery mobile it works fine.
any ideas? firebug does show the results tho!