I am having a problem in Firefox with a file uploading into an iframe. An anchor should call the function dosubf() that posts the form to the iFrame to upload a XML file that will be parsed later with Ajax and displayed in another form on the same page.
The iframe is generated dynamically into a div tag. When it loads the first time, works fine, but, in Firefox, when reloading the content into the div, result on an error 'var ret is null'! caught by the firebug extension. I have also noticed that another error occurs on a xmlhttp.open("POST", var, var.length) call that is made in order to generate one select html object into a table cell. Again the error shows that some var is null but in this case the function that dropping the program is out of the scope! Both functions are working fine in IE9.
For the first issue I think that it could be something related to the onload event. For the second I really don't know what's happening.
Below is the code that load an html form with method Ajax into the div for the initial input of the XML file.
<form id='file_upload_form' method='post'
enctype='multipart/form-data' target='upload_targetf'
action='include/php/util/handle/handlexml.php'>
<input name="file" id="file" type="file" />
IMPORT
<iframe id='upload_target' name='upload_targetf' onload='lerxml()' ></iframe>
</form>
The javascript for the event onclick of the button that submits the form.
function dosubf(){
if (document.getElementById('file').value==''){
alert ("Por favor seleccione um arquivo");
return
}
document.getElementById('file_upload_form').submit();
}
And the function for the event onload that is firing well when it's the first load into the div of the HTML shown before, but fails when I refresh with Ajax that content on the div and try fire the onload. It fails in the second time on the fire empty onload iFrame and of course on button action submit onload.
function lerxml(){
var ret = window.frames['upload_targetf'].document;
//Here the code breaks with a ret is null error on firebug!
var novostring='';
var d=ret.body.innerHTML;
var mess='';
if (d!=''){
d=eval("("+d+")");
//This for getting the JSON response to evaluate the file
if (d.tipo){
mess+=(d.tipo);
}
if (d.tamanho){
mess+=(d.tamanho);
}
var ok='';
if (d.sucesso){
//The filepath of the uploaded file to use Ajax for parse it later
novostring="arquivo/xml/"+d.sucesso;
}else{
novostring="";
alert (mess);
return
}
}
The PHP that evaluate the file upload to the iFrame
<?
$erro = $config = array();
$arquivo = isset($_FILES["file"]) ? $_FILES["file"] : FALSE;
$config["tamanho"] = 500000;
if($arquivo){
if(!preg_match("/^text\/xml$/",$arquivo["type"])) {
$erro['tipo'] = "Não é um arquivo XML! Por favor seleccione outro arquivo";
} else {
if($arquivo["size"] > $config["tamanho"]) {
$erro['tamanho'] = "Arquivo em tamanho muito grande!";
}
}
if(sizeof($erro)) {
foreach($erro as $err) {
$err=htmlentities($err);
}
echo json_encode($erro);
die;
}else {
$imagem_nome = md5(uniqid(time())) . ".xml";
$imagem_dir ['sucesso'] = "arquivo/xml/" . $imagem_nome;
move_uploaded_file($arquivo["tmp_name"],"../../../../".$imagem_dir ['sucesso']);
echo json_encode(htmlentities($imagem_dir));
}
}
?>
Well I hope 'twas clearly enough to reach some help from you.
Thank you in advance for any comments.
I bet you're running into https://bugzilla.mozilla.org/show_bug.cgi?id=170799
Try replacing window.frames['upload_targetf'].document with document.getElementById("upload_target").contentDocument, which won't have the same issue.
Related
My HTML file contains a form with just a textarea whose contents are sent to a java servlet (called "Compiler"). The textarea text will always be java code, so it might include characters like +, %, =, etc.
I'm using ajax to get and display the response from the servlet.
But using ajax breaks the whole data being sent by the form, because it strips out part of the text or completely ignores the characters I mentioned above.
This is my html file:
<html>
<head>
<script type="text/javascript">
function objetoAjax(){
http_request= false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}
function devolver_resultado(){
var llamadaAjax = objetoAjax();
var codigo = document.getElementById('codigo').value;
llamadaAjax.open("POST",'Compiler',true);
llamadaAjax.onreadystatechange = function() {
if(llamadaAjax.readyState == 4){
document.getElementById("resultado").innerHTML = llamadaAjax.responseText;
}
};
llamadaAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
llamadaAjax.send('codigo='+codigo);
}
</script>
</head>
<body>
<form action="Compiler" method="post">
<textarea rows="18" cols="70" id="codigo" name="codigo"></textarea>
<input type="submit" value="Compile" onclick="devolver_resultado(); return false;">
</form>
<div id="resultado">
</div>
</body>
</html>
I've debugged the javascript to see if the problem was where I assign the textarea value to the "codigo" variable:
var codigo = document.getElementById('codigo').value;
(screenshot)
But this variable is being correctly set, so I suspect the request is being incorrectly encoded (screenshot).
I'm new to ajax, but I assume this is controlled by llamadaAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
From this page I get that I should encode the form as multipart/form-data. I tried adding the encoding type to the form: but this didn't help.
So, two questions here:
1) Is actually this line the faulty one? llamadaAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
If so, how do I fix it?
2) If that's not where the bug is, what else could be happening? (remember that removing all the ajax and leaving a plain form that calls my "Compiler" servlet works as expected, so the servlet is not buggy).
Thanks!
SOLVED.
All I needed was to encode the text before sending it:
llamadaAjax.send('codigo='+encodeURIComponent(codigo));
I am having some difficulty passing a correct id function back to AJAX.
I'm creating a product bulletin generator that lets items to be added by their SKU code (which works fine). My problem is that when a bulletin is clicked on, a preview of that bulletin is loaded into a div and shows all products associated with that bulletin.
From inside those results, I am trying to add the ability to delete a product from the bulletin. The problem is that the value being passed back to AJAX belongs to the first product only. It won't send the value belonging to the particular item if it is any other item than the first one.
This is the code (belonging to main.php) that gets loaded via AJAX into a div and is looped with each product associated with a selected bulletin
echo "<form name='myDelForm'>
$news_gen_id<br>
<input type='hidden' id='delccode' value='".$news_gen_id."'>
<input type='hidden' id='deledit' value='".$edit."'>
<input type='button' onclick='ajaxDelCcode()' value='Delete' /><br></form>
</td>";
The AJAX code (on index.php, where the div that calls in main.php is also located) is this
function ajaxDelCcode(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById("ajaxMain2");
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var deledit = document.getElementById("deledit").value;
var delccode = document.getElementById("delccode").value;
var queryString = "?delccode=" + delccode + "&deledit=" + deledit;
ajaxRequest.open("GET", "main.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
Currently, using those two pieces of code, I can successfully delete only the first product. The delccode variables do not seem to change when the products are looped (although when I echo the variables during the loop, it is definitely changing to the appropriate value...it's just not passing it correctly back to AJAX.)
I tried taking the AJAX code, putting it inside the main.php product loop, and change the function name during each loop (so ajaxDelCcode$news_gen_id() for example) and also to the button itself so that it is calling the AJAX specific to it. And it works if you are visiting main.php directly...but not from index.php after main.php has been called into the div.
I can't figure out how to pass the correct looped value from main.php within the div, back to the AJAX code on index.php
Can anyone help me with this?
Thanks,
Dustin
Instead of storing the id in the input, just pass it as an argument to the function:
function ajaxDelCcode(delccode) { ...
<input type='button' onclick='ajaxDelCcode(\"".$news_gen_id."\")' value='Delete' />
Also, I'd swap the quotes if I were you. Or better yet, instead of using echo, break the PHP code and just write HTML:
<? ... ?><input type="button" onclick="ajaxDelCcode('<?= $news_gen_id ?>')" value="Delete" /><? ... ?>
What does the code you use to delete look like? Is it in the same php file as the form you posted above? If so, is the form getting submitted to itself accidentally? Like perhaps when a user presses enter while on an input type=text control? I understand that you want to do this by ajax but I am suspecting that the form is your problem.
Seconding the jQuery comment.
Here try this
1) add jquery to your document.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
2) give your inputs name attributes
<input type='hidden' name='delcode' id='delccode' value='".$news_gen_id."'>
<input type='hidden' name='deledit' id='deledit' value='".$edit."'>
3) Use a function something like this instead of all that code above
function ajaxDelCcode() {
$.ajax({
url: "main.php",
type: "GET",
dataType: "text",
data: $("#myDelForm").serialize(),
success: function(rText) {
$("#ajaxMain2").text(rText);
}
});
}
Sorry for the confusing title.
I have a form-- form1 that has one file input ( with multiple attribute set so that user can select mutiple files). The form doesn't get submitted.
I have another form -- form2 that has a single file input . no mutiple attribute.
Now via javascript i would like to fetch each files from the fileinput from the previous form and then assign the file to the form2's input field and then do an ajax submit.
Once the ajax submit is complete I would like to do the same to 2nd file and then 3rd file and so on.
I don't want to use flash or java applet.
I am fully aware that IE doesn't support multiple attribute
opera can use invalid min max attribute to do the same.
My basic question would be how to fetch the files from the form1 input field and then assisgn it to form2's field ..
Is there a solution for this ?
or is my approach itself incorrect ?
What I want to achieve on UI side ?
The file gets uploaded and server does some processing and returns some data.
so what I want is user can select 10 files but as soon as 1st file is uploaded the output is received.
First : My idea is wrong.
We cannot assign a value via javascript to the input with type = file .
I thought of another idea using the XMLHttpRequest.
here is my code :
<form id="new_picture_form" method="post" enctype="multipart/form-data" action="some url" accept-charset="UTF-8">
<input id="original_input" class="file_hidden" type="file" onchange="handleFiles(this.files);" name="picture[image][]" multiple="multiple">
</form>
<form id="fileinfo" method="post" enctype="multipart/form-data" action="some url">
</form>
<script type="text/javascript">
function handleFiles(files)
{
for (var i = 0; i < files.length; i++) {
FileUpload(files[i])
}
}
function FileUpload(file) {
var data = new FormData(document.getElementById("fileinfo"));
var xhr = new XMLHttpRequest();
this.xhr = xhr;
data.append('some field',"that you want to pass as param ")
data.append('type',"picture")
data.append("picture[image]", file);
xhr.open("POST", "URL",true);
xhr.send(data);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
eval(xhr.responseText) // basically the result from server contains some script
}
}
}
</script>
After the form submits, the progressbar appears, and the getProgress function is called. getProgress check a php file (which uses the uploadprogress apache mod to get the current upload progress) and returns a number from 0 to 100 (which means complete).
OK, The idea is that getProgress is self-executed if the number returned is not 100. Otherwise, the form continues to upload.php where the file is manipulated.
THIS IS WHAT IM LOOKING FOR: http://screenr.com/ByG <- video.
Here is the HTML part.
<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
<div id="UploadBarContainer">
<div id="LoadBar"></div>
<div id="ProgressBar"></div>
</div>
Here is the jQuery part. Which seems to be broken
$(function(){
// This flag determines if the upload has started
var started = false;
// Start progress tracking when the form is submitted
$('#UploadForm').submit(function() {
//Update the flag to true.
started = true;
//Hide the form.
$('#UploadForm').hide();
//Show the progress bar.
$('#UploadBarContainer, #LoadBar, #ProgressBar').show();
//Start updating progress after a 2 second delay.
//This is to prevent the getprogress.php assume that upload is complete.
setTimeout(function () {
// We pass the upload identifier to our function
getProgress($('#uid').val());
}, 2000);
});
//Function used to get the current upload progress.
//It should be executed over and over again untill the result is 100.
function getProgress(id) {
//Get the current time.
var time = new Date().getTime();
//Make an ajax request to the server.
$.ajax({
//Pass the data trought GET method.
type: 'GET',
//Get the progress from this php file.
url: 'getprogress.php',
//Pass our upload identifier as a parameter and current time to prevent caching.
data: { uid: id, t: time },
//Get the results.
success: function (data) {
//Get the output as an integer.
var progress = parseInt(data, 10);
//If upload progress is not 100, change bar percentage and update again.
if (progress < 100) {
//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');
//If we aren't done, update again.
getProgress(id);
}
}
});
}
});
Just i case this helps, here is the getprogress.php file called on the $.ajax request.
if (isset($_GET['uid'])) {
// Fetch the upload progress data
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
// Calculate the current percentage
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
Any help is appreciated, i have a live demo but i scared about what you could upload.
only new versions of some browsers support file upload progress. You should check your net with firebug if getprogress.php send numbers or just errors.
You may look these:
http:
Server-side, get progress on sending file
may use swf swfupload
another jquery plugin: uploadify
Well finally i came to the conclusion it is not possible to get this working on webkit browsers such as opera, chrome and safari, not so on firefox and internet explorer.
Webkit browsers tend to block any ajax while a file is being uploaded.
You may want to check this out: https://bugs.webkit.org/show_bug.cgi?id=23933
I am using JQuery with Boxy plugin.
When a user clicks on a link on one page, I call Boxy.load to load a form onto the pop-up. The form loads and is displayed inside the pop-up without problems.
However, I can't bind the form to a submit event, since I can't select the form element.
This is the event handler:
$('#flag-link a.unflagged').click (function(e) {
url = $(e.target).attr('href');
Boxy.load(url, {behaviours: function(r) {
alert ($("#flag-form").attr('id'));
}
});
});
The alert reads "undefined" when it is displayed.
And this is the form:
<form id="flag-form" method="POST" action="somepage">
<table>
<tr><td><input type="text" name = "name"></td></tr>
<tr><td><input type="submit" value="OK"></td></tr>
</table>
</form>
What am I doing wrong?
First (a minor point, but a potential source of trouble), it should be id="flag-form" not id = "flag-form" (no spaces).
Second, you shouldn't need r.find(). Just do $("#flag-form").attr("id")
As far as I understand, live() method must be used to bind an element to an event in this case:
$("#flag-form").live("submit", function(){ ... }
Presently, live method is documented to be not supporting the submit event. However, I could work it out with Chrome and FF. On the other hand, I couldn't get it working in IE. A better way for cross-browser compatibility seems to be binding the submit button of the form to the click event.
$("#flag-form-submit").live("click", function(){
I learnt that declaring methods in behaviours: function (e) {} works, in addition to using live() methods.
E.g.:
$('#flag-link a.unflagged').click (function() {
Boxy.load(this.href, {
behaviours: function(r) {
r.find('#flag-form').bind('submit', function() {
// do on submit e.g. ajax calls etc.
});
}
});
return false;
});
Boxy opens the URL (url = $(e.target).attr('href');) in an iframe. So you cannot find the form from the opening page(parent page). Your code to bind the form should be in the child page (ie, the Boxy iframe). You can check the iframe URL using your code, url = $(e.target).attr('href');