Categories
Uncategorized

Windows 8 Phone Development : How to use jquery using HTML 5 template in Visual Studio 2012

Recently I started to try out Windows 8 Phone Development using Visual Studio 2012 express and the Windows 8 Phone SDK, when using HTML5 template I ran into this problem which I reported on stackoverflow, here is how I solved it :

Step 1 : Add jquery.min.js to the solution


Step 2 : Change the order of statement in Browser_Loaded method as shown below

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
// Add your URL here
Browser.IsScriptEnabled = true;
Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

Step 3: Sample Jquery code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
/html/js/jquery.min.js
<title>Windows Phone</title>
<script type="text/javascript">
$(document).ready(function () {
$("#message").text("Welcome !");
$("#goBtn").click(function(){
$("#message").text("button has been pressed");
});
});
</script>
</head>
<body>
<div>
<p>MY APPLICATION</p>
</div>
<div id="message"></div>
<input type="button" id="goBtn" value="press me !" />
</body>
</html>
Output


Hope this helps you :)