I am a beginer to DOJO , finding difficulty to set up DOJO
This is my Program :
<html>
<head>
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function init()
{
alert('Click on the Hello World Button');
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
I have used the dojo.js file from the external site itself that is by
**<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>**
But still i am getting errors .
Please see the screen shot related to errors
http://imageshack.us/f/545/dojoh.jpg/
Also i have downloaded , the DOJO Latest relaese , and kept this in C:\dojo-release-1.6.1
Could anybody kindly please tell me , as what should be the source path to dojo js , i tried the below way , but doesn't know why this js file hasn't been recognized
Thank you for your time .
You are on the right track, there's just a small issue with your HTML. The following snippet is not valid:
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
You can't have a <script> tag within another <script> tag. Remove the outer tags, so you're left with just this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
This is what caused the "unexpected end of XML source" error. Also, since the error prevents dojo from being loaded, you get the "dojo is not defined" right afterwards.
Secondly, you cannot require dojo modules with wildcards ('*'). You have to explicitly require the ones you want to use. So the following is not valid:
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
Lastly, you probably want to run your Dojo application through a web server, not just as a local file. It may work for now, but you're bound to run into some weird issues after a while.
Hope this helps.
In the HTML code you have here Dojo won't load, as script tag loading dojo is inside another script tag. Get rid off the outside script tag.
You should only require modules that you need. Here you do not seem to need any of the extra dojo modules.
Here is an example of having dijit.form.Button http://dojotoolkit.org/reference-guide/dijit/form/Button.html It will give you better idea of how you can load modules.
To load dojo.js file from your computer, if your HTML file is in projects dir then you may add your dojo-release-1.6.1 dir inside projects dir and may want to rename it as libs. Then in your HTML file you should load dojo.js file as
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
In addition to the other answers, please note that your sample code reflects Dojo 0.4 APIs from about 5 years ago. The code has been refactored significantly since then. Most widgets live in the dijit package
Related
The example given in jsfiddle.net/jjx86sqb/ is excellent and would like to download all the files.
Pls let me know how to download it.
I want to run the sample html file example locally
Simply copy and paste the HTML and jQuery sections of the fiddle to your own document.
Don't forget to include the four relevant external files:
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css
https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css
https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js
You'll also need to reference jQuery itself (version 1.11.0 in the fiddle).
Version 1.11.0 can be found at:
https://code.jquery.com/jquery-1.11.0.min.js
Note that jQuery must be referenced before the four DataTables scripts.
Your <head> should look like this:
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/css/dataTables.alphabetSearch.css">
<script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.2.2/js/dataTables.alphabetSearch.min.js"></script>
</head>
The jQuery code itself must be placed between <script> tags after the five external files have been included.
Hope this helps! :)
it is possible. and easy.
add /embedded/ to the URL of the jsfiddle you want to download.
click on the result tab
right click on the screen and select view frame source (and not! view page source)
save the complete html you see to html file.
It is impossible and unnecessary feature to download the code. There are max 3 codes for you to copy viz. HTML, CSS and the script.
Just click on any of the code > Ctrl+A > and copy and paste it wherever you want.
Repeat the same steps for each code.
I am using dijit/form/Select in my app to dynamically bind some data. I am able to bind the data to the Select element but problem is that my Select element is not rendering properly in both of my Emulator and simulator. I am using embedded dojo 1.9 in worklight and below are the code that I am using. Is there anything else that I need to add in my code to use dijit select ? I searched for this type of question in this forum and I found this link where the user is having same problem but that is unanswered.
script error on require "dijit/form/Select"
My HTML code-
<select id="selectCity" name="selectCity" data-dojo-type="dijit/form/Select">
</select>
my script code-
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
I'm pretty sure it's because theming in dojox/mobile is different from theming in dijit. To use a dropdown using dijit modules, you would have to configure a a theme. Usually this means you need to import a CSS file and add a class to the parent element (most common practice is by adding it to your <body> tag). But these themes are not device specific.
A better solution would be by using the dojox/mobile/ComboBox, more info can be found at the reference guide.
Hy guys!
On my site I noticed that on some pages I don't have a Jquery library included. But on other pages I see it in my head tag:
<head>
...
<script type="text/javascript" src="/assets/fe9bd624/jquery.js"></script>
<script type="text/javascript" src="/assets/fe9bd624/jquery.ba-bbq.js"></script>
...
</head>
In my theme layout/main.php I don't have Jquery files in head tag. So question is: what controls inserting Jquery on my pages, and how to insert it on all pages. Thx.
jQuery would only be inserted automatically if you call the registerCoreScript method. There's nothing built into Yii to force jQuery upon you.
However, it could be that your using a widget or extension somewhere that uses jQuery, which would make it's own call to the registerCoreScript. (CGridView for example)
If you use any widget or component or extension which needs jquery & using function registerCoreScript than jquery will be loaded automatically otherwise YII does not load any JQuery.
In every view that requires jquery you can put this on top:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
You can put it into your layout also if you want to include in all pages in a particular layout.
I tried to add a js file or css file as i mentioned below in the .vm file
<script src='/templates/jquery-1.6.2.js>
it didn't work.
But when i tried adding as given below it worked
<script type="text/javascript">
#include( "jquery-1.6.2.js" )
</script>
But the issue is in the browser if do view source even the jquery-1.6.2.js code also appears.It doesnot hide the js code. Is there any alternate way to add the js or css file in velocity template ??
In case someone comes across this question, there is a straightforward way to include CSS styles in a Velocity template. I had a need to add some overrides to a .vm file, and putting a <style> tag with the appropriate rules inside <body> worked. I initially had the <style> inside the <head> tag but that wasn't being picked up by the parser for some reason. It looked fine in IE 8, FF 3.6, and Chrome.
I've read the Jquery docs page on conflicting scripts. But i'm not really understanding it. As well, it's multiple .js files that are conflicting, and they have the same names to boot. (but they aren't the same within.)
I have a set of .js for a fisheye effect. Then i have another set of .js for draggable. Draggable won't work with the fisheye scripts, and vice versa.
These links are for the fisheye effect.
<script type="text/javascript" src="HandFan/jquery-1.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
<script type="text/javascript" src="HandFan/ui.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_002.js"></script>
These files are for draggable.
<script type="text/javascript" src="Draggable/jquery-1.js"></script>
<script type="text/javascript" src="Draggable/ui.js"></script>
<script type="text/javascript" src="Draggable/ui_002.js"></script>
From what i understand of what the doc said,
File1.noConflict();
// Use script File1 via File1(...)
File1(document).ready(function(){
File1("div").hide();
});
// Use script File2 with $(...), etc.
$('someid').hide();
I'm not sure what to do with regards to the multiple files, I'm sure that speaks to how new i am to this.
EDIT
After looking online, i thought it would do me good to use a single jquery.1.3.2.js file, hosted by google. However, that didn't work. So it would seem my problem is that i need each of the scripts above for my effects to work, and this just seems wasteful to me. Is there a more efficient way to do this?
I don't fully understand why you need to include jQuery more than once. For example, the draggable plugin will work fine if you've already included jQuery further up on the page. The same goes for any UI scripts you're including.
Your script declarations will likely work better like this:
<script type="text/javascript" src="scripts/jquery-1.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/ui_002.js"></script>
<script type="text/javascript" src="HandFan/effects.js"></script>
<script type="text/javascript" src="HandFan/ui_003.js"></script>
The draggable stuff should work fine without needing to have its own set of the same base libraries defined.
Given this might not be working for you, let's see if it's the jQuery files that are the problem at all.
The jQuery noConflict() method allows you to assign different variables to call jQuery instead of the very common $ symbol. See if the following works:
var j = jQuery.noConflict();
You can then use the letter j where you would ordinarily use $. For example:
j('#myElement').draggable();