I am unable to access ruby variables from JavaScript in tideSDK applications. The SDK version I am using, is the currently latest version of 1.2.0.RC4. Here is a basic example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style type="text/css">
body {background: #fff;}
</style>
</head>
<body>
<h1>Hello World</h1>
<script type="text/python">
helloP = "Hello from Python!";
</script>
<script type="text/ruby">
$helloR = "Hello from Ruby!";
</script>
<script type="text/php">
$helloPHP = "Hello from PHP!";
</script>
<script type="text/javascript">
alert("Hello from JavaScript!");
alert(helloP);
alert(helloPHP);
alert(helloR);
</script>
</body>
</html>
In this example, I have declared and assigned values to python, PHP and ruby variables.
JavaScript alert() function works with the python and PHP variables, but not with the ruby variable. So, alert(helloP); and alert(helloPHP); work and display a pop up dialog with the contents of those variables, but nothing is displayed with alert(helloR).
On the other hand, ruby functions can be seen by JavaScript. So, if ruby_function is a ruby function, in JavaScript alert( ruby_function() ) works.
So, how can JavaScript see ruby variables? Any suggestions?
This will not work in 1.2 release.
You need to have the ruby in an include file, not inlined.
Then it works as expected.
In Resources folder: index.html
<html>
<head>
<script>
Titanium.include("ruby.rb");
</script>
</head>
<body style="background-color:#ccc;margin:0">
</body>
</html>
<script>
console.log(window.crim);
console.log(crim);
alert(crim.foo);
</script>
in Resources folder: ruby.rb
window.crim = {
'foo' => 'bar'
}
Please see https://wiki.appcelerator.org/display/guides/Using+Titanium+Desktop+with+Ruby - look for the info under the heading Titanium Desktop 1.2.0.RC1 SDKs and more recent.
Related
I couldn't for some reason get the jquery input mask plugin to work. I didn't know jquery so any person whom had worked in jquery please reply. here is my testPage.php code
<html>
<head>
<script src="view/script/jquery-2.1.1.js" type="text/javascript"></script>
<script src="view/script/jquery.inputmask.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function ($) {
$("#cnicFieldName").mask("99999-9999999-9");
});
</script>
ID :<input type="text" id="cnicFieldName" /> <br />
</body>
</html>
FYI: Yes I had included both the jquery (latest avalible version) and jquery.inputmask.js from the dist folder i.e. jquery.inputmask-3.x\dist\inputmask\jquery.inputmask.js. (I had downloaded both from jquery.com (both the main jquery file and the input mask plugin)
When I select the input nothing appears in it i.e. underscores etc and it didn't prevent charecter data in it. I am sure I am missing a very minute detail but I couldn't figure out what that is. Thanking you in advance for considering to reply.
You need to call mask after the document is ready. And you are using mask("99999-9999999-9") inlace of inputmask("99999-9999999-9");.
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#cnicFieldName").inputmask("99999-9999999-9");
});
</script>
ID :<input type="text" id="cnicFieldName" /> <br />
</body>
You can refer jquery.inputmask 3.x plugin or check JSFiddle
I have just found out about this fantastic project, called OpenCPU. I am currently trying to learn how to use CORS to integrate R in web applications. To do so, I am replicating a simple example, but until now I have been unsuccessful.
I am trying to use the smoothplot function from the stock package and integrate it in an external web-page (https://github.com/opencpu/stocks).
I have already looked at the examples at the OpenCPU web-page and the ones on jsfiddle, but without luck figuring out what I am doing wrong.
Can anyone point me in the direction of my mistake when calling the smootplot function? Or am I missing something completely?
My html and script is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCPU demo app</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- ocpu library -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script src="//public.opencpu.org/js/opencpu-0.4.js"> </script>
<style>
#plotdiv {
height: 400px;
border: solid gray 1px;
}
</style>
</head>
<body>
<h1>Call R to download data for a specified stock ticket and plotting it</h1>
<b>Ticker</b> <input type="text" value="GOOG" id="ticker">
<button id="submitbutton" type="button">Submit to server!</button> <br><br>
<div id="plotdiv"></div>
<!-- input and recieve output specified using jquery, and RESTful software architectur-->
<script type='text/javascript'>
// location of R function on openCPU server
ocpu.seturl("//public.opencpu.org/ocpu/library/stocks/R")
//call R function: stocks::smoothplot(ticker=ticker)
$("#submitbutton").click(function(){
var ticker = $("#ticker").val();
var req = $("#plotdiv").rplot("smoothplot", {
ticker : ticker,
from : "2013-01-01"
});
req.fail(function(){
alert("R returned an error: " + req.responseText);
});
});
</script>
</body>
</html>
Best regards
As #Jeroen pointed out, change your
<script src="//public.opencpu.org/js/opencpu-0.4.js"> </script>
to
<script src="//public.opencpu.org/js/archive/opencpu-0.4.js"> </script>
and it should work just fine (it did for me).
I'm creating extension using crossrider. In this extension I want to open a new tab with html from resources. Its opening page in new tab without issues. Now I want to add js & css to that, that to available in resources. Kindly help in adding css & js.
code in background.js
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
in troubleShooter.html
<html>
<head>
<link media="all" rel="stylesheet" type="text/css" href="css/ie.css" />
<script type="text/javascript" src="js/ie.js"></script>
</head>
<body>
</body>
</html>
Crossrider recently introduced the ability to open a new tab with HTML from resources. However, such pages cannot directly access other resource file using link and script tags embedded in the HTML.
Though in it's early release, one of the features of the HTML page is the crossriderMain function that runs once the page is ready. In this early release, the function supports the following Crossrider APIs: appAPI.db.async, appAPI.message, and appAPI.request.
Hence, even though in this early release there isn't a direct method to add resource CSS & script files to the resource HTML page, you can workaround the issue by loading the resources into the asynchronous local database and applying it to the HTML page using standard jQuery. For example:
background.js:
appAPI.ready(function() {
// load resource file 'style.css' in to local database
appAPI.db.async.set('style-css', appAPI.resources.get('style.css'));
// load resource file 'script.js' in to local database
appAPI.db.async.set('script-js', appAPI.resources.get('script.js'));
// open resource html
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
});
troubleShooter.html:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">')
.html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
style.css:
h1 {color:red;}
script.js
console.log('CONTEXT:: script.js running');
Disclaimer: I am a Crossrider employee
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
I've been trying in vain for the last couple hours to learn History.js. I've created three extremely simple test files, but I can't seem to get anything working. Here are the contents of my three files.
history.html:
<!doctype html>
<html>
<head>
<title>History Test</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>
<script type="text/javascript" src="history.js"></script>
</head>
<body>
about
</body>
</html>
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
});
function handleStateChange() {
alert("State changed...");
}
about.html:
<!doctype html>
<html>
<head>
<title>About</title>
</head>
<body>
About...
</body>
</html>
When I click the 'about' link, why doesn't the statechange event fire or my handleStateChange() function execute?
I'll answer my own question in case it helps someone else. I was under the mistaken impression that the 'statechange' event would fire anytime the browser's URL changed (e.g. clicking a link or clicking the back button). What I discovered is that 'statechange' only fires when you push something onto the History. So I updated my JavaScript to add a listener to the link...
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
$("#about").click(function() {
History.pushState(null, null, "about.html");
});
});
function handleStateChange() {
alert("State changed...");
}
...and now I get the alert when I click the link and when I click the browser's back button.