Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

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

0
blink10
Asked:
blink10
  • 7
  • 4
  • 3
  • +1
2 Solutions
 
MorphorCommented:
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...
0
 
blink10Author Commented:
i dont want to save changes, i want my form to work with the back button.

0
 
blink10Author Commented:
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
blink10Author Commented:
nobody as any ideas?
0
 
Tom BeckCommented:
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?
0
 
blink10Author Commented:
problem is in chrome.

and it loses the fade property and no longer activates my script upon clicking on it.
0
 
RobOwner (Aidellio)Commented:
you should wrap these lines in a window.onLoad function


var form = document.getElementById('login');
setDefaultText(form.elements.response, 'Write a comment...');
0
 
Tom BeckCommented:
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

0
 
RobOwner (Aidellio)Commented:
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
0
 
blink10Author Commented:
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.

0
 
RobOwner (Aidellio)Commented:
no it should be the window onload

ie

function init() {
    var form = document.getElementById('login');
    setDefaultText(form.elements.response, 'Write a comment...');
}
window.onload = init;

Open in new window

0
 
blink10Author Commented:
ok i just added that, same problem occurs
0
 
Tom BeckCommented:
RE: JQuery script vs. javascript

You would not have to do anything but swap my jquery script in to replace your javascript. You already have two versions of jquery.min.js included so there's no additional overhead. One is all you need to get this to work. Your "faded" class is already in place so no need for re-styling.
0
 
blink10Author Commented:
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.
0
 
Tom BeckCommented:
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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now