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
Related
This is the smallest simplest start I could think of, and of course it errors. I'm running a .cshtml page. Here is the code for having function in the SAME file just lines apart:
#section head
{
<script>
function CheckPostalCode(form) {
if (form.postalcode.value.length < 5) {
alert("Please enter a Zip Code.");
form.postalcode.focus();
return false;
}
return (true);
}
</script>
}
Now in the webpage below:
<form onsubmit="return CheckPostalCode(this)" method="post" action="/search/index.cshtml">
<input type="text" name="postalcode" id="postalcode" size="30" maxlength="5" required/>
<input type="submit" name="submit" value="go" />
</form>
The original method I tried to use was having a separte file called checkFields.js and including the file in the pages section head as such:
<script type="text/javascript" src="/js/checkFields.js"></script>
Where the webpage code is the same. Can anyone help explain why even when the script is in the same file its undefined. But really I would like to be able to call the function from another file. I've seen many tutorials that all say, you can call functions like normal so long as you include them. Well I thought I did.
When viewing page source it's simply the form with a header tag above it
If you are using #section head to include some raw javascript from your view, you need a RenderSection("head", false) in your _Layout.cshtml file ("head" is a name defined by yourself, you can change it to other name), in <head></head> part, like:
<head>
//your other css link or js link here
#RenderSection("head", false)
</head>
If you use link, try to use "~"
<script src="~/js/checkFields.js" type="text/javascript"></script>
Or use:
<script src='#Url.Content("~/js/checkFields.js")' type="text/javascript"></script>
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>
I usually don't program in jQuery so I'm a big newbie. I got an HTML input form (type=text) and I want that when website is loaded, the value of the textbox should change.
I got this in fill-in.php file:
<script src="fill.js"></script>
<body>
<label class="txtlabel">Username/Email</label>
<input id="username" value="Moin" type="text" name="login-username">
<label class="txtlabel">Kennwort</label>
<input id="kennwort" value="Passwort" type="password" name="login-password">
</body>
And in fill.js file I wrote this:
$(document).ready(function(e) {
$('#username').val('some random text')
});
fill.js is correctly linked to my fill-in.php file.
Can someone give me a hint where I made a mistake?
Cheers
Add this in your header section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If you're planning to use jQuery, the very first thing you need is the library. You can reference it from a CDN or download it:
http://jquery.com/download/
<!-- CDN reference (Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="fill.js"></script>
you need to include the jquery library before the fill.js, you can download it from the jQuery site or use a CDN version as given below
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
I have a url which gives json data...
I want to hit that URL from javascript but I am getting this error :
character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature
Code :
function a(){
$.getJSON(url,function(data) { alert(data);});
}
full code :
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
function a(){
$.getJSON(url,function(data) { alert(data);});
}
</script>
</head>
<body>
<input type="text"/>
<input type="submit" value="search" onclick="a()"/>
</body>
</html>
Your code seems correct.
Are you making a fully qualified URL call?
If you are making a fully qualified URL call, make sure of the following.
You are calling the same domain(same server). You can not make a
simple JSON call to another domain.
If you want to use a cross domain call, you'll have to use JSONp
Update:
This is not working since it is a cross domain call.
Work around for this
JavaScript
Create a function
function getMyData(data) {
alert(data);
//Do the magic with your data
}
Server side
On server end wrap your data inside function syntax
getMyData("Enter your data here");
JavaScript
Then create a script tag and add a link to your cross-domain page
<script type="text/javascript"
src="cross ref url">
</script>
For reference: wikipedia
EDIT: Another option is Create a proxy on your domain. ie create a page in your domain which internally calls the cross-domain page and return the same data to your Ajax call.
I have a javascript widget that can be inserted on an a plain-old html page like this:
<html>
<head>
<script type='text/javascript' src="http://example.com/widget.js"></script>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
I would like to insert this javascript on one page of a Drupal 6 site (not every page).
This is what I have tried so far to get the script tag in the HEAD:
I set the Full HTML input format to allow php.
For the Drupal page, I set the input format to Full HTML
I then added this to the top of the body of my Drupal page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://example.com/widget.js"> </script>');
?>
But Drupal doesn't parse the php and instead prints this at the top of the page:
<?php drupal_set_html_head(''); ?>
Any suggestions as to how I can do this?
#Jeff: You should not really reconsider that. Using the PHP Filter is generally a bad idea as it potentially opens security holes. (In case someone would gain access to your user account or you have a misconfiguration in your settings this is a direct path to compromising the whole server)
I would rather propose to add js via the template.php of your theme. Also the right method to use is drupal_add_js with the option inline:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
Here are some further reads on how to use it:
http://drupal.org/node/304178#comment-1000798 http://drupal.org/node/482542
I'm not too familiar with Drupal so this answer merely gets around your widget not loading without actually answering the question why that PHP block isn't being parsed as PHP.
You don't need to call the <script> tag inside the <head>. You can just place that line right above the <script> tag that calls the widget constructor.
<html>
<head>
</head>
<body>
<script type='text/javascript' src="http://example.com/widget.js"></script>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
After writing that all out, I figured out the problem...
The full html input format has an HTML corrector filter turned on by default, and that filter appears to have caused problems with the PHP code. Reordering the filters to put the PHP evaluator first fixed the problem.