I'm trying to load data to my index file remotely. I am able to do it locally with:
<body id="chk">
<script>
$(function(){
$('#chk').load('a.html');
});
</script>
</body>
Which works flawlessly but it is really no use to me as I can't update the a.html file remotely. What I'm looking to achieve is something like this:
$(function(){
$('#chk').load('ftp:/chkblabla.com/public_html/a.html');
});
But of course this doesn't load my data. Can it be done any other way? At the end, my goal is to load some string values to my app without having to make another build (Cordova).
You say "of course this does not load my data", but you don't explain why. Are you able to see javascript errors?
I'm always recommending to use adb to see the errors and warnings which come from the javascript engine: (at least for Mac OS)
adb logcat -v time | grep SystemWebChromeClient
If the problem is related to accessing external site, you will have to adapt your index.html at the line starting with
<meta http-equiv="Content-Security-Policy"
EDIT
I am not sure if this is relevant for you or not. A project I was developing two years ago was including this code:
<!-- include JQ, enable PhoneGap events under JQM, then include JQM -->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$( document ).on( "mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
HTH...
Related
I have a really basic socket.io application that listens on the server side for a button click on an html page.
index.html:
<html>
<head>
<script src="jquery.min.js"></script>
<script src="socket.io.js"></script>
<script src="index.js"></script>
</head>
<body><button id="asdf">click</buton></body>
</html>
index.js:
var socket = io('http://localhost:3000');
socket.on('connect',function(){
$(document).ready(function(){
$('#asdf').click(function(){
socket.emit('0.1');
});
});
});
This part works. What I'd like to do is put this functionality into a chrome extension so that I can have my node app respond to events in the DOM. Right now, I have a background page that injects a script when the extension icon is clicked.
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: 'script.js'
});
});
script.js:
console.log('test');
So this works too, but when I copy and paste the socket.io.js code into the script.js file, nothing is logged to the console, which I assume means that the script isn't working. Why doesn't this work, and is there a better way to integrate socket.io.js into a browser extension?
So I basically ended up connecting to the socket through a background page, and sending messages through that page from the content script, which worked out ok for my application.
I am very very new to phonegap android app developing. I have configured everything after huge trying. Now I am learning to coding in phonegap.
Recently I got a javascript code for phonegap. which should display an alert notification. But it is not showing . It only shows html codes results. My code is below
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.2.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",
onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
</body>
</html>
First check if you have included the right permissions in app/AndroidManifest.xml
If it doesn't works try with this:
function onDeviceReady(){
$(document).ready(function(e) {
navigator.notification.alert("PhoneGap is working!!");
});
}
You should check docs for 2.2.0
By the other hand I recommend you tu use a newer phonegap version.
Ok.. Here are some points that you need to check:
Make sure you have included cordova-2.2.0.js file in your application
folder.
Make sure you have mentioned the correct cordova file name in your
tag. For ex., if you have included cordova-3.0.0.js in your
application folder. You should mention the same file name in your
script tag.
You can try placing the onDeviceReady() function before the onLoad()
function and check whether it makes any impact. Try placing a
console.log() in the deviceready function.
There are some services (like FB like or AddThis) that provide a snippet of code.
It looks like
<div class="service-name" data-something="x"></div>
<script type="text/javascript" src="http://example.com/service-name.js"></script>
OK, cool, so normally you paste it to your HTML and it works. Not with Meteor.
Here's what I see:
<script> inside of template / body is not loading -- I don't see it in Resources, something in Meteor is actually preventing browser from recognizing it as a JS file
it works from <head>
Now here are the problems and questions:
I don't want loading it from <head> -- because of the speed
Even if I load it from there -- we have QA and PROD environments. They must load this script from different domains (like service-domain-qa.example vs. example.com)
And surprisingly you cannot use template helpers / variables in the <head>.
With traditional frameworks it's not a question at all - you can include scripts anywhere and they just load; you can use logic / variables in any part of you server templates.
So, how should I do this in Meteor?
Let me repeat:
I need some external scripts (hosted on 3rd party domain) to be loaded into my app page
Saving this script into my project's folder is not an option
Script path depends on the environment (we already have the settings system), so the place of the template that renders it should be passed some data from the code
I know the way to achieve this with dynamic script loading from my code (with LAB.js or whatever) on Template.created, but this is so much an overkill...
<script> tags in body or templates aren't executed by Meteor, they are parsed and then handled by Meteor's templating system. You can't expect a script tag in either of those to just work as it would with a normal HTML page.
The solution is to use Template events (where you could manually append the script tag to the body or something) or load it dynamically like you said. It's not overkill, it's how Meteor works - remember, there is no traditional HTML page or body, there's just the Meteor API, and the Meteor API specifies that in order to load and execute external scripts, you must use the appropriate API methods.
My solution is use packages. See https://github.com/meteor/meteor/tree/master/packages/spiderable for more details.
Package.describe({
summary: "External script"
});
Package.on_use(function (api) {
api.use(['templating'], 'client');
api.add_files('external_script.html', 'client');
});
<head><script type="text/javascript" src=""//mc.yandex.ru/metrika/watch.js""></script></head>
If you are using IronRouter you can load external scipt using this package:
https://github.com/DerMambo/wait-on-lib
Router.map( function () {
this.route('codeEditor',{
waitOn: IRLibLoader.load('https://some-external.com/javascript.js')
});
});
Why not use jQuery's getscript?
http://api.jquery.com/jquery.getscript/
You can add a callback function
You could use something like yepnope to load the script asynchronously. I use this to load leaflet as and when I need. I'm starting to move over to loading more scripts via yepnope, so that my application renders the bare minimum on initial page load. I place the yepnope stuff inside Template.created.
Using iframe and the public directory was a hack I used to get script code embedded. In this it was for google adwords code and I did this my main html template:
<iframe src="/gads.html?v={{{unique}}}" seamless width="160" height="600"
scrolling="no" frameborder="0" marginheight="0" marginwidth="0"
style="margin:0;padding:0;border:none;width:160px;height:600px"></iframe>
and then in the public directory put an gads.html file with my google adwords code, like this:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-54*********";
google_ad_slot = "66******";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>
that worked to get the code on the page, although it's far from ideal (for one thing, I think it violates google's terms of service).
I'm using METEOR 1.0. I have put all external SCRIPT tags inside a DIV element right before the tag in the layout template. Meteor recognizes them without any issue and they are loaded by browser.
i am using requires.js 2.0. I have the following simplified use case:
my HTML file:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript" data-main="apptest.js" src="../_js/libs/require/require.js"></script>
</head>
<body>
</body>
</html>
And then in apptest.js:
requirejs.config({
paths: {
'text': '../_js/libs/require/text'
}
});
requirejs(
['text!boxes.html'],
function (Boxes) {
alert("done");
}
);
Ok, so it doesn't really do much, but enough to make my point. Only in Firefox (14.0.1) i get an exception "uncaught exception: java.security.AccessControlException: access denied (java.io.FilePermission .\boxes.html read)".
So, require.js successfully loaded the text plugin, but fails loading my html file, which i want to use as a template later on. In Google Chrome and even IE9 it works just fine. I am on Windows 7.
I am running this on a local webserver, so no file://... requests here.
I have checked, if i have any special permissions set on the html file, but have not found anything suspicious.
Anyone have an idea?
Update: Running the test in Firefox 13.0.1 does actually work for me without errors. So could it be, that this is a bug, that has been introduced in firefox 14?
I was having the same problem a minute ago. I've fixed it by doing the following in the main.js file (where you setup the config)
Before the
require.config({.....
add the following code:
Packages = undefined;
This should do the trick.
You should have something like this:
Packages = undefined;
require.config({
baseUrl: theAppBaseUrl,
paths: {
Basically the explanation is that it is trying to use Java to get the file instead of an ajax request (for whatever reason). This forces it to use an XHR object to fetch it.
Cheers!
I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?
That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.
Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.
If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.