blink10

asked on 10/7/2011

Javascript not executing on back button

Here is the page: http://www.billsprice.com/product.php?productID=339267

so its the comment box, I am having trouble when you visit, then click to another link on the site, then use the back button. it is throwing all my settings off for this comment form.

thoughts on how to get js to not change when people click back?

<script type='text/javascript'>
var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');

function setDefaultText(field, text) {
    text = text || field.defaultText;
    if (field.value === '') {
        field.value = text;
        field.defaultText = text;
        addClass(field, 'faded');
    }
    field.onfocus = function () {
        removeDefaultText(this);
    };
    field.onblur = function () {
        setDefaultText(this);
    };
}
function removeDefaultText(field) {
    if (field.value === field.defaultText) {
        field.value = '';
        removeClass(field, 'faded');
    }
}
function hasDefaultText(field) {
    return (field.value === field.defaultText);
}
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += ' '+cls;
			document.getElementById('gg').style.height = '20px';
					document.getElementById('ggr').style.display = 'none';
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
		document.getElementById('ggr').style.display = 'block';
			document.getElementById('gg').style.height = '80px';
    }
}
</script>

Open in new window

JavaScriptWeb Languages and StandardsWeb Development

Last Comment

Tom Beck

8/22/2022 - Mon

Morphor

10/8/2011

You'd have to save the settings as Cookies...

I recommend you to just ask the user if he really wants to leave (if he has already made the changes):
<script language="javascript">
window.onbeforeunload = changesMade;

var changes = false; // indicates if the changes have been made

function changesMade() {
if(changes==true){ //changes have been made
return "Do you really want to leave? You will loose all the changes made.";
}
}
</script>

Of course, you have to add the "changes = true" code to the controls which might be changed by the user...

blink10

10/8/2011

ASKER

i dont want to save changes, i want my form to work with the back button.

blink10

10/8/2011

ASKER

i just dont get why none of my js scripts works when accessed via the back button, i have even tried to force the page to unload or reload, no luck.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

blink10

10/9/2011

ASKER

nobody as any ideas?

Tom Beck

10/10/2011

Your comment form shows "Write a comment.." in "faded" text. I click on another link on the page then click the back button as you instructed, but I still see "Write a comment..." in "faded" text. Nothing changes. What am I missing.

Can you provide a step by step on how to re-create the problem. Is it happening in a specific browser? "Throwing off all my settings" refers to what settings?

blink10

10/10/2011

ASKER

problem is in chrome.

and it loses the fade property and no longer activates my script upon clicking on it.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Rob

10/10/2011

you should wrap these lines in a window.onLoad function

var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');

Tom Beck

10/10/2011

I say just bag that entire script and use jquery.

JQuery is not my strong suit, but this code worked in Chrome, Firefox, and IE8. JQuery experts, feel free to improve on it if the author is not averse to using jquery.

<script type="text/javascript">
var defaultText = "Write a comment...";
$(document).ready(function(){
    $("#gg").val(defaultText);
    $("#gg").addClass("faded");
    $("#gg").height(20);     
});
$("#gg").blur(function() 
{ 
    var currentText = $("#gg").val(); 
    if(currentText == "")
    {
        $("#gg").val(defaultText);
        $("#gg").addClass("faded");
        $("#gg").height(20);
    } 
});
$("#gg").focus(function()
{
    $("#gg").val("");
    $("#gg").removeClass("faded");
    $("#gg").height(80);
});
</script>

Open in new window

Rob

10/10/2011

I agree with @tommyBoy - JQuery would be the best way to go. It's built to accommodate all the browsers etc and it's shorthand methods make it easier to see what you're doing

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

blink10

10/10/2011

ASKER

i dont want jquery, i am designing this a specific way and it is 99% functional for my system, it would take alot of time re-engineer and style another script, no to mention i have different versions of jquery already running and its turning in a huge time loss trying to get them to run on the same page....so i just want to get my script to function

I tried to add the onload but it doesnt seem to be doing anything....

i added:
function redo() {
var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');
}

and the onload='redo()' into the body tag

no luck though.

SOLUTION

Rob

10/10/2011

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

blink10

10/10/2011

ASKER

ok i just added that, same problem occurs

ASKER CERTIFIED SOLUTION

Tom Beck

10/10/2011

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

blink10

10/10/2011

ASKER

thanks for the solution, when i first saw you mention jquery, i thought it was a jquery comment system which i didnt want....

This works perfect though.

Thanks for everyone else's help too.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Tom Beck

10/10/2011

Thank you for the points.

BTW, if you want to know why the javascript doesn't work in Chrome, it's that when you navigate to another page and then come back using the back button, the value of the textarea is "Write a comment..." instead of an empty string as you might expect, so this line, if (field.value === '') evaluates to false in Chrome so the default text and styling is never restored. Must have something to do with the way Chrome caches textarea values that other browsers handle differently. How to work around something like that is a mystery to me.