I am developing a Phonegap application on every platform. Everything goes well except the declaring of variable. Here is my code:
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
var something = "Sth";
document.addEventListener('deviceready',startsth(),false);
function startsth(){document.write(something);}
....
</script>
When I try to check if there is internet, the application outputs "undefined". It works fine if I do not check the network. How can I fix the problem?
You are connecting the deviceready handler in a wrong way:
document.addEventListener('deviceready',startsth(),false);
^------ REMOVE THIS PARENS
when you connect to startsth() you are using the return value of the startsth function, instead of a pointer to the function itself, which is just startsth
Use this:
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
var something = "Sth";
document.addEventListener('deviceready',startsth,false);
function startsth(){document.write(something);}
....
</script>
You were calling the function startsth immediately with the parentheses afterwards, i.e. startsth(), rather than merely passing it as a function reference to be registered as a listener, to be called later upon the deviceready event.
UPDATE:
Other things to try:
Make sure you have the path for src="phonegap.js" correct.
Move the scripts to near the top of the document so that you don't miss any events.
Switch the order of the scripts in case the event is being fired very quickly and you're missing it.
Don't use document.write(...) - it overrides the page contents if called after the DOM has loaded, resulting a mostly blank page.
Related
I wish to call a javascript function from an HTML page and I do not want it dependent on any event. The function is in a separate .js file since I wish to use it from many web pages. I am also passing variables to it. I've tried this:
HTML:
<script type="text/javascript" src="fp_footer2.js">
footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
</script>
The function in fp_footer2.js:
function footerFunction(path, file) {
document.write("<a href=" + path + "/" + file + " target='_blank'>Link to the original web page for this assignment.</a>");
return;
}
(I have also tried putting the fp_footer2.js file reference in the header, to no avail. I'm not sure if I can put it 'inline' like I did in this example. If not, please let me know.
PS: I know I can do this with a simple 'a href=""' in the HTML itself. I wanted to see if this could work, for my own curiosity.
If a <script> has a src, then the external script replaces the inline script.
You need to use two script elements.
The strings you pass to the function also need to be actual strings and not undefined variables (or properties of undefined variables). String literals must be quoted.
<script src="fp_footer2.js"></script>
<script>
footerFunction("1_basic_web_page_with_links", "1bwpwl.html");
</script>
JavaScript will run while your page is being rendered. A common mistake is to execute a script that tries to access an element further down the page. This fails because the element isn't there when the script runs.
So includes in the <head> will run before any DOM content is available.
If your scripts are dependent on the existence of DOM elements (like a footer!) try to put the script includes after the DOM element. A better solution is to use the document ready event ($(document).ready() in jQuery). Or window.onload.
The difference between documen ready and window onload is that document ready will fire when the DOM has been rendered; so all initial DOM elements will be available. Where as window onload fires after all resources have loaded, like images. window onload is useful if you're doing things with those images. Usually document ready is the right one.
Maybe I misunderstand your question, but you should be able to do something like this:
<script type="text/javascript" src="fp_footer2.js"></script>
<script type="text/javascript">
footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
</script>
Have you tried calling it from a document.ready?
<script type="text/javascript">
$(document).ready(function() {
footerFunction(1_basic_web_page_with_links, 1bwpwl.html);
});
</script>
Background
I've inherited an ancient web application that has input controls with custom behaviors defined with an old-fashioned HTC (HTML Component) script, e.g.:
<input name="txtFiscalYearEndDay" type="text" value="30"
maxlength="2" size="5" id="txtFiscalYearEndDay" class="Text1"
style="behavior:url(/path/js/InFocus.htc);" />
Here are the relevant parts of this HTC file to illustrate the issue:
<PUBLIC:COMPONENT tagName="InFocus">
<PUBLIC:METHOD NAME="setValid" />
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="initialize" />
<SCRIPT LANGUAGE="javascript">
function initialize() {
// attaches events and adds CSS classes, nothing fancy
}
function setValid(bInternal) {
// checks some flags and changes a label
}
</SCRIPT>
</PUBLIC:COMPONENT>
So, nothing out of the ordinary so far. Additionally, I have some JS that runs on DOM-ready:
$(function() {
txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
});
And the validation function:
function txtFiscalYearEndDay_Validate(el) {
...
}
Note: I'm not using $('#txtFiscalYearEndDay') because then I really can't try to call setValid(true); on the element, nor do I want to have to do $('#txtFiscalYearEndDay')[0].setValid(true);.
The problem
At one point in the validation function, I'm attempting to call a method on the element, the one added by the HTC script:
el.setValid(true);
However, the IE debugger gets sad and complains that setValid() is not a function. Inspecting it in the debugger confirms this:
typeof el.setValid // "unknown"
Of course, once the page has completed rendering (or whatever period of time is needed for the document to actually be ready has passed), the validation function works as expected (because I'm calling the same validation function on change and blur events as well). That is, when the function is called outside of jQuery's on-DOM-ready function, it works just fine.
Do any of you have any ideas at to what might be happening here? Is jQuery's "ondomready" being registered before the HTC script's "ondomready"? Can I somehow change that order?
I'm currently seeing this behavior in all versions of IE.
EDIT: WORKAROUND
I discovered a workaround. If you take the function call out of the jQuery ready function and throw it at the end of the page, it works (i.e.:)
...
<script type="text/javascript">
txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
</script>
</body>
</html>
I do not know if HTC counts toward page ready but i suspect they do not.
What you might try is check something that only is tru after the HTC hase finished.
You own script should then start something like this:
function MyFunction() {
if(!HTCIsreadyTest()) {
setTimeout(MyFunction, 100);
return;
}
//the rest of your code
}
This basically makes you function check and restart in 100 milliseconds if conditions are not met untill the test succeds.
You could also ad a counter argument increasing it by one for each attempt to have some timeout code trigger if HTC sciprts has not loaded after 2 seconds
The easiest workaround I could find was to move the validation function call out of the jQuery ready() callback and move it to the end of the page:
...
<script type="text/javascript">
txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
</script>
</body>
</html>
However, I found a more elegant solution. Because I seemingly need to wait for all page resources to be loaded, I simply needed to move the function call out of the jQuery ready() callback and instead put it in a window load() callback:
$(window).load(function() { // instead of $(function() {
txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
});
I'm using the latter so I can keep all of the JS code together.
Consider a javascript file script.js which contains the code alert(theVar);
Now, i linked the js file to the document like
<script type="text/javascript">
var theVar= 'a alert';
</script>
<script type="text/javascript" src="script.js"></script> //Contains alert(theVar);
The variable theVar is used and i get a alert. This works fine.
When,
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var theVar= 'a alert';
</script>
is used, i am not getting a alert.
I know the problem is because of the variable, which is declared after loading the js file.
But is there any way to get the variable declared anywhere in the document ?
in script.js do
window.onload = function() { alert ( theVar ) }
Or your favorite library dom ready fn, so it invokes the callback after a certain event instead of immediately.
Though, this really depends on what kind of functionality script.js has, which you have not specified thus far.
The important bit is that code gets executed in the appropriate order. You should delay the call to alert(theVar) until the document gets fully loaded. For instance, you can attach an onload event handler to the window object.
It's also worth noting that calling external *.js files does not affect the way code gets run.
The simple solution:
Move the script.js inclusion to the last row of the body. That way a variable declared at any point in the document can be used.
The technical solution:
Inside script.js, hook on to the window.onload event before doing any evaluating. The result is the same as with the simpler solution, but allows you to keep you script tags in the head (or anywhere for that matter).
I have a JS script that will be hosted on my server and that others will embed in their html, i.e.
...<code for http://yoursite.example.com />
<script type="text/javascript" src="http://mysite.example.com/awesome.js" />
...<code for http://yoursite.example.com />
My script declares an object with a bunch of properties accessible for use as a Javascript Object(), i.e.
<script type="text/javascript">
//From http://mysite.example.com/awesome.js
alert(Awesome.Name);
</script>
Due to the load time variance, it seems I need to signal that the "Awesome" object in my script is ready. I need this to stand on its own, so no dependencies on specific JS frameworks.
Do I need to publish my own custom JS event, or does the simple fact that my script is loaded get captured by one of the existing page-level events? How else should I be doing this?
UPDATE: as a point of reference, if I include the JS in an HTML page running from http://mysite.example.com, the Awesome object is available and populated. When the JS file is included from another domain, the object is undefined at runtime.
The javascript content of <script> tags is executed procedurally, so this
<script type="text/javascript" src="http://mysite.com/awesome.js" />
<script type="text/javascript">
alert(Awesome.Name);
</script>
will only alert the contents of Awesome.Name if found in any previous script tag.
To understand if everything has been fully loaded on the page, you have to use the DOMContentLoaded, for firefox, and "onreadystatechange" for ie. Also you can simply check the load event on the window object if you don't care about checking the DOM (could be easier).
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", function(){
doSomething();
}, false );
} else if ( document.attachEvent ) { // IE
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
doSomething();
}
});
}
If your script needs the DOM to be loaded before your object is instantiated, you should look at some frameworks and see how they handle this, then implement it in your code. If you don't need the DOM to be loaded, then I would let the user worry about the timing of using your object based on when it is loaded. Generally, your object should be available to be be used as soon as your script has been loaded, which means that the object ought to be available right after the script tag that includes it.
Anything accessible in the global scope can be accessed through the window scope. Hence, you could use this:
if (window["Awesome"] != null) { /* do something */ }
A). You realise that script requests are blocking? Are you ok with this or do you want to work around that, because the answer to your question depends on it.
B). Bare bones bulletproof and simple mechanism is to call a specified method which you can guarantee exists on the page. Let that methods implementation be up to the user to do what it will. Lots of other ways exist but we'd need to know what exactly the lifecycle and intent of your code is to recommend anything.
you can simply use it like this:
<script type="text/javascript" src="myfunction.js"></script>
<script type="text/javascript" src="iwannaloadthis.js?onload=executeThis"></script>
remember as pointed out earlier, execute this must be defined in myfunction.js (or before trying to load iwannaloadthis.js.
Hope this helps!!
I'm creating a jquery time entry in an onready() handler and hiding it in another onready() handler in jquery. (The reason that the code is being called in two different onread() handlers is that the time entry is being created via a reusable Django widget renderer and hidden via local screen application logic.)
The jquery time entry gives a critical error if you try to create a jquery time entry on an input field that is hidden. The following code will cause fatal errors on IE7 and Firefox. If I hide() the entry after it is created everthing works fine, but I can't control the order of my two onready() handlers (this is due to framework issues that can't be worked around.) Is this a bug in the timeentry, or undefined behavior in browsers? Is there a graceful way to work around this without having a specific hack to work around the issue?
<html>
<head>
<script type="text/javascript" src="jquery_ui/jquery-1.3.js"></script>
<script type="text/javascript" src="jquery_ui/ui.core.js"></script>
<script type="text/javascript" src="jquery_time_entry/jquery.timeentry.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id_testTimePicker').hide();
});
$(document).ready(function(){
var id = "#id_testTimePicker";
$(id).timeEntry({spinnerImage: '%sjquery_time_entry/timeEntry.png'
, timeSteps: [1, 5, 1]});
$(id).timeEntry('setTime', new Date());
});
</script>
</head>
<body>
<input id="id_testTimePicker"></input>
</body>
</html>
UPDATE: In the above code it is actually only the "setTime" command that causes the browser error. If I change that to a $(id).setVal(str) where str has the proper time format setup for the widget then everything works fine.
In the second ready handler, include a call to ".show()" before calling timeEntry, then ".hide()" it again afterwards.
That said, it seems odd that timeEntry would care if it was visible or not. It really shouldn't matter, so I would guess it's a bug in timeEntry.
EDIT: If you don't know in the second handler if it should be hidden or not, just query the state of the element before hand with "$(id).is(':hidden')" and behave accordingly.
Can't do this?
$(document).ready(function(){
var id = "#id_testTimePicker";
$(id).timeEntry({spinnerImage: '%sjquery_time_entry/timeEntry.png'
, timeSteps: [1, 5, 1]});
$(id).timeEntry('setTime', new Date());
$(id).hide();
});