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" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <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 :)

  • Nishi

    Helped me..thanx a lot!