Working with jQuery in WinJS

Article
01/23/2014

Use Blank HTML Template

Create project using Blank Template

Install the jQuery and add it to Application

Once you have your Windows Store Apps, use nugget.org and add jQuery to your application

Go to your package manager console and run the below comment

PM> Install-Package jQuery

Then add the reference of the jQuery to the default.html (start page) so that it is by default loaded into other pages which gets navigated from this page.

Right click the js folder and Add > Existing Item point the jquery-2.0.3.js which is located in the packages folder.

Then to the default.html add this reference to the top

 <!--Add the jQuery Reference-->

<script src="js/jquery-2.0.3.js"></script>

Sample HTML

 </head>

<body>

    <input type="text" id="txtData" />

    <br />

    <input type="button" id="btnAdd" value="Click Here"/>

</body>

</html>

Sample JS

 (function () {

    "use strict";

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

            } else {

            args.setPromise(WinJS.UI.processAll().done(function () {

                /*var button1 = document.getElementById("btnAdd");

                button1.addEventListener("click", WhenButtonClicked, false);

*/

                $('#btnAdd').click(function () {

                    var data = $("#txtData").val(); //To Read the value

                    $('#txtData').val("KKKDD");

});

            }));

};

    function WhenButtonClicked() {

        var data = $("#txtData").val();

    //var bttn = $('#add').click(function () {

    //    //alert('button clicked');

    //    $('#txtData').val = "Some text";

    //});

    app.oncheckpoint = function (args) {

};

    app.start();

})();

References

jQuery API reference https://api.jquery.com/

jQuery Tutorial https://www.w3schools.com/jquery/default.asp

Namoskar!!!

Share via