IBM Worklight - jQuery not recognizing any element on html page

StackOverflow https://stackoverflow.com/questions/20937376

Question

I have been trying to call a function on button click in HTML page but somehow the function defined in .js file is being called but i am unable to perform work on any element defined in HTML page. None of my element is being accessed by jQuery. I have tried reading many things and trying out different combinations but nothing seems to work.

I created a new IBM Worklight project named "Hello". So when i add the above HTML content in Hello.html and the above JS code in Hello.js, the code works perfectly fine. But when I create a new UI.html and control.js in the same project and the respective contents as stated above the code is not working...


Here is my HTML code:

<body>
    <div id="AppBody">
        <div id="header">
             <h1>UI Controls</h1>

        </div>
        <div id="wrapper">
            <input type="button" id='SimpleDialogStartButton' value="SimpleDialog" onclick="w()" />
            <input type="button" id='BusyIndicatorStartButton' value="BusyIndicator for 5 seconds" onclick="w()" />
            <br />
        </div>
    </div>
    <script src="js/control.js"></script>
</body>


and here is my control.js:

    var busyIndicator = null;

    function w() {
       // alert("bvgb");
        busyIndicator = new WL.BusyIndicator({
            text: "LOADING..."
        }, {
            color: "RED"
        });
        $('#SimpleDialogStartButton').click(simpleDialogDemo);
        $('#BusyIndicatorStartButton').click(busyIndicatorDemo);
    }
    function busyIndicatorDemo() {
        alert("fdsddsds");
        busyIndicator.show();
        setTimeout(function () {
            busyIndicator.hide();
        }, 5000);
    }
    function simpleDialogDemo() {
        var dialogTitle = "CommonControls";
        var dialogText = "This is simple dialog text";
        WL.SimpleDialog.show(dialogTitle, dialogText, [{
            text: 'I am button 1',
            handler: simpleDialogButton1Click
        }, {
            text: 'I am button 2',
            handler: simpleDialogButton2Click
        }    
function simpleDialogButton1Click() {
alert("simpleDialogButton1 Clicked");

}

function simpleDialogButton2Click() {
alert("simpleDialogButton2 Clicked");
}

Even if i try adding this line in function w() above

 $("#p1").css("border","3px solid red");

and

 <p id='p1'>kjbdsds</p>

In my HTML code, still nothing works.

Was it helpful?

Solution

IMO you need to stop for a moment from everything you are doing, and then go through the training modules IBM Worklight provides to you: http://www.ibm.com/developerworks/mobile/worklight/getting-started.html

By doing so you will then understand that Worklight is a single page application. You cannot simply include more HTML files in your application and expect them to work.

In addition, as you've mentioned jQuery (v1.9.1) is bundled with Worklight. Anything you'd, properly, do in your main HTML and JS files (the ones auto-generated when you create a new project and application in Worklight Studio), will work.

When you create a new HTML file and apply to it these changes you've mentioned in the question - it will not work because not jQuery nor the Worklight framework files are being referenced in it, so it is simply some lonely HTML file, not connected to anything.

If you will load, for example, this new HTML file from the main HTML file of the application, you will lose the Worklight context and the app will stop working.

You cannot have more than 1 HTML file in your Worklight application.

However! If what you are looking to do is to create an application with multiple pages, then I again suggest to take a look at the documentation, as there is a dedicated training module for this as well (see below).

Training modules: http://www.ibm.com/developerworks/mobile/worklight/getting-started.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top