CODEWITHSUNDEEP
javascriptjquerywindows-8windows-store-apps
Karlen
Karlen

Reputation: 1394

Support for jQuery in Windows Store Applications

Here is my default.html file 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>app1</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- app1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/jquery.js"></script>

</head>
<body>
<button id="buttonYouWantToClick">Button</button>
<div id="result"></div>

<p>Content goes here</p>
</body>
</html>

and default.js file. I put jquery code before app.start() function. 

    ...
    $(document).ready(function () {
        $('#buttonYouWantToClick').click(function () {
            $('#result').html('jQuery works!');
        });
    });
    app.start();
})();

Also I tried after args.setPromise(WinJS.UI.processAll());

(function () {
"use strict";

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !==   activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
        $(document).ready(function () {
            $('#buttonYouWantToClick').click(function () {
                $('#result').html('jQuery works!');
            });
        });

    }
};
app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
};

app.start();
})();

In two case don't work. I get the same errors

SCRIPT5009: Unhandled exception at line 38, column 5 in ms-appx://a8fcf58a-3cda-4e8c-ae43-733030e738e2/js/default.js 0x800a1391 - JavaScript runtime error: '$' is undefined File: default.js, Line: 38, Column: 5 HTML1300: Navigation occurred. File: default.html

APPHOST9623: The app couldn’t resolve ms-appx://a8fcf58a-3cda-4e8c-ae43-733030e738e2/js/jquery.js because of this error: RESOURCE_NOT_FOUND. Visual Studio is not currently attached to a script debug target that supports script diagnostics.

Thanks in advance.

Upvotes: 0

Views: 2566

Answers (2)

Sampson
Sampson

Reputation: 268344

As of version 2.0, jQuery works in Windows Store Apps, as others here have indicated. I just confirmed this by downloading jQuery 2.0 from http://jquery.com/download/, and dropping it into a new app:

<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-git2.js"></script>

Along with the following small change in default.js:

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            $("p").html("App Launched");
        } else {
            $("p").html("App Reactivated from Suspension");
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

This worked without any issues. Make sure you place your code within the onactivated handler. Otherwise jQuery may not yet be available when this code runs.

It's very likely that you download a bad copy of jQuery, or you didn't properly include it into your application. Follow the following steps:

  1. Download jQuery from http://jquery.com/download/
  2. In your project, right-click on the /js directory and Add / Existing Item
  3. Drag the jQuery file from /js and drop it after the default.js reference
  4. Add jQuery code inside app.onactivated callback (see code above)

Upvotes: 1

Adam Tuliper
Adam Tuliper

Reputation: 30152

jQuery works ok (some stipulations) but I'm going to assume here based on the error you posted that you added the file on your disk but did not add it to your project. It's not in your package, therefore can't find it, so any jQuery calls fail,

Click in "Solution Explorer" to 'Show all files" and right click on it and include in your project, rebuild and run again.

I've used this specific version here without a problem:

https://github.com/appendto/jquery-win8

I recommend keeping an eye on 2.0 but if you want a released version give this one a try.

I've also seen some folks have errors when the text file wasn't utf-8 encoded (you can open it up and choose 'save as' and then select the down-caret to save with encoding but I don't believe that to be an issue here, just providing it for a ref)

Upvotes: 1

Related Questions