jquery-extension not executing in chrome app

Question

I've encountered a strange problem with my chrome app i'm developing at the moment. I want to use the "knob" extension to use it for a alarm-clock slider (to set the time) This wouldn't be a really difficult matter, wouldn't it be for the restrictions and strange issues found while programming a chrome app.

In my index.html file I included the jquery library and the knob extension. And that is where the problems started. Somehow, my scripts only can use the Id's of elements that are above them. So when I include the tags between the tags, nothing executes, if I put them after the first tags they only work with the things that are in this div container. thats why I put the script just before the tag. That works well for "normal" javascript usability. But because I have a that referes to a jquery function (for the knob) the jquery library should be already loaded before the function gets executed (if not, it just doesn't work). I tried to get a workaround by using these posibilities:

---

document.onload=test();

function test(){

$(function() {
$(".dial").knob();
});
}

---

document.onload=test();

$(function test() {
$(".dial").knob();
});
}

---

document.onload=$(function() {
$(".dial").knob();
});
}

well.... It didn't work. I also tried window.onload, with the same reuslt. does someone have a solution? It would be of great help.

Thank you, neissen

Answer 1

Try like this:

$(function() { //document ready function
  function test(){ //inside the ready function
     $(".dial").knob();
  }
  test(); // and call the function here
});

Answer 2

Your Problems:

• jQuery may not be loaded but you used some vanilla JS to handle jQuery, which will cause errors.
• May be related to global and local.

For the external scripts, functions are only fired locally, which means the global object which contains the html won't be able to be accessed.

To make a global function and a jQuery library - JS:

if ("undefined" === typeof jQuery) {throw new Error("This library requires jQuery"); }
$(function() {
    window.myFunction = function() {
        doSomething();
    }
    doSomething();
})

Works calling from HTML - HTML:

<script>
    $(function() {
        doSomething();
    })
</script>

Above is the safest way to approach a jQuery library. The $(function() {... part means exactly the same as $( document ).ready(function() {..., execute if loaded and ready, ensures the browser knows how to deal with all the functions used.