when i receive a response from the server without that is not handle by AJAX i have a problem to catch the data, normally the data goes to the target but that only happens in Chrome, the other browsers open a new tab and insert the response in the new tab, my question is how i can avoid that? i wanna insert on the target, the code below is the code of the page and the javascript that trigger the submit.
Here is the code of the form.
<div>
<form id='uploadFrm' action='/'enctype='multipart/form-data' method='POST' target='frame_trgt'>
<input id='1_inp' name='upfile' type='file' />
<input id='pathFile' type='input' name='path' />
<input id='uploadFile' type='submit' /><br />
</form>
<iframe id='frame_trgt' name='frame_trgt' />
</div>
Here is the code of the JavaScript that handle the upload file.
$('[name=upfile]').change(function(event){
$("#pathFile").attr('value', getData('carpet'));
$("#uploadFile").trigger('click');
});
i believe you just need to close your iframe tag
<iframe id='frame_trgt' name='frame_trgt'></iframe>
Related
I have a iFrame as follows
<iframe name="hiddenFrame" onload="hideProgress();" src="hiddenFarme.html" id="hiddenFrame" style="visibility:hidden;">
This iframe is used as a target when I am submitting a from which downloads a PDF document
<form id="pdfManualForm" method="POST" target="hiddenFrame">
<input type="hidden" name="x-auth-token" id="x-auth-token-Hidden">
<input type="hidden" name="userName" id="userNameHidden">
</form>
Function that submits the form :
function generatePDGManual(){
$("#x-auth-token").val('abc');
$("#userName").val('abc');
$('#pdfManualForm').attr('action', Settings.URL + "/json/manual/create")
$("#pdfManualForm").submit();
}
The hide progress function looks like this :
function hideProgress(){
Ajax.hideProgress();
}
The problem I am facing is when the form submit is complete and we receive the pdf document, hideProgress function doesn't get invoked (on Chrome). Is there a way I can capture the event when document download is complete.
Thanks,
Tarun
I've got a simple HTML/JS:
<form method="post" enctype="multipart/form-data" action="Service.ashx" target="download" id="uploadForm">
<label for="x">Select file:</label> <input type="file" name="x" id="x" /> <button type="submit">Generate</button>
</form>
<iframe style="display: none" name="download" id="frmDownload"></iframe>
<script type="text/javascript">
document.getElementById("frmDownload").onload = function () {
alert("Yay!");
}
</script>
In a nutshell, there's a tiny <form> which submits to a hidden <iframe>. Upon success, the Service.ashx will return a file download:
content-type: application/zip
content-disposition: attachment; filename="result.zip"
The process can take a little while (a minute or two), so I'd like to display a "Please wait, still processing" to the user. When the process completes and the file is available for download, I want to display "All done!". Unfortunately the onload script doesn't seem to get called (I'm using latest Chrome on Windows). Any suggestions how to do this?
Added: A-ha! It's a Chrome issue! And looking for Chrome specifically, looks like that's been covered already: Which JS event is fired when Chrome gets the download file?
Heh, first time I've close-voted my own topic! :)
I have a hidden iframe where the submission of a form is handled. It goes like this:
<iframe name="foo" style="display:none;"></iframe>
So, I was wondering, if it is possible that after the stuff has happened that needs to be within the iframe, I can use javascript or something to print out data on the parent page? Thanks
EDIT: here is my form code.
<form id="bar" name="bar" method="post" target="foo" action="include/database.php">
<input type="text" name="betamount">
<input type='text' name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<input type="submit" name="submit" value="Bet">
</form>
<iframe name="foo" style="display:none;"></iframe>
Database.php handles these POST requests inside the iframe. Now, there is this one thing inside database.php which goes like this
$betamount = $_POST['betamount'];
$multiplier = $_POST['multiplier'];
$payout = (int)$betamount*(int)$multiplier;
What I want to do is, I want to use AJAX or something to echo out the 'payout' variables inside a div present on index.php
For the purposes of my answer, I'm assuming that the actions you are doing in server side cannot be replaced by a simple client-side one (using javascript).
If you are expecting a return, why don't you use AJAX directly, without iframes? Simply post the data to your php page, and return it asynchronously.
JsFiddle: http://jsfiddle.net/ericwu91/28U8n/
HTML Code:
<input type="text" id="amount" name="betamount">
<input type='text' id="multiplier" name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<button onclick="submit();return false;">Submit</button>
JS Code:
var yourData = {multiplier:$("#multiplier").val(),betamount:$("#amount").val()};
$.post("yourUrl.php",yourData,function(result){
//Success: Use the "result" parameter to retrieve the data returned from server
alert(result);
});
I'm using jQuery's ajax post method. Documentation here: http://api.jquery.com/jquery.post/
The perks of doing it this way is that it does exactly what you wanted to, but simplifies it by using an almost-native javascript property (asynchronous responses).
EDIT: I forgot to put the real jsfiddle link... And after I pasted all the HTML and JS code, I realized how useless the fiddle is, as it won't return any respose at all... xD
I currently use an iframe in an AJAX upload form, my question is once the file has uploaded to the iframe it appends the data to a div, so would i be safe to say i can remove the iframe once the load has completed?
my js is
$("#formsubmit").click(function (event) {
event.preventDefault();
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "uploader.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
$("#postiframe").remove(); // i thought this would do it but it doesn't
});
return false;
});
Also even though i have event.preventDefault(); if i remove the return false at the bottom it still submits the form (refreshes to new page).
my html is:
<div id="uploadform">
<form id="theuploadform" action="">
<input id="userfile" name="userfile" size="50" type="file" />
<input id="formsubmit" type="submit" value="Send File" />
</form>
</div>
<div id="textarea"></div>
So to summarize my questions:
Is it possible to delete the iframe after an upload once it has copied to the "textarea"
if so the $("#postiframe").remove doesn't work
does anyone know why when i remove return false, it reloads the page instead of using the event.preventDefault(); at the beginning
Thank you in advance.
Your <iframe> is being appended to the window document through JavaScript after page load, use:
$(document).find('#postiframe').remove();
That'll transverse through the DOM and find your newly appointed <iframe>, and then remove it dynamically from the DOM as hoped.
Try <input type="button" /> to treat the form instead of <input type="submit" />, if you still want to handle the <input type="submit" /> form submission still, try:
$('#theuploadform').submit(function(event){
event.preventDefault();
});
function instead, that'll allow jQuery to prevent the default behaviour of the entire form and all it's child elements.
I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?