JQuery not working

1

Hello everyone,

I started working with Ionic in Visual Studio, and I’m building the Android version of my Windows (Phone) app. The app, which contains grammar exercises and some explanations, uses JQuery for the exercises (meaning form validation and count how many answers were correct etc.). Now in my logic, it would be easy to copy everything from the Windows JQuery version to the Android JQuery version, if jQuery is linked in the app - but it isn’t. The exercises don’t work. Can anyone give some advice?

My steps were:

  1. I included jquery.js link in the index.html file, above the ionic/angular.js bundle.
  2. I created a new js file for the exercises which contains the code for checking and marking - which is also linked in the index.html file
  3. I copied everything into the right spot.

For some reason, it doesn’t work. Here’s the code for the exercises.js file:

    (function () {
    function validateForm() {
        var results = { "right": "0", "wrong": "0" };
        $("article .P1").each(function (index) {

            var goed = ""
            var fout = ""
            var chosen = $("#text1")
            if (chosen.val() == "is") {
                results.right++
                $("#feedback").html(goed);
                $("#feedback").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback").html(fout);
                $("#feedback").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text2")
            if (chosen.val() === "listen") {
                results.right++;
                $("#feedback2").html(goed);
                $("#feedback2").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback2").html(fout);
                $("#feedback2").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text3")
            if (chosen.val() === "are") {
                results.right++
                $("#feedback3").html(goed);
                $("#feedback3").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback3").html(fout);
                $("#feedback3").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text4")
            if (chosen.val() == "walk") {
                results.right++
                $("#feedback4").html(goed);
                $("#feedback4").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback4").html(fout);
                $("#feedback4").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text5")
            if (chosen.val() == "do you take" || chosen.val() == "Do you take") {
                results.right++
                $("#feedback5").html(goed);
                $("#feedback5").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback5").html(fout);
                $("#feedback5").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text6")
            if (chosen.val() == "doesn't barbecue" || chosen.val() == "does not barbecue") {
                results.right++
                $("#feedback6").html(goed);
                $("#feedback6").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback6").html(fout);
                $("#feedback6").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text7")
            if (chosen.val() === "watches") {
                results.right++
                $("#feedback7").html(goed);
                $("#feedback7").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback7").html(fout);
                $("#feedback7").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text8")
            if (chosen.val() == "celebrate") {
                results.right++
                $("#feedback8").html(goed);
                $("#feedback8").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback8").html(fout);
                $("#feedback8").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text9")
            if (chosen.val() == "don't love" || chosen.val() == "do not love") {
                results.right++
                $("#feedback9").html(goed);
                $("#feedback9").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback9").html(fout);
                $("#feedback9").css("color", "red")
                chosen.css("border-color", "red");
            }

            var chosen = $("#text10")
            if (chosen.val() == "works") {
                results.right++
                $("#feedback10").html(goed);
                $("#feedback10").css("color", "green")
                chosen.css("border-color", "green");
            } else {
                results.wrong++;
                $("#feedback10").html(fout);
                $("#feedback10").css("color", "red")
                chosen.css("border-color", "red");
            }
        })
        return (results);
    }

    $("#nakijken").click(function () {
        var results = validateForm();
        var str1 = results.right;
        $("#vragenGoed").html(str1)
        var str2 = results.wrong;
        $("#vragenFout").html(str2)
        var str3 = results.right / 10 * 9 + 1;
        $("#vragenCijfer").html(str3);
    })
})

Thanks in advance!

2

The ionic uses AngularJS, which also uses the $ sign. They conflict with each other. So instead of using the $ try using the jQuery for the code you wish to write in the jQuery.

3

why do you have an external ugly jquery-script instead of handling the stuff in a controller and so on?

But anyway:
is you script under the jquery-script in the index.html?
You are using a closure-function maybe you need to pass the jquery to it:

(function ($) {
})(window.jQuery); // or window.$ or window.jquery ... i do not know the correct name^^
4

so just changing the dollar-sign with the word jquery ?

5

Thats a way and the way @bengtler, mentioned is also a way.

6

cool, thanks (both). But, now I get an unable to load resource error.

7

try including jquery file first then angular and ionic.

8

I did, same error. I also switched from local to jQuery hosted by Microsoft, but that didnt work either.