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 :)

About Yasser Shaikh

Hello, I am a Web Dev, employed with Media.Net where I primarily work on ASP.NET MVC and Angular JS based developement.

Questions? Enquiries? Comments? Or even just want to say “Hi” to me, you are welcome to all of that. Just drop me a message at “mail@yassershaikh.com” and I’ll get back to you as soon as possible.

Cheers !

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>