I'm really new at BB10, but I need to update a HTML app for BB10 where I need to call a function when the app opens. I have no idea where to begin and I can't find anything on Google. Can anyone give me some direction?
EDIT: I found a file called app.js with a function App.init = function(){..}
Safe to assume this is where I call the function?
OK I guess I was a noob, but I just put it in the <script> tag where I declare the js file.
<script type="text/javascript" src="js/BlackBerry-Test.js">
$(document).ready(function () {
updateFeed(true);
});
</script>
you can use IIFE(Immediately Invoke Function Expression)
(function(){
App.init();
})()
Related
I try to build a simple CRUD frontend with no frameworks! I try to integrate a TypeScript file (intex.ts) into my index.html but it keeps beeing not found so that the called functions are undefined. I'm aware that browsers can't handle typescript but need javascript. I build my app before testing and all ts files get compiled. I tried integrating the compiled js file but it's not found either. All my frontend code is in directory src/public.
How do I connect my public/index.html with my public/index.ts so that the fundtions work?
relevant index.html code
<head>
<script type="text/typescript" src="index.ts"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
</body>
all index.ts code
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
error i'm getting when clicking the button
index.html:18 Uncaught ReferenceError: clickButton is not defined
at HTMLButtonElement.onclick (index.html:18)
I use express in the backend and use express.static:
app.use(express.static("src/public"));
It seems to be an error caused because the function is defined outside of the global scope.
You can try to assign the function to the global window object just below of the function declaration:
function clickButton(){
...
}
window.clickButton = clickButton; // Now the function can be accessed from global scope
Also u can try to add the eventlistener on your JS file instead of using the html attribute onclick:
function clickButton(){
...
}
document.querySelector('.button-smth').addEventListener('click', clickButton);
This way you don't need to assign the function to the global scope at all, but you will need to add the class '.button-smth' (or whatever) to the html button element.
Hope this helps!
Your ts need to be compiled to js first. Then, you could possibly use it as follows -
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
<div id="cases"></div>
</body>
Note: This is just a possible solution
I am trying to use the Async module of https://github.com/millermedeiros/requirejs-plugins to load the googlemap api. My index.html file contains the following requirejs configuration:
<script data-main="scripts/myscript" src="scripts/require.js"></script>
<script>
requirejs.config({
"baseUrl": "scripts",
"paths": {
"async": "require_plugins/async",
"gmaps": "gmaps",
"infobox":"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox",
"jquery":"//code.jquery.com/jquery-2.1.1.min",
"jquery_mob":"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min"
},
waitSeconds: 15
});
All my javascript files are stored in a scripts folder (relative to index.html)
e.g. script/myscript.js and script/require.js and the async plugins are stored in a subfolder of script called require_plugins e.g. script/require_plugins/async.js
The javascript where I define the googlemap module is called gmaps.js (stored in the script folder) and looks as follows:
define("GMAP",['async!https://maps.googleapis.com/maps/api/js? &key=xxxxxx®ion=uk&libraries=places,geometry'], function () {
return window.google.maps;
});
I have obfuscated the key parameter intentionally here. According to the documentation, I should be able to use the gmaps module anywhere in other javascript files just by invoking it like so:
require(["gmaps"],function(GMAP)
{
map= new GMAP.Map("#map-div");
//and then some code to display the map
}
Unfortunately, it does not work at all. It seems that the googlemap library has not loaded at all. I use absolute URLs for jquery and that works fine but googlemap fails miserably. My question is: Is there something wrong with my requirejs config? I can't think of anything else causing this fault :(
My understanding is that the name you set in define() is what you need to use when writing the dependencies.
e.g.:
define('GMAP', ['async!<path>'], function() { return window.google.maps; });
require(['GMAP'], function(GMaps) { ... });
This is how I get GMaps to load for me. I have a secondary problem now that other libraries that depend on Maps no longer load.
I have been trying to write a small Google App Script which has the Google+ badge as shown here. For this I have a plain HTML file where I have included the HTML as shown on that page. The HTML page is as follows :
<html>
<body>
<div class="g-plus" data-href="{Page-Link}" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
alert("Added Badge!");
})();
</script>
</body>
</html>
The result is a blank page. There is no badge added to the page . I assume this is because the javascript function is not being run( I added an alert and there wasnt any pop-up ).I am not able to figure out why the function is not being run.
Any help is appreciated.
Unfortunately I'm not too experienced with Javascript so I'm guessing here. I've programmed in coffeescript a while ago and its compiler automatically wraps the generated code in an anonimous function just as in your code. This function is called so:
(function() {//...}).call(this);
Maybe this works.
Alternatively you might want to move the alert test above the badge generation. This would show if the javascript is run at all. Maybe the error lies in your badge creation code.
My final idea would be to name your function and register it as a callback on body.onload . It's always a good idea to let the browser load the page before accessing the dom
Ok, this is my final tango with this. Below I've listed the code. I'm able to get the value of the url and display it on screen for the current (active tab) in Google Chrome. Now all I have to do is pass that value as a parameter in the URL via JSON. My processing file resides on a our remote server - in php. Everything I've done with respect to this has worked to perfection. However, any attempts to pass the current url or any url as one of the parameters - e.g. ?format=json&url=http://something.com&callback=? - results in nothing. I'm not sure if what I'm doing is wrong or if it is even possible. The important thing to note is that all we are looking to do is pass the url to a remote server for storage, processing etc and send back results. I have everything working but I just can't seem to get the url to pass as a parameter.
<html>
<head>
<title>API JSON Test</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
window.addEventListener("load", windowLoaded, false);
function windowLoaded() {
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var timeService =
"http://api.ulore.com/api2.php?key=abce&url="+tab.url+"&format=json&callback=?";
$.getJSON(timeService, function(data) {
$('#showdata').html("<p>url_results="+data.post.url+"</p>");
});
});
</script>
<div id="showdata"></div>
</head>
<body>
</body>
</html>
Again, all the JSON works fine when I'm testing other code. Even if I put in a NON-URL value as a parameter for url=..... it throws the appropriate error. However, it will not accept a URL for some reason.
Any feedback will be greatly appreciated.
Thanks,
Ethan-Anthony
Try encoding and decoding the url.
http://www.w3schools.com/tags/ref_urlencode.asp
http://php.net/manual/en/function.rawurlencode.php
http://phpjs.org/functions/rawurlencode:501
I've been struggling with this for a while and can't figure it out. Hopefully it's something obvious that I missed.
Here's the code:
$(document).ready(function() {
$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
console.log('click2 loaded');
$(this).hide()
.fadeIn(3000);
$('#click2').click(function(e) {
e.preventDefault();
console.log('click2 clicked');
$('#bizdev').load('pagewithscripttags.php', function (data) {
console.log(data);
console.log('#bizdev is loaded, but scripts are not run');
$('#bizdev').hide();
console.log('bizdev hidden');
});
$('#content').hide();
$('#bizdev').show();
});
});
When I run this (from an external js file), the file 'pagewithscripttags.php' is loaded into the DOM on the click event, but the scripts are not executed and I can't figure out why. HELP!
However, when I move the load method into the callback function of the first load, the file is inserted into the DOM and the scripts are run:
$(document).ready(function() {
$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
console.log('click2 loaded');
$(this).hide()
.fadeIn(3000);
$('#bizdev').load('pagewithscripttags.php', function (data) {
console.log(data);
console.log('#bizdev loaded and scripts are run');
$('#bizdev').hide();
console.log('#bizdev hidden');
});
$('#click2').click(function(e) {
e.preventDefault();
console.log('click2 clicked');
$('#content').hide();
$('#bizdev').show();
});
});
Why do the scripts run as part of the callback function, but not on the click event (which is when I need them to run)?
Here are the contents of pagewithscripts.php:
<script>console.log('this script was run');</script>
<script type="IN/MemberProfile" data-id="http://linkedin.com/publicprofileurl" data-format="inline" width='106px' data-related="false"></script>
The first script is run and appears on the console.log, but the second is just inserted into the DOM without being run, except when I place the .load() method outside of the click handler.
(I need to load the scripts on the click event because they take several seconds to run (they call the LinkedIn API) and there's freezing/lag when I run them on document ready.)
You probably need to tell the LinkedIn framework to re-scan the page.
IN.parse(domNode)
This is covered on the JavaScript API reference document on events here:
https://developer.linkedin.com/documents/inauth-inevent-and-inui
Load the script datatype
http://api.jquery.com/jQuery.getScript/
Actually jQuery 'click()' function will not handle the 'click' event of dynamic elements, so try on() or live() functions to make your code working fine, using these functions you can move the click handler code out of the first load() callback.
FYI: Try to replace your $('#click2').click(function(e) { code with this $('#click2').live("click", function(e) { code.
Note: 'live()' function is deprecated from the jQuery version 1.7 onwards.
If you are not clear to use these functions then just provide your full page source so that I can check and adjust your code accordingly.