I have a modal containing a form and an iframe.
The form has a file field and post to the iframe.
The php controller return the uniqid (basically the name) of the uploaded file.
The upload works well and my iframe contains the uniqid.
I would like to display this uniqid on my main page.
My issue is that I don't know how to wait the end of the upload to show the uniqid.
The form and iframe :
<form id="uploadForm" enctype="multipart/form-data" action="{{ path('lesson_upload') }}" target="uploadFrame" method="post">
<label for="uploadFile">Document :</label>
<input id="uploadFile" name="uploadFile" type="file" />
<br /><br />
<input class="btn btn-primary" id="uploadSubmit" type="submit" value="Upload" />
</form>
<div id="uploadInfos">
<div id="uploadStatus">Aucun upload en cours</div>
<iframe hidden id="uploadFrame" name="uploadFrame"></iframe>
</div>
The JavaScript to fill the modal with the form :
$(document).on('click', '#computer-upload', function ()
{
var url = Routing.generate('lesson_upload_computer');
$.get(url, function (data)
{
$('#modal-various .modal-body').html(data);
return false;
});
return false;
});
The iframe at the end of an upload :
<div id="uploadInfos">
<div id="uploadStatus">Aucun upload en cours</div>
<iframe hidden="" id="uploadFrame" name="uploadFrame">
#document
<html>
<body>
<body>533ebac647b7e</body>
</body>
</html>
</iframe>
</div>
Does anyone have an idea ?
Thanks !
If you don't use an AJAX upload, after a little research, you cannot add an event that detects when the upload has finished.
You now have 2 options:
Fetch the id from the iframe every ~100ms and if it is not empty or null, the id will be in:
document.checkForId = function() {
id = $('#uploadFrame').contents().find('#idInIframeDivOrOtherContainer');
if (id) {
window.clearInterval(intervalId);
}
};
$(document).ready(function() {
intervalId = window.setInterval('document.checkForId', 100);
});
When posting data, return javascript that sets the id in the main page (if you have jquery in the iframe):
<script>
$(document).ready(function() {
$('#divInParentWindow', parent.document).text('<?php echo $id; ?>');
});
</script>
If your iFrame has its source on the same server/domain level as your main page. You could simply define a function at your main page
function iframeHasLoaded() {
var body = document.getElementById('uploadFrame').contentWindow.document.body.innerHTML;
}
And, from your iFrame
window.onload=function() { parent.iframeHasLoaded() };
This should work.
Related
I am having an issue with posting some data to an iframe then for it to download a file from a link.
I have searched stackoverflow for similar questions and have tried to adapt my code to make this work with the information i had found.
Currently it only posts the data to the iframe.
here is my code
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<form action="http://www.example.com" method="post" target="output_frame" accept-charset='UTF-8'>
<input type='hidden' name='package_shape' value='box' />
<input type="submit" name='op' id='go' value='download' />
</form>
<script>
var downloadUrl = 'http://www.example.com/pdf';
$('#myFrame').on('load', function(){
console.log('WOOT!', arguments);
});
$('#go').on('click', function(){
$('#myFrame').attr('src', downloadUrl);
});
</script>
<iframe name="output_frame" src="" width="100%" height="500" id="myFrame">
</iframe>
If i created a button <button id="go"/>Download</button> and press it after the page has loaded within the iframe, it downloads the right file.
Thank you in advance.
If you want to send POST data to output URL, and also set downloadable URL:
$('#go').on('click', function(){
$('#myFrame').on('load', function(){ $('#myFrame').attr('src', downloadUrl); } );
//setTimeout( function(){ $('#myFrame').attr('src', downloadUrl); }, 500 );
});
I have this code.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<?
if (isset($_POST['submit2'])){
echo $_POST['text2'];
}
?>
<script>
$('#form').submit(function(e) {
$('#loading').show();
return false;
});
</script>
</body>
</html>
I want to store in my db the value written in the textbox using PHP, and while it's being saved, I want to show a gif using jQuery, once the page is loaded, this gif should be removed.
Then, If I don't comment nothing, gif appears when submit button is submitted but echo fails.
If I comment the jQuery script, PHP echoes the vale written.
If I comment the PHP script, gif is shown but no echo of course...
How could I do what i'm asking. I know that my full script does until only showing the gif, but this without this I can't continue.
You can achieve your desired behaviour, but you need to do it by submitting an AJAX request to the server and then handling the return value. So basically you'd add this ajax request to the click or submit event of the form, and handle the behaviour and request via javascript.
Perhaps something like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action = "formSubmitHandler.php" method = "POST" id = "form">
<img src = "circle.gif" id="loading" style="display:none; "/>
<input type="text" name = "text2">
<input type="submit" name="submit2" value="Send">
</form>
<script>
$(document).ready(function(){
$('#form').submit(function(){
// Show the loading icon before the processing begins
$('#loading').show();
// Send the query/form details to the server
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
success: function(results) {
// Now that the processing has finished, you
// can hide the loading icon
$('#loading').hide();
// perhaps display some other message etc
}
})
return false;
});
});
</script>
</body>
</html>
I don't know how to explain this, but I will do my best...
I am trying to submit a form normally, but the request result will be displayed at a iframe. Everything goes fine to here. What I want to do (if it is possible) is to animate the form putting a message into it (like "sending...") ultil the iframe is load with the respose. I now this is so confuse, but take a look to my files:
index.php
I have ommited the header because is so obvius.
<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
Choose your file here:
<input name="uploaded_file" type="file"/>
<input id="send-button" type="submit" value="Subir imagen"/>
</form>
<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
$(document).ready(function(){
$('#send-button').sendImage({formid: "form-upload"});
});
</script>
upload.php
Just for testing porpuses.
<?php
if( isset($_FILES['uploaded_file']) )
echo "image sent";
animate.js
This is where I am dealing with that. Because when I access the index.php always the message sending... is showed instance of the form elements.
var conf;
jQuery.fn.sendImage = function(args) {
conf = $.extend( {
}, args);
this.on('click', function(e){
e.preventDefault();
$('#'+conf.formid).submit();
$('#'+conf.formid).html('sending...');
});
}
Once a form is submitted, all processing on the current page stops. Anything you do must be BEFORE you actually submit the form. You alternative is to submit via AJAX.
Once again a question...it's almost driving me crazy for hrs :-/
My problem:
I have an upload form on my website and the upload works fine. But I want to give the user a feedback while uploading, cuz it can take a few seconds depending on the file size.
I thought about showing a gif animated progress bar in a div and show it with javascript. I tried it, but it just won't show up when I'm hitting the submit button...and when I'm adding onSubmit=".... return false;" the upload won't work anymore...
here is my code:
in the head:
<script type="text/javascript">
function showHide() {
var div = document.getElementById('progressBar');
if (div.style.display == 'none') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
</script>
body:
<div id="progressBar" style="display:none;height:40px;width:250px;margin:0px auto;">
<img src="img/progressbar.gif" alt="Progress Bar">
</div>
<form name="photo" id="upload_big" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" onsubmit="showHide();">
<input class="linkinput" type="file" name="image" size="20"/>
<input type="submit" name="upload" id="uploadbutton" value="Upload image"/>
I would appreciate any help...and since I'm a rookie -> please help me to get better instead of judging ;-)
Thanks out there!
It's because when the submit event has triggered, the browser already sent the form and will go to another page.
Use jQuery:
$(function() {
$('#upload_big').submit(function() {
showHide();
});
});
Sometimes, the form submission prohibits you from casting anymore JavaScript functionality on the page. To be on the safe side, you should also base functionality not on the form submission event, but on the <input type="submit"> click:
$(function() {
$('input#uploadbutton').click(function(e) {
showHide();
e.preventDefault();
});
});
My code is somewhat like this:
<?php
if($_REQUEST['post'])
{
$title=$_REQUEST['title'];
$body=$_REQUEST['body'];
echo $title.$body;
}
?>
<script type="text/javascript" src="texteditor.js">
</script>
<form action="" method="post">
Title: <input type="text" name="title"/><br>
<a id="bold" class="font-bold"> B </a>
<a id="italic" class="italic"> I </a>
Post: <iframe id="textEditor" name="body"></iframe>
<input type="submit" name="post" value="Post" />
</form>
The texteditor.js file code is:
$(document).ready(function(){
document.getElementById('textEditor').contentWindow.document.designMode="on";
document.getElementById('textEditor').contentWindow.document.close();
$("#bold").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}
else{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}
else{
$(this).addClass("selected");
}
ItalicIt();
});
});
function boldIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function post(){
var iframe = document.getElementById("body").contentWindow;
}
Actually I want to fetch data from this text editor (which is created using iframe and javascript) and store it in some other place. I'm not able to fetch the content that is entered in the editor (i.e. iframe).
Please help me out in this.
You can't do that because it is not allowed.
Javascript is not allowed access to other frames/iframes, as it would result in a security breach.
Try to implement your editor inline in a <div></div> instead of iframe