I'm trying to upload a file and send it to a java servlet using post method. My dojo is 1.8. Just started working with javascript and still have tons to learn. Please correct me if you can. So i have a couple of undefined attributes: label, UploaderID and dojo source path which is supposed to be true!
**************** REVISED CODE ***************************
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>dojox.form.Uploader</title>
<link href="dijit/themes/dijit.css" rel="stylesheet" />
<link href="dijit/themes/claro/Common.css" rel="stylesheet" />
<link href="dijit/themes/claro/form/Common.css" rel="stylesheet" />
<link href="dijit/themes/claro/form/Button.css" rel="stylesheet" />
<link href="dojox/form/resources/UploaderFileList.css" rel="stylesheet" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
data-dojo-config="parseOnLoad: true, async: true,
isDebug: true,
packages: [{name: 'dojo', location: '.'},
{name: 'dijit', location:
'/dojo/dijit'},
{name: 'dojox', location:
'/dojo/dojox'},
]"></script>
<script>
dojo.require("dojo.domReady")
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dojox.form.Uploader");
dojo.require("dojox.form.uploader.FileList");
dojo.require("dojo.parser");
});
</script>
</head>
<body class="claro">
<form method="post" action="user" id="myForm" enctype="multipart/form-data" >
<fieldset style="background-color:lightblue;">
<h1 id="greeting">User Administration</h1>
<p>First Name: <input type="text" name="fname" size="20">
LastName: <input type="text" name="lname" size="20"></p>
<input class="browseButton" name="uploadedfile" multiple="false"
type="file" data-dojo-type="dojox.form.Uploader" label="Select Some File"
id="uploader" />
<p><input type="submit" label="Submit" data-dojo-type="dijit.form.Button" />
</p>
<div id="files" data-dojo-type="dojox.form.uploader.FileList"
uploaderId="uploader"></div>
</fieldset>
</form>
</body>
</html>
I'm noticing several errors here:
First line in your <script>:
dojo.required("dojo.domready")
dojo.required() does not exist and should be dojo.require().
Besides that, dojo.domready is not even a module and should be dojo.domReady
The following code is just wrong:
function(parser){
parser.parse();
});
You probably copy pasted it from a code example that was using AMD, however, you're no longer using AMD (but dojo.require()), so this code won't even compile.
However, you're using the parseOnLoad mechanism, so in fact you don't need to parse the page by yourself (this will even cause errors because you're going to parse the same widgets twice).
Remove that part of the code, all you need to make the parse on load mechanism to work is:
dojo.require("dojo.parser");
This code looks like some failed try to convert an AMD example to non-AMD code, another thing you're doing wrong is:
dojo.require("dijit.form/Button");
You should use the dot notation when usin pre-AMD code (dijit.form.Button). Dojo will probably understand this, at least it will in the recent Dojo versions, but I doubt that this will work in older versions of Dojo.
You're splitting attribute names by a newline, for example:
<input class="browseButton" name="uploadedfile" multiple="false" type="file" data-
dojo-type="dojox.form.Uploader"
label="Select Some File" id="uploader" />
The attribute name data-dojo-type should probably be one 1 line, I don't think it's valid if you split that attribute onto multiple lines.
The Dojo configuration property to parse the page when it's loaded is parseOnLoad (not ParseOnLoad). I'm not sure if Dojo handles these properties case insensitive, but normally JavaScript properties are case sensitive.
However, you're already using the data-dojo-config property on your <script> tag loading Dojo, so you actually don't even need that.
If you fix all these errors your script should work fine (with or without AMD), as you can see in this fiddle: http://jsfiddle.net/e65EY/
Have set up the dojo.js correctly? How are you using your application? Have you downloaded the dojo source files in your machine or using some remote server.
You can use the google CDN as show below. Also have look over here of setting your dojo source.
src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
In addition to #Dmitri comments.
Remove the below line.
<script> dojoConfig ={isDebug:true, ParseOnLoad: true,};</script>
because you are redefining the dojoConfig in the very next line via. data-dojo-config
<script type="text/javascript" src="dojo/dojo.js"
data-dojo-config="async: true,isDebug: true,parseOnLoad: true"></script>
Also you can use the new AMD format for require() call as below.
<script type="text/javascript">
require([
"dojo/parser",
"dijit/form/Button",
"dijit/Dialog",
"dijit/form/TextBox",
"dojox/form/Uploader",
"dojox/form/uploader/FileList"
"dojo/domReady!"
], function (parser, Button, Dialog, TextBox, Uploader, FileList ) {
// now parse the page for widgets
parser.parse();
// Your code will go here
});
</script>
Related
Just embarking in learning yet another language (JavaScript) and following instructions from a tutorial. I have node and Brackets (the editor) installed. The tutorial was requesting the following to be put in a file named
"app.js":
$('form').on('submit',function () {
var text = $('#message').val();
alert(text);
return false;
});
The problem I have is that the system immediately complains that "$" (two places) and "alert" are undefined.
The index.html file was originally requested to specify:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="app.js"></script>
at the bottom (which caused the system to complain with an earlier simplified version about 'alert') but I replaced it with the following after visiting the code.jquery.com site:
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>
This solved the alert issue when the .js file was nothing more than a 'hello world', but now I have a "problem++" with the next version of the .js file shown above.
I suppose it could be something about the installation and/or paths; but I am at a loss figuring where that could be and how to fix it. Can any expert suggest something?
For the record: I am on a Windows 7 machine, using Chrome to display the html file.
Many thanks
Edit:
additional complete text of 'index.html' file:
<link rel="stylesheet" href="style.css">
<main>
<ol id="history">
<li>commander says: no offence, but you are a robot, aren't you?</li>
<li>roobie says: that is correct, sir</li>
<li>cookie says: hey doc, is that a male or a female? </li>
<li>robbie says: this information is meaningless</li>
</ol>
<form>
<input id="initials">
<input id="message">
<button>Send</button>
</form>
</main>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>
did you add the jquery link twice?
Please remove all jquery links and do the following:
remove all previous jquery links.
Add this code snippet between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.
Here's my code:
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="js/timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/timepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
</script>
<form method="post" action = "makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name = "date">
What time would you like to start?<br>(example format: 3 pm)
<input type="text" id="timepicker1" name = "time" >
...
I get the following error when I run this in firefox:
TypeError: $(...).timepicker is not a function
I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.
I'd appreciate any suggestions for troubleshooting this. Thanks!
The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<form method="post" action="makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name="date">What time would you like to start?
<br>(example format: 3 pm)
<input type="text" id="timepicker1" name="time">
</form>
It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"
If the file is there, than check to make sure that the JS file actually has content in it.
I ran into the same issue. Call it amateurish, but the issue was resolved by adding both JQuery and JQuery UI plugins to my code in addition to the the CSS and JS file custom to Timepicker.co.
Timepicker's site states:
To use jQuery Timepicker you'll need to include two files:
jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming
you have an element in your document, with class timepicker,
you can use the code on the right (or the code below, if you are
reading on mobile) to initialize the plugin.
They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.
At http://emberjs.com/ I am try to get the auto-updating and handlebars templates example working, it is the first one. When I run it, my html page look like:
Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!
It is just plain text, it is not like how it looks on the ember website.
This means I am not loading my javascript files right? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>EmberDemo</title>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/handlebars-1.1.2.js" type="text/javascript"></script>
<script src="./js/ember-1.5.1.js" type="text/javascript"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</body>
</html>
Here is my path in Eclipse for where my javascript files live. /EmberQuickstart/src/main/webapp/js/
My path for my index.html is /EmberQuickstart/src/main/webapp/index.html
Can anybody tell me what is wrong? I am really stumped. I should not need a webserver and a war file to get javascript to work right?
Update
Malik I changed my paths to what you said and I appear to be on the right track, but it is still not working.
Here is my console output in Chrome's developer tools:
DEBUG: ------------------------------- ember-1.5.1.js:3521
DEBUG: Ember : 1.5.1 ember-1.5.1.js:3521
DEBUG: Handlebars : 1.1.2 ember-1.5.1.js:3521
DEBUG: jQuery : 1.10.2 ember-1.5.1.js:3521
DEBUG: ------------------------------- ember-1.5.1.js:3521
Ember Debugger Active
Remove the ./ part in your src="".
You should write it as:
src="js/jQuery "
I figured it out. I am 100% new to handlebars and ember so I did not realize that I need a tag to surround my topmost . Now it works!
I recommend to use Ember-Cli to start is easy and super complete Ember-Cli
I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.
I'm currently having some trouble using the jQuery properly. I'm trying to load some csv files (ie google.com) via jQuery.get, and build some graph. Somehow the jQuery just cannot load the file properly.Here is my code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).keypress(function(e) {if(e.keyCode == 13) {updateData();};});
drawchart("2013.04.02")
function drawchart(date){
jQuery.ajaxSetup({async:false});
var sql = "http://www.andrewpatton.com/countrylist.csv";
console.log(sql);
var ans= jQuery.get(sql);
ans.done(...draw...);
ans.fail(console.log("fail"));
}
</script>
</head>
<body>
<input id="date-input" style=margin-left:160px type="text" id="date" name="date" />
<input type="button" value="submit" onClick="updateData();"/>
<p style=margin-left:160px> Date format: YYYY.MM.DD </p>
</body>
</html>
I have tested the url, and it indeed returns me a .csv file when I enter the url in the browser, so my guess is that there's something with the jQuery that I don't get...
Can someone tell me what might be going on?
You are running into cross domain request issues here, as #adeneo mentioned in the comments. This is an unpopular (but totally justified) security "feature". To get the results you want, you will need to use a server-side language (PHP/Ruby/Python etc) to get the CSV file, parse it if necessary, and then use that data in your jQuery script.
The traditional work around for this thing is to use JSONP for your request, but as you want to load a .csv file, that approach will not work.
More info here