Ok so I'm fairly new to dojo and I'm trying to make a really simple sample mobile app. I'm using eclipse to run the code which uses an android emulator to install/run the app. The problem I'm having is that I keep getting Uncaught Reference Errors for either "require is not defined" or "dojo is not defined", causing my app to appear as plain text instead of formatted like an android app using dojox.mobile widgets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<title>PhoneGap</title>
<!-- DOJO -->
<script src="/assets/www/lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad:true">
</script>
<link rel="stylesheet" href="/assets/www/lib/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="/assets/www/cordova-1.6.0.js"></script>
<script>
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
</script>
</head>
<!-- END DOJO -->
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accHelp" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Accident</h1>
<div class="text">If you are in an accident, you should first move to a safe
location. Below are some additional actions you can take:</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Exchange Driver Info</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Record Accident Location</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Take Photos of Accident</li>
</ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accInfo">
<h1 data-dojo-type="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
onClick="console.log('Going back');">Driver</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
</html>
Does anything appear wrong with the code itself? Especially where I'm using the script scr... to point to the dojo.js and where I'm using require to call the dojo.mobile functions. I was under the impression that as long as the src pointed to the right location in the package tree, it didn't much matter where I copied the file in.
I have tried using the Google CDN to call dojo.js, but the emulator throws errors when I do so, possibly because it doesn't utilize an internet connection?
Any help would be great!
Try removing /assets/www/ from your local URLs
Your require statement looks like this:
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
And it should look something like this:
require([
"dojo/mobile",
"dojo/mobile/parser"
],
function(mobile, parser) {
// your code here;
});
Related
Im using idtabs jquery library and when i put ads on the page, the script stops working. I tried plain script with only idtabs and google adsense code. If I run the script on my localhost, it runs ok (because adsense doesnt show), but once i upload it on server, the ads shows and the script id tabs wont work. Anyone know how to solve this?
<!DOCTYPE html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.idTabs.js"></script>
~~google adsense code here
</head>
<body>
<div class="usual">
<ul class="idTabs" >
<li><a class="selected" href="#tab1">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div style="display:block;" id="tab1">This is tab 1.</div>
<div style="display:none;" id="tab2">More content in tab 2.</div>
<div style="display:none;" id="tab3">Tab 3 is always last!</div>
</div>
</body>
</html>
I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923
I am implementing amcharts in CQ. I get the data by calling a servlet which I temporarily hosted in a local glassfish server. Following is the code snippet of my amchart component jsp.
<%#include file="/libs/foundation/global.jsp"%><%
%><%#page session="false" %><%
%><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test amcharts generation</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
<div id="singlesection" class="norm" >
<div class="norm">
<script type="text/javascript" src="/apps/geometrixx/components/amchart/am/swfobject.js"></script>
<div id="flashcontent"><strong>You need to upgrade your Flash Player</strong></div>
<div id="result"></div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/apps/geometrixx/components/amchart/am/amstock.swf", "amstock", "600", "400", "8", "#FFFFFF");
var uri = "http://localhost:8080/Charts/apps/CreateXMLFileServlet?r="+Math.random()+"&fc=03";
so.addVariable("settings_file", encodeURIComponent(uri));
so.addVariable("chart_id", "amstock");
so.addVariable("key", "106-d0564444fe0a5ce6839d84f70655375c");
so.write("flashcontent");
// ]]>
</script>
</div>
</div>
</div>
</body>
The issue is, the servlet is not getting called. If I try the servlet url directly from the browser, I get the response. Please suggest what I am doing wrong here. Thank you.
It sounds like you may be running into a cross-domain security restriction. If you are loading the page the has the SWF code from one domain, but then calling a different domain to get the data, you are likely running into security restrictions. Can you list the full domains for both pieces?
Check out http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html for info on how to get around this.
Hy There...!
I have some problems when its come to Jquery ..............
Here i am trying to use TinyMCE Text Editor... I had download its Js File and some code with it mention it in there site...
But When i see my index.HTML it is all Blank.....
Which i don't understand Please Any Help or hint will be appreciated........
Thanks in Advance ... Here Is The Code
<html>
<head>
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="index.html">
<textarea name="content" style="width:100%" class="mceEditor"></textarea>
</form>
</body>
</html>
I believe you are not linking the tinymce.js file correctly. Make sure it's linked correctly relative to the directory of index.html file.
I used the same markup you provided and made it work in jsFiddle using the script from TinyMCE CDN.
http://jsfiddle.net/AHXXT/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use Twitter Bootstrap popovers for jQuery validation notifications?
Trying to use bootstrap's styles for form validation.
I'm using this javascript validator, that was customized for bootstrap:
https://github.com/ddarren/jQuery-Live-Form-Validation-For-Twitter-Bootstrap
In the head:
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.validate.js" type="text/javascript">
In the body:
<form id="Form" action="" method="post">
<div class="control-group">
<input type="text" class="span3" id="Mobile" placeholder="Mobile
Phone Number" name="Mobile">
</div>
<div class="control-group">
<button type="submit" class="btn btn-primary btn-large">Submit
</button></p>
</div>
</form>
And it doesn't highlight the fields with bootstrap's error styles. Any ideas where I'm going wrong? Thanks in advance.
I'm working on something similar so I think I might help you.
First of all, jQuery-Live-Form-Validation-For-Twitter-Bootstrap library is quite old (September of 2009).
It uses version 1.3.2 of jQuery (the newest is 1.7.1) and it doesn't use the original Bootstrap files at all!
If you downloaded jQuery-Live-Form-Validation-For-Twitter-Bootstrap (what I am sure you did) from github site you can easily check in css folder that there are two css files written by the author of that library.
Answering to your question, I downloaded that lib and I've pasted your code and... it works. Simply, you need to have in head this (and that files in folders):
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.validate.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript">
</script>
<script src="javascripts/jquery.validate.js" type="text/javascript">
</script>
what is originally taken from jQuery-Live-Form-Validation-For-Twitter-Bootstrap.
If you really want to have Twitter Bootstrap form validation with jQuery I would like to recommend you using combined Twitter Bootstrap and jQuery Validation Plugin.
I am working on it now and it works perfectly.