hey guys I'm having a problem with an upload form I've made. It works in Firefox and IE but it wont work with Safari and Chrome so I assume it's a webkit problem.
First I run the php form and change the target to an iframe. Then once it's finished uploading I get PHP to echo a div iwth a statement true/false back into the iframe.
The problem i'm having is that PHP isn't echoing the statement into the iframe.
here's the code i've got:
in the php:
//do all the appropriate checks etc and if it's uploaded do the following
if ($success == true)
{
echo '<div id="result">success</div>';
} else {
echo '<div id="result">error</div>';
}
then in my javascript I do a few checks to see if the forms filled out etc and then if all is well I call submit() first and then I call iframeCheck()
function submit()
{
//change the target of the upload form to upload to the iframe.
$('#contactForm').attr('target','uploadIframe');
//submit the iframe
$('#contactForm').submit();
//fade in the sending message
$('#sendingMessage').fadeIn(200);
}
function iframeCheck()
{
//get the contents of iframe
var elem = $('#uploadIframe').contents().find('div#result');
var result = elem.html();
//if there's nothing in it, upload hasn't finished...
if ( elem.length <= 0)
{
//check it again in 2"
clearTimeout(timer);
var timer = setTimeout(iframeCheck, 2000);
} else if (result =='success'){
//if it contains a success message, display the success message
$('#sendingMessage').fadeOut(200);
$('#successMessage').fadeIn(500);
inputButton.removeAttr('disabled');
} else {
if (result == 'error')
{
//otherwise display the error message
$('#sendingMessage').fadeOut(200);
$('#failureMessage').fadeIn(500);
inputButton.removeAttr('disabled');
}
}
}
It works fine in ff and IE but as i said chrome and safari wont echo into the iframe.
Thanks for your help folks!
Is the iFrame URL the same domain as the general homepage? Perhaps it has something todo with cross domain policy.
Thanks heaps for your guys help. John it was a problem with my javascript. I was disabling the send button as soon as it was clicked. This worked fine except that webkit didn't like it so what I had to do was add onsubmit="document.getElementById('submitButton').disabled=true;" and that works fine now.
Cheers
Related
I developed online exam for education company.I want to make my exam open on full screen mode.I tried several codes but don't work.Any help?
I disabled right click and f12.
You will need to use Javascript.
You can add a button or link that calls goFS() in it's href to trigger fullscreen in browser.
<script>
function goFS(){
if (fs.requestFullscreen) {
fs.requestFullscreen();
} else if (fs.webkitRequestFullscreen) {
fs.webkitRequestFullscreen();
} else if (fs.mozRequestFullScreen) {
fs.mozRequestFullScreen();
} else if (fs.msRequestFullscreen) {
fs.msRequestFullscreen();
}
}
</script>
I have a simple grid showing some information about the items in the database. this is index.php. When the user wants to edit one of the records they click on the link which opens another page (edit.php). When they are finished editing I would like to find a way to refresh the index.php so it has the updated info. Is there a way to do this?
I found this and modified it, seems to work well.
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
For refresh parent window from child window using javascript
opener.location.reload();
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
On Codeigniter I have a code
HTML
//ROOTPATH is the constant Path and $recordId is coming from a loop.
Delete
Javascript
windowRedirect(url,msg)
{
if(confirm(msg))
{
window.location.href = url;
}
else
{
return false;
}
}
I have written a simple javascript which will redirect url if user click on OK button but I am getting weird problem on Google chrome where this code is working perfectly on Mozila Firefox, IE 8/9 and Applae Safari. Can any one tell me how can I solve this Google Chrome Problem.
Though I have a doubt this script is probably not working because of '#' on the href field but I am not sure.
Here is an working example:
<html>
</head>
<script>
function window_redirect(url,msg)
{
if(confirm(msg))
{
window.location = url;
}
else
{
return false;
}
}
</script>
</head>
<body>
<a onclick="window_redirect('http://www.google.com','Are you sure you want to Delete');" href="#" >Delete</a>
</body>
</html>
You forgot to call state 'function' before function, also if you put onclick on a element (link) always put it before href="#" some browsers will not call onclick if that is not the case.
In my website authors (users) can mark posts as favorite.
It works this way:
if ($favinfo == NULL || $favinfo == "") {
$favicon = "ADD"; .
}
else {
$favicon = "REMOVE";
}
Its suposed to look dynamic, it works, when user click ADD, it adds the post to his favorites and reload the page with the REMOVE link.
The problem is its not really dynamic it reloads all the page.
How can i only reload that link (wich is inside a div)?
I know i have to use ajax, jquery, etc, but i tried some examples found here in S.O. but no success.
$('a').on('click', function(e){
// the default for a link is to post a page..
// So you can stop the propagation
e.stopPropagation();
});
Including this stop you page from reloading your entire page
If you want it to be dynamic, you will need to use AJAX. jQuery has ajax support which makes this really easy. If you are not familiar with ajax or javascript you should read up on it first.
PHP
if ($favinfo == NULL || $favinfo == "") {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"add\" href=\"".$siteurl."/author/favorites.php"\">ADD</a>"; .
}
else {
$favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"remove\" href=\"".$siteurl."/author/favorites.php"\">REMOVE</a>";
}
JavaScript
$('a.fav-btn').on('click', function(e){
var $this = $(this), // equates to the clicked $('a.fav-btn')
url = $this.attr('href'), // get the url to submit via ajax
id = $this.attr('data-id'), // id of post
action = $this.attr('data-action'); // action to take on server
$.ajax({
url: url+'?'+action+'='+id
}).done(function(){ // once favorites.php?[action]= is done...
// because this is in .done(), the button will update once the server has finished
// if you want the link to change instantly and not wait for server, move this outside of the done function
if(action === 'add'){
$this.attr('data-action', 'remove').html('REMOVE'); // update the button/link
}else{
$this.attr('data-action', 'add').html('ADD');
}
})
return false; // prevent link from working so the page doesn't reload
}
If you are okay with using JQuery, you have some tools to accomplish this.
Have a structure / method of identifying your links.
You can have a click() listener on your add button that will call a JQuery $.post(url, callback) function.
In that callback function, you can have it update the corresponding DIV (that you defined in #1) with a 'remove' link. i.e if you identify the DIV by ID, you can retrieve it via $('#id') and then update that object.
The same idea can apply with the 'remove' link that you add.
So, generally...
<button id="add">Add</button>
<div id="links"> ...</div>
<script>
$('#add').click(function() {
$.post('your url',
function(data) {
var links = $('#links');
// update your links with 'remove' button, etc
}
);
});
</script>
I have a form setup but for some reason the JS to submit the form works in Chrome but not IE9 or Safari. Interestingly enough in Chrome where the submit button does work none of the information gets passed.
Here is my submit button -
<img type="submit" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" />
Here is what JS it calls
// Submit form to next page
function submitForm() {
// document.forms["feedbackform"].submit();
document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) {
// Modified version original from: http://stackoverflow.com/a/46181/11236
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
var defaultMsg;
defaultMsg = "Enter your email address (optional)";
if(defaultMsg == email){
return true;
}
return false;
}
// Verify or decline with error message
function validate(){
$("#result").text("");
var email = $("#email").val();
if ((validateEmail(email)) || originalText(email)) {
submitForm();
} else {
$("#result").text(email + " is not a valid email.");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
For the second part of my issue which may or may not be related to the JS issue is -
echo $POST['satisfaction'];
echo $POST['user_email'];
echo $POST['comments'];
if(isset($POST['user_email'])){
echo 'true';
} else {
echo 'false';
}
If you would like a better look at the page I am editing here is a link to jsfiddle
edit
As per Marco's request I removed the link from around the submit button and placed the onClick event onto the actual button itself. This absolutely fixed the issue on both IE and Safari. Now my remaining question/concern is why the POST data is not passing correctly to the next page.
Here is the complete source with George requested. - index.php
Page source gets passed to - feedback-accept.php
Also with that being said/posted, what is StackOverflow's preferred site to post source to?
In response to Brian's comment, if I cannot use failed without potentially breaking the POST data, what would be a good alternative/work-around?
try this code:
jQuery:
$(document).ready(function()
{
$('.validate').bind('submit click',function()
{
//Validate!
//is email
if( /..../.test( $(this).find('input[name=email]').val() ) )
{
alert('Error!!!');
return false; //STOP PROPAGATION
}
//Its okay!
//send form!
$(this).parents('form').submit();
//click event stop propagation
return false;
});
});
HTML:
Submit
OR
<input type="submit" value="Submit" class="validate" />
OR
<button class="validate" >Submit</button>
In a quick look, I would say you are having a conflict of functions here. When you design a Submit Type, you are telling the browser that that will submit your form (on its action), on the other hand, that is inside a link that is calling a JS function. If you're manufacturing the submit in your JS, try to consider not use a Submit Type and see if it works more properly.
You might also try to replace the link for a simple "onSubmit" inside the form's Tag and call the JS function from there. This way, when the browser identifies that the user hit the submit button, he'll call a JS Function as you wish and if this function returns true, the submit will be allowed by the browser.