PDA

View Full Version : form wizard problem in ie



eyalm
12-15-2012, 03:29 AM
1) Script Title: form wizard

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex16/formwizard.htm

3) Describe problem:

im using formwizard inside a window that pop up from prettybox script , i press on the link, the prettybox opens and inside there is the formwizard script... now it works fine in firefox and chrome, but in ie i dont see the fields .. i see only the "step 1,2" and "next"

when im removing from <form id="staff_feedbackform" the id , i see all the fields but offcourse they are not with "step 1,2"

i done all the instructions as in your site explanation.

how can i make this works in ie ?

thank you

jscheuer1
12-15-2012, 03:59 AM
Sometimes scripts act differently in some browsers unless the page is live and the HTML is validated. There could be other issues though. There was an issue with this script and some versions of IE in some cases relating to the CSS. Nothing quite like you're describing though.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

eyalm
12-15-2012, 01:15 PM
hey, thanks for your help, can i send you the link in private as this is a new site that im building for a customer and i dont want to publish it before im finish bulding it...

jscheuer1
12-16-2012, 03:50 AM
You don't have enough posts yet (5 required), nor have you been a member long enough yet (not sure how long that is, it's short but you've only been a member a short time, so probably not yet) to qualify.

Go here:

http://home.comcast.net/~jscheuer1/

at the bottom of that page it tells you how to email me. Send the link to me that way.

jscheuer1
12-17-2012, 07:53 PM
I got you're link. It's easier to show code changes here so I'm putting that info here. I'm not certain this will work. But I noticed that it works in IE sometimes. Always in IE 9. And that in IE 8 sometimes, and that there, the longer it takes before the form loads the better the chance that it loads correctly.

I also see that there are two versions of jQuery on the yaron/form/test.html page. It's only using the second one, which is far in advance of the one it was written for. So we could try running it without the second one. But let's go straight to what I think will work. I also see that there's init code that's not used on the page. Get rid of it and get rid of the first jQuery (remove the highlighted two places):


<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="http://domain_name.ext/path/form/formwizard.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://domain_name.ext/path/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type="text/javascript" src="http://domain_name.ext/path/form/formwizard.js"></script>
<script type="text/javascript">

var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500]
})

</script>

Oh, and if this code isn't being used (doesn't look like it is):


<script language="javascript" type="text/javascript">
<!--
/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,re sizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>

Get rid of it too.

Then, at the bottom where there is an initialization that's used, let's slow that down by making it wait until the iframe is fully loaded (add the highlighted):


Any additional instructions:<br /> <textarea id="staff_feedback" style="width:350px;height:150px"></textarea><br />
<input type="submit" />
</fieldset>

</form>
<script type="text/javascript">
$(window).load(function(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
})
});
</script>
</body>
</html>

If that's not sufficient, we can try adding a timeout. I'm thinking it might be good enough just like that.

The browser cache may need to be cleared and/or the page refreshed to see changes.

eyalm
12-17-2012, 10:20 PM
hey John , thanks for your help!

i tried what you wrote, i deleted all the codes you told me to delete.

and when im putting the 2 lines of codes at the bottom i can see the form , but its not giving me stages , its all fields in the same line (should give 2 lines then next button).

i tried deleting everytime only one line and see what happends try without those two lines... if im not putting the 2 lines its the same problem as was at the start, with the two lines i see the fields but they are all in the same box....

i left the code as you showed here so you could take a look .

thanks!!!

jscheuer1
12-17-2012, 11:20 PM
I see. Yes, there's an error in what I told you. It should be, down near the end of the page:


<script type="text/javascript">
jQuery(window).load(function(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
})
});
</script>
</body>
</html>

Sorry about that. Make the change, clear the browser's cache, refresh the page and see what happens.

If there's still a problem, let me see it so I can try to tell the next step. As I said before, we may need to add a timeout. Or it could be something else. But it's not going to work in any browser the way it is now, so make the above change and let me know.

eyalm
12-18-2012, 04:18 PM
I see. Yes, there's an error in what I told you. It should be, down near the end of the page:


<script type="text/javascript">
jQuery(window).load(function(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
})
});
</script>
</body>
</html>

Sorry about that. Make the change, clear the browser's cache, refresh the page and see what happens.

If there's still a problem, let me see it so I can try to tell the next step. As I said before, we may need to add a timeout. Or it could be something else. But it's not going to work in any browser the way it is now, so make the above change and let me know.

added , didnt work :(

jscheuer1
12-18-2012, 05:54 PM
Let's try a delay then:


<script type="text/javascript">
jQuery(window).load(function(){
setTimeout(function(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
});
}, 1000);
});
</script>

I do notice that if I refresh the iframe it works in IE 8. But then the next time (even without reloading the top page) you have to refresh the iframe again, so it doesn't carry over. I would hate to have to do that in the code though, and often what a manual refresh does, an automatic one will not. So let's see what happens here with this added delay. Again, the cache needs to be cleared because simply refreshing the page will not flush out the iframe contents. The page should be refreshed as well.

And, even it it doesn't seem to work, let me see it, just in case we can learn something from it.

eyalm
12-18-2012, 11:39 PM
yep!, its seems to work thats way! , i change the number to 180 as its the lower number that i can give it and it shows up the fields (i tested it up), that makes the refresh speed faster ...

but now i have a new problem... the form is ok in all pages, exept for the "buy" page, if you click on "buy" and inside buy on the form , it moves everything to the right... and now its only on chrome....( it was ok before all the changes we made), damn all those browsers can drive a man crazy....

another question, can i make this refresh goes only on ie ?

again thanks very very much, your great !!!

jscheuer1
12-19-2012, 01:59 AM
Well, if it's only in Chrome, and only with these changes, yes we can limit these changes to only IE 8 and less - the only browsers that need them.

Now the code we got rid of, that wasn't doing anything anyway, so we don't have to bring it back. What we will do is allow all the browsers that can, skip the onload and the timeout:


<script type="text/javascript">
;(function(){

function myformatwizard(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
});
}

var browser = /MSIE (\d+)/.exec(navigator.userAgent);
if(browser && browser[1] < 9){jQuery(window).load(function(){setTimeout(myformatwizard, 180);});}
else {myformatwizard();}

})();
</script>

eyalm
12-20-2012, 05:46 PM
hey john

if im copying this script the problem return.... , i tried to gave a higher number then 180... (got till 1000) and it didnt work either...

jscheuer1
12-21-2012, 05:00 AM
I don't see the problem script up on the test page. If you put it back up, I'll be able to figure out the problem. It's no different than what we had before that worked, only targeted for IE. You or I or both of us must have made a typo on it.

BTW, at the moment there's a problem with the server side code on the page in the iframe. That needs to be fixed before we can tell for sure whether or not the javascript code is working.

eyalm
12-21-2012, 12:17 PM
I don't see the problem script up on the test page. If you put it back up, I'll be able to figure out the problem. It's no different than what we had before that worked, only targeted for IE. You or I or both of us must have made a typo on it.

BTW, at the moment there's a problem with the server side code on the page in the iframe. That needs to be fixed before we can tell for sure whether or not the javascript code is working.

yes, sorry im making testing all the time on the files.... i wont tauch the left link flag so you could check it out.

jscheuer1
12-21-2012, 06:11 PM
OK, you have it set back to the working code. To fix this code:


<script type="text/javascript">
;(function(){

function myformatwizard(){
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
});
}

var browser = /MSIE (\d+)/.exec(navigator.userAgent);
if(browser && browser[1] < 9){jQuery(window).load(function(){setTimeout(myformatwizard, 180);});}
else {myformatwizard();}

})();
</script>

I would need to see a demo with that code on it.

However, looking at the working code I see how, until the iframe page is cached, it seems to load twice. It's not really. You're just seeing the actual form before the delay loads it with form wizard. You might want to try adding:


<script type="text/javascript">
jQuery(window).load(function(){
setTimeout(function(){
jQuery('body').css({visibility: 'visible'});
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
});
}, 180);
});
</script>

To that script, and setting the body's visibility to hidden initially (edit the opening <body> tag as shown):


<body style="visibility: hidden;">

That way the it shouldn't appear to reload/refresh.