I need to test various web services which are posts that take an uploaded file as the content of the body. To do this I'd like to do quick tests using ajax call. I found the following page which describes how to do this:
http://www.captain.at/ajax-file-upload.php
However, it requires that the page have "UniversalXPConnect" privileges in firefox.
How do I enable that privilege? I tried editing prefs.js and adding:
user_pref("capability.principal.foo.id", "http://localhost:8080/access/index.html");
user_pref("capability.principal.foo.granted", "UniversalXPConnect");
which should give access to the page http://localhost:8080/access/index.html. But, it doesn't seem to work.
Improving on panzi's answer, you can use the FormData object to send files with Ajax in a very simple manner:
<html>
<head>
<title>HTML5 File API</title>
</head>
<script type="text/javascript">
// <!--
// See: https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects
function upload() {
var uploadRequest = new XMLHttpRequest,
uploadForm = document.getElementById('file_upload');
function transferProgress(progressEvent) {
/*Executes For each update of the progress of the Ajax transfer.*/
// show progress bar or something....
}
function transferComplete() {
/*Executes when the transfer is complete.*/
//Do something like show a nice message...
}
function transferFailed() {
/*Executes when the transfer fails.*/
alert('Upload failed!');
}
function transferCanceled() {
/*Executes when the transfer is canceled.*/
alert('Upload canceled!');
}
uploadRequest.upload.addEventListener('progress', transferProgress, false);
//uploadRequest.upload.addEventListener('load', transferComplete, false); // transfer complete, but this doesn't mean a response from the server has been received.
uploadRequest.addEventListener('load', transferComplete, false); // ajax request complete, response from the server has been received and all has been processed.
uploadRequest.upload.addEventListener('error', transferFailed, false);
uploadRequest.upload.addEventListener('abort', transferCanceled, false);
uploadRequest.open('POST', action, true);
uploadRequest.send(new FormData(uploadForm));
}
// -->
</script>
<body>
<form id="file_upload" enctype="multipart/form-data">
<input type="text" id="text" value="blah blah blah"/>
<input type="file" onchange="upload();"/>
</form>
</body>
</html>
If the user specifies the file you don't need UniversalXPConnect. The HTML5 File API is enough:
<html>
<head>
<title>HTML5 File API</title>
</head>
<script type="text/javascript">
// <!--
// See: http://dev.w3.org/2006/webapi/FileAPI/
function upload (input) {
for (var i = 0; i < input.files.length; ++ i) {
// makes multiple uploads
uploadFile(input.files[i]);
}
}
function uploadFile (file) {
var reader = new FileReader();
reader.onprogress = function (event) {
var percent = 100 * event.loaded / event.total;
// TODO: display progress
};
reader.onerror = function (event) {
// display error
alert(errorMessage(reader.error)+': '+file.name);
};
reader.onload = function (event) {
if (reader.error) {
// display error
alert(errorMessage(reader.error)+': '+file.name);
}
else {
// You could also use reader.readAsBinaryString(file)
// and the mozilla specific function call btoa(reader.result).
// For more mozilla specific stuff (e.g. sending data as binary)
// see: https://developer.mozilla.org/en/using_xmlhttprequest
var data = reader.result.substring(reader.result.search(',')+1);
var text = document.getElementById('text').value;
var request = new XMLHttpRequest();
var boundaryString = guid();
var boundary = '--' + boundaryString;
while (text.search(boundary) != -1) {
boundaryString = guid();
boundary = '--' + boundaryString;
}
var requestbody = boundary + '\n' +
'Content-Disposition: form-data; name="mytext"\n' +
'\n' +
text +
'\n' +
boundary + '\n' +
'Content-Disposition: form-data; name="myfile"; filename="' +
file.name.replace(/"/g, '') + '"\n' +
'Content-Type: application/octet-stream\n' +
'Content-Transfer-Encoding: base64\n' +
'\n' +
data + '\n' +
boundary;
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
alert('Result: ' + request.responseText);
}
else {
alert(
'Error "' + request.statusText + '" occured while uploading: ' +
file.name);
}
}
};
/* a non-standard variant (still supported by many browsers) would be:
request.onuploadprogress = function () {
// possibly only mozilla, but awesome! upload progress!
var percent = 100 * event.loaded / event.total;
// TODO: display progress
};
request.onload = function () {
if (request.status == 200) {
alert('Result: ' + request.responseText);
}
else {
alert(
'Error "' + request.statusText + '" occured while uploading: ' +
file.name);
}
};
request.onerror = function () {
alert(
'There was a problem with the request when uploading file: ' +
file.name);
};
*/
request.open('POST', 'post.php', true);
request.setRequestHeader('Content-type', 'multipart/form-data; boundary="' +
boundaryString + '"');
request.setRequestHeader('Connection', 'close');
request.setRequestHeader('Content-Length', requestbody.length);
request.send(requestbody);
}
};
reader.readAsDataURL(file);
// there would also be:
// reader.readAsBinaryString(file);
// reader.readAsText(file, 'UTF-8');
// reader.readAsArrayBuffer(file);
}
function errorMessage (error) {
switch (error.code) {
case FileError.ABORT_ERR:
return 'Aborted';
case FileError.ENCODING_ERR:
return 'Encoding Error';
case FileError.NOT_FOUND_ERR:
return 'File not found';
case FileError.NOT_READABLE_ERR:
return 'File is not readable';
case FileError.NO_MODIFICATION_ALLOWED_ERR:
return 'File is not writeable';
case FileError.SECURITY_ERR:
return 'Security Error';
default:
return 'Unknown error code: ' + error.code;
}
}
// from: https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
// -->
</script>
<body>
<input type="text" id="text" value="My text.."/>
<input type="file" onchange="upload(this);"/>
</body>
</html>
Still, I would recommend to use an iframe, because it is best supported by all browsers:
Is it possible to use Ajax to do file upload?
Related
I'm using sockjs-0.3.4.
Before change page structure, it worked normally.
However after changing some stuff. abrubtly ws.onmessage function is beginning not to called.
I checked the connection with server by looking into devtools.
It looks like getting data from the server.
Please help me to know what's the point to check out.
enter image description here
var statusWatcher = {
curPage:"",
ws: null,
wsBaseUrl :null,
uid: null,
init : function(url ){
if(statusWatcher.ws != null) return;
console.log(statusWatcher.ws);
console.log("wsBaseUrl:"+url)
statusWatcher.wsBaseUrl = url;
var browserSupport = ("WebSocket" in window)? true: false;
if(browserSupport){
statusWatcher.start();
}else{
console.log("WebSocket is Not supported by your Web Browser!");
}
//log.eventHandler(1);
},
start : function(){
baseWsURL = statusWatcher.wsBaseUrl+"/statusCheck?&uid="+statusWatcher.uid;
console.log("web socket baseurl:"+baseWsURL);
try{
statusWatcher.ws = new WebSocket(baseWsURL);
} catch (e){
console.log(e);
}
statusWatcher.ws.onopen = function() {
console.log("web socket Opened! ");
};
statusWatcher.ws.onclose = function() {
console.log("web syslog socket Closed! ");
};
statusWatcher.ws = function(err) {
console.log("web syslog socket Error: " + err);
};
statusWatcher.ws.onmessage = function(evt) {
console.log("get message...");
//console.log("page:"+curPage);
var data = evt.data;
console.log(data);
var msg;
if(curPage =="main") return;
var e = JSON.parse(data);
if(e.status =="COMPLETE"){
$("#" + e.groupId).text("complete");
$("#" + e.groupId).removeClass('run error');
$("#" + e.groupId).addClass('complete');
statusWatcher.updateScoreState(e.groupId, "COMPLETE", e.topRplRate,e.topKwdRate);
}else if(e.status == "ERROR"){
$("#" + e.groupId).text("error");
$("#" + e.groupId).removeClass('run complete');
$("#" + e.groupId).addClass('error');
statusWatcher.updateScoreState(e.groupId, "ERROR");
}else{
$("#" + e.groupId).html("running("+e.progress+"/"+e.total+")");
$("#" + e.groupId).removeClass('error complete');
$("#" + e.groupId).addClass('run');
statusWatcher.updateScoreState(e.groupId, "RUNNING");
}
};
},
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="<c:url value="js/fileuploadMain/statusWatcher.js"/>"></script>
</head>
<body>
<!--header-->
<c:import url="/WEB-INF/jsp/fileupload/header.jsp" />
<!--contents-->
<div class="contents">
<div class="container" id="container">
</div>
</div>
<script>
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$(".select-items").niceScroll({
zindex: "auto",boxzoom:false
});
$("#container").load("group.do");
calaendar.init();
var wsBaseUrl = "ws://"+document.location.host+"<c:out value="${pageContext.request.contextPath}"/>";
statusWatcher.init(wsBaseUrl);
});
</script>
</body>
</html>
statusWatcher.ws = function(err) {
console.log("web syslog socket Error: " + err);
};
I changed upper source code to the next.. Maybe I remove the function name mistakenly..
statusWatcher.ws.onerror = function(err) {
console.log("web syslog socket Error: " + err);
};
I'm performing AJAX using the following code:
function main() {
// get the name fields
var name1 = document.getElementById("name1").value;
var name2 = document.getElementById("name2").value;
// Encode the user's input as query parameters in a URL
var url = "response.php" +
"?name1=" + encodeURIComponent(name1) +
"&name2=" + encodeURIComponent(name2);
// Fetch the contents of that URL using the XMLHttpRequest object
var req = createXMLHttpRequestObject();
req.open("GET", url);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
try {
// If we get here, we got a complete valid HTTP response
var response = req.responseText; // HTTP response as a string
var text = JSON.parse(response); // Parse it to a JS array
// Convert the array of text objects to a string of HTML
var list = "";
for (var i = 0; i < text.length; i++) {
list += "<li><p>" + text[i].reply + " " + text[i].name + "</p>";
}
// Display the HTML in the element from above.
var ad = document.getElementById("responseText");
ad.innerHTML = "<ul>" + list + "</ul>";
} catch (e) {
// display error message
alert("Error reading the response: " + e.toString());
}
} else {
// display status message
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
req.send(null);
}
// creates an XMLHttpRequest instance
function createXMLHttpRequestObject() {
// xmlHttp will store the reference to the XMLHttpRequest object
var xmlHttp;
// try to instantiate the native XMLHttpRequest object
try {
// create an XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
} catch (e) {
// assume IE6 or older
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
} catch (e) {}
}
// return the created object or display an error message
if (!xmlHttp) alert("Error creating the XMLHttpRequest object.");
else return xmlHttp;
}
This works exactly as planned, the code within the try block is executed perfectly. But the alert "There was a problem retrieving the data: is also activated, with req.statusText displaying "OK".
How can this be possible? How can the code within the if statement activate perfectly but at the same time the else block is activated?
I'm stumped, any ideas?
The servor code is simply:
<?php
if( $_GET["name1"] || $_GET["name2"] ) {
$data = array(
array('name' => $_GET["name1"], 'reply' => 'hello'),
array('name' => $_GET["name2"], 'reply' => 'bye'),
);
echo json_encode($data);
}
?>
And the HTML:
<input id="name1">
<input id="name2">
<div id="responseText"></div>
<button onclick="main();">Do Ajax!</button>
Your conditional is probably being activated when req.readyState == 3 (content has begun to load). The onreadystatechange method may be triggered multiple times on the same request. You only care about what happens when it's 4, so refactor your method to only test when that is true:
var req = createXMLHttpRequestObject();
req.open("GET", url);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
try {
// If we get here, we got a complete valid HTTP response
var response = req.responseText; // HTTP response as a string
var text = JSON.parse(response); // Parse it to a JS array
// Convert the array of text objects to a string of HTML
var list = "";
for (var i = 0; i < text.length; i++) {
list += "<li><p>" + text[i].reply + " " + text[i].name + "</p>";
}
// Display the HTML in the element from above.
var ad = document.getElementById("responseText");
ad.innerHTML = "<ul>" + list + "</ul>";
} catch(e) {
// display error message
alert("Error reading the response: " + e.toString());
}
} else {
// display status message
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
};
req.send(null);
This is a simple test case for PhantomJS to demonstrate that an event handler that, when invoked, executes an AJAX call, does not work.
I've created a simple test here to try and access some content loaded via AJAX. It's very possible I've done something wrong, in which case I'd appreciate someone pointing out what that is. However, if not, I think there is a problem with PhantomJS.
Here's a simple page with a single that has a change event bound to it. When the value of the changes, it loads some content from the server and replaces the content of a specific <p>
The text of the <p id="bar">foo</p> should change to 'bar' after the ajax call is completed and processed.
Can anyone help me out?
<html>
<head>
<title>AJAX test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$('#getBar').change(function() {
$('#bar').load("/test/bar");
});
});
</script>
</head>
<body>
<h1>Foo</h1>
<div>
<select id="getBar">
<option value=""></option>
<option value="go" id="go">Get Bar Text</option>
</select>
</div>
<p id="bar">foo</p>
</body>
</html>
Here's the script I use to navigate to this simple page and ATTEMPT to use jQuery to change the value of the and trigger the change event.
The steps of the script are broken out into an array of 'step' functions:
var wp = require("webpage");
var system = require('system');
var util = require('./util-module.js'); // my logging API
var baseUrl = 'http://127.0.0.1:8080';
/* Global error handler for phantom */
phantom.onError = function(msg, trace) {
var msgStack = ['PHANTOM ERROR: ' + msg];
if (trace) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line);
});
}
util.log.error(msgStack.join('\n'));
// exit phantom on error
phantom.exit();
};
/* Inject jQuery into the phantom context */
var injected = phantom.injectJs('./jquery.min.js');
util.log.debug('phantom injected jQuery: ' + injected);
/* Create and initialize the page */
var page = wp.create();
var loadInProgress = false;
page.onLoadStarted = function() {
loadInProgress = true;
util.log.debug("page load started: " + page.url);
};
page.onLoadFinished = function() {
loadInProgress = false;
util.log.debug("page load finished: " + page.url);
// inject jquery onto the page
var injected = page.injectJs('./jquery.min.js');
util.log.debug('page injected jQuery: ' + injected);
page.evaluate(function() {
jQuery.noConflict();
});
};
page.onResourceRequested = function(request) {
console.log('Request (#' + request.id + '): ' + JSON.stringify(request));
};
page.onResourceReceived = function(response) {
console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response));
};
/* Redirect all console messages logged on page to debug */
page.onConsoleMessage = function(msg) {
util.log.debug(msg);
};
var steps = [
function() {
util.log.debug('LOAD THE TEST PAGE');
page.open(baseUrl + "/test/foo");
},
function() {
util.log.debug('CHANGE THE SELECT');
// see what the first result is. change the sort. Wait for the ajax update to complete
// start iterating over results.
var oldTitle = page.evaluate(function() {
return jQuery('#bar').text();
});
util.log.debug('OLD TEXT: ' + oldTitle);
page.evaluate(function(){
jQuery('select').val('go');
jQuery('select').trigger('change');
jQuery('select').change();
console.log('SELECT VALUE AFTER UDPATE: ' + jQuery('select').val());
});
loadInProgress = true;
count = 0;
var fint = setInterval(function() {
var newTitle = page.evaluate(function() {
return jQuery('#bar').text();
});
util.log.debug('NEW TEXT: ' + newTitle);
count++;
if (oldTitle != newTitle) {
clearInterval(fint);
loadInProgress = false;
}
if (count > 5) {
clearInterval(fint);
loadInProgress = false;
}
}, 500);
},
function() {
util.log.debug('PRINT PAGE TITLE');
page.evaluate(function(){
console.log(document.title);
});
},
];
// harness that executes each step of the scraper
var testIndex = 0;
interval = setInterval(function() {
if (!loadInProgress && typeof steps[testIndex] == "function") {
util.log.debug("step " + (testIndex + 1));
steps[testIndex]();
testIndex++;
}
if (typeof steps[testIndex] != "function") {
util.log.debug("test complete!");
clearInterval(interval);
phantom.exit();
}
}, 500);
And here is the output. I'm expecting the text to change from 'foo' to 'bar' but it never happens
DEBUG: CHANGE THE SELECT
DEBUG: OLD TEXT: foo
DEBUG: SELECT VALUE AFTER UDPATE: go
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: step 5
DEBUG: PRINT PAGE TITLE
DEBUG: AJAX test
DEBUG: test complete!
BTW, PhantomJS 1.7. This is a great project.
The problem with the example listed above is that I simply injected jQuery into a page that already had jQuery. When I stopped doing that, it worked.
I'm using a ajax script to load content from other pages, without having to reload the browser.
For now I'm retrieving the content of the #inside div, but I'm using a full-background slideshow (#full) wich needs to be loaded as wel.
Maybe this can be achieved by loading the content of the #full div also, but I don't know how I could do that.
This is my code:
// Self-Executing Anonymous Function to avoid more globals
(function() {
// Home link isn't dynamic, so default set class name to it to match how dynamic classes work in WordPress
$(".home li.home").removeClass("home").addClass("current_page_item");
// Add spinner via JS, cuz would never need it otherweise
$("body").append("<img src='http://themeclubhouse.digwp.com/images/ajax-loader.gif' id='ajax-loader' />");
var
$mainContent = $("#wrapper"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
// Auto-clear search field
$searchInput.focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
$('a:urlInternal').live('click', function(e) {
// Caching
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
// Fancy ALL AJAX Stuff
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #content', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base, '');
location = base + '/#' + diff;
}
});
})(); // End SEAF
try to repeat the procedure:
// Fancy ALL AJAX Stuff
$.address.change(function(event) {
if (event.value) {
//load ajax image
$ajaxSpinner.fadeIn();
$mainContent.empty().load(base + event.value + ' #content', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
// repeat here
//load another div
$mainContent.empty().load(base + event.value + ' #mydiv1', function() {
$mainContent
});
//load another div
$mainContent.empty().load(base + event.value + ' #mydiv2', function() {
$mainContent
});
}
let me know if it works, Ciao! :)
I found a tutorial on how to create editable regions on a page using AJAX.
This is great, except it was written for a single element with a unique ID. I'd like to be able to click on multiple elements on the same page and have them also be editable (e.g., I'd like to alter the script below so it works not with a single element, but with multiple elements of a particular class).
Here is my HTML:
<h2>Edit This</h2>
<p class="edit">This is some editable content</p>
<p class="edit">This is some more editable content</p>
<p class="edit">I could do this all day</p>
Here is the JS file I'm working with (I updated the script per Rex's answer below): This script is, unfortunately, not working - can anyone point me in the right direction?
Event.observe(window, 'load', init, false);
function init() {
makeEditable('edit');
}
function makeEditable(className) {
var editElements = document.getElementsByClassName(className);
for(var i=0;i<editElements.length;i++) {
Event.observe(editElements[i], 'click', function(){edit($(className))}, false);
Event.observe(editElements[i], 'mouseover', function(){showAsEditable($(className))}, false);
Event.observe(editElements[i], 'mouseout', function(){showAsEditable($(className), true)}, false);
}
}
function showAsEditable(obj, clear) {
if (!clear) {
Element.addClassName(obj, 'editable');
} else {
Element.removeClassName(obj, 'editable');
}
}
function edit(obj) {
Element.hide(obj);
var textarea ='<div id="' + obj.id + '_editor"><textarea cols="60" rows="4" name="' + obj.id + '" id="' + obj.id + '_edit">' + obj.innerHTML + '</textarea>';
var button = '<input type="button" value="SAVE" id="' + obj.id + '_save"/> OR <input type="button" value="CANCEL" id="' + obj.id + '_cancel"/></div>';
new Insertion.After(obj, textarea+button);
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
}
function cleanUp(obj, keepEditable) {
Element.remove(obj.id+'_editor');
Element.show(obj);
if (!keepEditable) showAsEditable(obj, true);
}
function saveChanges(obj) {
var new_content = escape($F(obj.id+'_edit'));
obj.preUpdate = obj.innerHTML // stow contents prior to saving in case of an error
obj.innerHTML = "Saving…";
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = 'http://portal.3roadsmedia.com/scripts/edit.php';
var pars = 'id=' + obj.id + '&content=' + new_content + '&pre=' + obj.preUpdate;
var myAjax = new Ajax.Request(url, {method:'post',
postBody:pars, onSuccess:success, onFailure:failure});
}
function editComplete(t, obj) {
obj.innerHTML = t.responseText;
showAsEditable(obj, true);
}
function editFailed(t, obj) {
obj.innerHTML = 'Sorry, the update failed.';
cleanUp(obj);
}
The Event.observe method currently attaches to a single element with the ID specified. You should change this to iterate over a collection of elements located by classname and attach to each of them. According to the Prototype documentation, you can provide an element object as the first parameter, instead of an ID.
Currently, id is a string:
function makeEditable(id) {
Event.observe(id, 'click', function(){edit($(id))}, false);
//...
Which means Event.observe is attaching to the click event of the element with the ID provided. You want to attach to all elements with a class. Try:
function makeEditable(className) {
var editElements = document.getElementsByClassName(className);
for(var i=0;i<editElements.length;i++) {
Event.observe(editElements[i], 'click', function()
//...
}
//...