I have a form which submits a php file to an iframe.
Here is the form:
<form action="del.php" method="post" target="output" >
Server: <input type="text" name="server_id" value="" />
Name:<input type="text" name="name" value="" />
Password:<input type="password" name="password" value="" /> <br>
Create Log? <input type="checkbox" name="log" value="" />
Output list of files? <input type="checkbox" name="out" value="" /><br>
<input type="submit" name="delete" value="Delete FTP!" /></td><br>
<iframe id="output" ></iframe>
del.php deletes files on a romote ftp. That recursive funcion takes a while.
Now I want to show a loading image by loading the del.php to the iframe.
I hope this answer helps you or anyone else looking for a solution. This one worked for me.
I'm trying to do the same. I have a page that calculates shipping on an iframe and i want it to show a loading gif image while the shipping cost loads as an xml from my shipping provider.
The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.
What you need to change is the image URL for your site. You might also want to change the DIV background color (currently set to #FFF).
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text- align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
This worked for me. It shows a loading Gif animation before the page is loaded in my iframe box. :)
Related
I'm fairly new as a web developer.
I have a form that POST from a Facebook Canvas app (belonging to a third party service) to a file on my server. And then put the response in an iframe:
<iframe style="width: 0px; height: 0px;" name='theiframe' src='...'> </iframe>
<form style="display: none;" id='mandrill_form' action="https://www.mysite.com/myfile.php" method="POST" target='theiframe'>
<input id='mandrillSend' type="text" name="email"><br>
<input id='nameSend' type="text" name="user"><br>
<input id='addressSend' type="text" name="address"><br>
<input id='zipSend' type="text" name="zip"><br>
<input id='citySend' type="text" name="city"><br>
<textarea id='other' type="text" name="other"> </textarea><br>
<input id='premieInfo' type="text" name="premieInfo"><br>
<input id='mandrillTemplate' type="text" name="template"><br>
<input id='mandrillSubmit' type="submit" value="Submit">
</form>
Everything works great for most of the users but 7% of the posts never reach myfile.php. (I keep track of all the user clicks, and the browsers with a third party Facebook plugin on the canvas page and a log file on my server). It dosen't seems to have anything to do with a specific browser.
I'm using the jQuery .submit() function to send the form.
My question is:
How should I go on debugging to find what causes this 7% loss of cross domain POST requests?
Losing 'traffic' like this is very normal.
You can see it in the advertisements companies. They almost every time losing 10% of the traffic.
But that how the internet works. You just can't catch them all.
i have this cod that insert text to data base, but i need insert the images withe text into data base.
my code ajax like :-
function AddComment(){
var text=$("#text").val();
$.ajax({
type:"post",
url:"application/controllers/process.php",
data:"text="+text+"&action=add",
success:function(data){
showComment();
}
});
}
my form :-
<form>
<input id="inputUpProfile" name="inputUpProfile" class="inputUpProfile hidefile" type="file" onchange="readURL(this)"/>
<img id="blah" src="#" width="100" height="100" style="display:none" />
<textarea name="post" id="text" rows="3" cols="40" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
<ol class="controls clearfix">
<input type="button" id="sent" onclick="AddComment();" class="uibutton confirmb" value="Send">
</form>
To upload an image using Ajax, you need to use an iFrame, a flash plugin or something like that. With iFrame, the concept is that you have an iFrame (invisible) somewhere on your page with an ID. You point your form's target attribute at it, then in the result page in the iFrame you call a function in the parent window's javascript which triggers the result in your main window. It's fairly straight forward and doesn't require large plugins or much messing around with.
This is heavily documented on stack, so do some searching.
https://stackoverflow.com/search?q=php+ajax+jquery+upload+image+with+iframe
I have a form HTML and users can upload a image to make screenshot to preview.
<form id="myForm" action="message.php" method="post">
Screenshot: <div class="show_image"></div> <br />
<input type="file" name="name" /> <br />
<input type="submit" value="Submit Comment" /> <br />
</form>
I also refer some articles on Internet but I don't know the way to do it. Can you give me some solutions or ideas ?
Thank you !
what is the plugin you are using? Almost the AJAX_UPLOAD plugins have the call-back function to show the image after uploaded.
I want to add an avatar image upload feature to my project, and I was wondering if there exists any AJAX/jQuery solution for uploading an image without needing to refresh the page after uploading (the image uploads automatically).
I have used http://www.uploadify.com/ in several projects and it works great.
Apparently this can do it, haven't tried it yet.
http://www.plupload.com/
You could use an iframe as target, to avoid full page reload:
<form method="post" action="your_action" enctype="multipart/form-data" target="myIframe">
<input type="file" name="image" />
<input type="submit" value="Upload image" />
</form>
<iframe name="myIframe" id="myIframe">
//Post response will load here
</iframe>
trying update panel with a trigger DOES NOT WORK !!
DOESNT NOT WORK:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Repeater ID="rpUploadedImages" runat="server">
<ItemTemplate>
<img src='../Images/<%# DataBinder.Eval(Container.DataItem, "ImagePath")%>'/><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnupload" EventName="click" />
</Triggers>
</asp:UpdatePanel>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="btnupload" runat="server" Text="Upload" onclick="btnupload_Click" />
DO WORK:
so you have to go with placing the whole FileUpload tag in a separate page, and call it in iframe in your main page, and of course keep the "Upload" button in the iframe; so by click on the upload button the iframe alone will refresh without refreshing the whole page.
(well tested)
I am using this form and its appearing as it should in dreamweaver but when I use it in on the website its big again. the site is loaded via include as dynamic content (php).
<form action="index.php" method="get">
<input type="hidden" name="content" value="home" />
<label>Go to
<input style height="20" width="40" type="numeric" name="page" />
</label>
<input type="submit" value="Go" />
</form>
I appreciate any help!
Add style="width:Npx; height:Mpx;" where needed in favor of the deprecated width and height HTML attributes.
Example:
<form action="index.php" method="get">
<input type="hidden" name="content" value="home" />
<label>Go to
<input style="height:20px; width:40px" type="numeric" name="page" />
</label>
<input type="submit" value="Go" />
</form>
Or, use the width property in CSS: <form style='width:##px'> The <form> element is displayed by default as block, therefore it strecthes all over the width of its parent
Although other the other answers here will probably work, inline style tags should ideally be avoided.
Really, you should set up a CSS stylesheet, give the input element a class and set the styles you want for this class in the stylesheet. The advantage of doing it this way is that if you have a more than form element like this in your website you can just add the class name and it will be appear in the same way (this is especially important if you change how things look).
Using CSS has a learning curve, but it will pay off many times in the long run.