when i click on start upload button it is redirecting to http://jquery-file-upload.appspot.com/ but i could not seen whether my image has uploaded or not.
you can look at jquery fileupload rails
Install the gem by adding this to your Gemfile gem "jquery-fileupload-rails"
now in this path app/assets/application.js add //= require jquery-fileupload this will add all the js files need
for the css app/assets/stylesheets/application.css add
*= require jquery.fileupload
*= require jquery.fileupload-ui
you can follow the jQuery-File-Upload /wiki/ Basic-plugin on how to set up or watch the railscasts.com on jquery file upload
This is your basic upload form
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
hope that this helps.
Related
I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});
I have file named a.html with this code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Restaurant Gaststätte Gartenfreunde-Ehningen</title>
<meta charset="utf-8" />
<meta name="generator" content="iloapp 2.1"/>
<link rel="shortcut icon" href="//ilostatic.one.com/iloapp/gallery/images/favicon.ico" type="image/vnd.microsoft.icon"/>
</head>
<body>
<script>
(function () {
var script = document.createElement('script');
script.src = '//ilostatic.one.com/iloapp/gallery/js/init.js?' + (new Date).getTime();
document.documentElement.firstChild.appendChild(script);
})();
</script>
<noscript><iframe src="//ilostatic.one.com/iloapp/gallery/html/nojs_1_en-US.html" frameBorder="0" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe></noscript>
</body>
</html>
It`s for a galerie who look like this: link
I want to include this here: link
Need some help here.
If you are using Jquery you can do the following:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
If you are looking to do raw Javascript DOM then you can do the following:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "b.html", true);
xhttp.send();
}
You could include an HTML code from another file without scripting using SSI (Sever
Side Includes).
Just name your file with .shtml extension and write something like at the place you want to include your file (e.g. index.html):
<!--#include virtual="/galerie/index.html" -->
Usually SSI works in .shtml files by default without any configuration.
Web server will work up .shtml file, looks for SSI directives inside it and process them.
I've succesfull integrated galerie in script. :) Thanks all guys for youre tips. I've used iframe . Finaly worked
I am trying to make a website that will save a cat into the account of the user and have tried this:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-savetodrive"
data-src="http://example.com/pug-snores.mp3"
data-filename="pug-snores.mp3"
data-sitename="A Snoring Pug">
</div>
The save icon shows up but it does not save to the drive.
Why?
Thanks
try the explicit render: code from the google javascript api
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="http://www.example.com">
<script src="https://apis.google.com/js/platform.js">
{parsetags: 'explicit'}
</script>
</head>
<body>
Render the Save to Drive button
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: '//example.com/path/to/myfile.pdf',
filename: 'My Statement.pdf',
sitename: 'My Company Name'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
The data-src URL can be served from another domain but the responses from the HTTP server needs to support HTTP OPTION requests and include the following special HTTP headers:
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
If you want upload a local file with input file form and/or without php lib would be ...
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<form id="GDrive" name="GDrive" enctype="multipart/form-data" method = "post">
<input type="file" id="file" name="file" onChange="renderSaveToDrive('savetodrive-div', this.files[0].name,'GDrive');"><div id="savetodrive-div"></div>
</form>
<script>
function renderSaveToDrive(namediv, namefile, idfrm) {
window.___gcfg = {
lang: 'es-ES',
parsetags: 'explicit'
};
var xhr = new XMLHttpRequest();
var fd = new FormData(document.forms.namedItem(idfrm));
fd.append("file_new_name", namefile);
xhr.open("POST", location.href);
xhr.send(fd);
gapi.savetodrive.render(namediv, {
src: namefile,
filename: namefile,
sitename: 'GDrive Demo: Explicit Render'
});
}
</script>
</body>
</html>
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.