Question

I have a SUBMIT and SAVE button for a form that are by default listening for Onclick events.
When the form is SUBMITTED OR SAVED – the page resets the scroll position to the TOP of the page.

Recently the users of the applications have requested that the page stay at the bottom of the page where the buttons are located for only a subset of forms.
(These buttons are used across hundreds of other forms so I cannot change the reset of the scrolling globally.)

So the solution that I am trying to implement involves a couple hidden input fields and a few event listeners.

I have added an onmousedown event for these buttons, like so –

// Submit and Save button listeners
  var globalButtons;
  if (v_doc.getElementsByClassName) {
    globalButtons = v_doc.getElementsByClassName('globalbuttons');
  }
  // Internet Explorer does not support getElementsByClassName - therefore implement our own version of it here
  else {
    globalButtons = [];
    var myclass = new RegExp('\\b'+'globalbuttons'+'\\b');
    var elem = v_doc.body.getElementsByTagName("input");
    for (var i = 0; i < elem.length; i++) {
      var classes = elem[i].className;
      if (myclass.test(classes)) {
        globalButtons.push(elem[i]);
      }
    }
  }
  for (var gb = 0; gb < globalButtons.length; gb++) {
    if (globalButtons[gb].name == 'methodToCall.route' ||
        globalButtons[gb].name == 'methodToCall.save') {
      if(globalButtons[gb].addEventListener) { //all browsers except IE before version 9
         globalButtons[gb].addEventListener("mousedown", function(){flagSpecialScrollOnRefresh()},false);
      }
      else {
        if(globalButtons[gb].attachEvent) { //IE before version 9
           globalButtons[gb].attachEvent("onmousedown",function(){flagSpecialScrollOnRefresh()});
        }
      }
    }
    else { continue; }
  }

This code is located in a function called attachButtonListeners

Next, I defined my handler like so and placed it into another function that gets called each time my page is being loaded –

function checkSpecialScrollCase() {
  var spfrm   = getPortlet();
  var sp_doc  = spfrm.contentDocument ? spfrm.contentDocument: spfrm.contentWindow.document;
  var specialScrollExists = sp_doc.getElementById(docTypeButton).value;

  if (specialScrollExists == "YES") {
    sp_doc.getElementById(docTypeButton).value = 'NO';
  }
  // else - nothing to do in this case
}

docTypeButton = REQS_BUTTONS
And it references the following element at the bottom of my JSP page –

<input type="hidden" id="REQS_BUTTONS" value="NO"/>
<a name="anchorREQS"></a>

Notice the anchor tag. Eventually, I need to add the location.hash call into my handler so that I scroll to this location. That part is irrelevant at this point and here is why.

Problem –
My flagSpecialScrollOnRefresh function is NOT setting the value to YES when it should be.

I believe my onClick event is happening too fast for my onmousedown event from happening.

Evidence –
If I place an alert statement like so –

function flagSpecialScrollOnRefresh() {
  var scfrm   = getPortlet();
  var sc_doc  = scfrm.contentDocument ? scfrm.contentDocument: scfrm.contentWindow.document;
  alert("BLAH!");
  sc_doc.getElementById(docTypeButton).value = "YES";
}

And then I examine the element using Firebug – the value is getting SET!
Once I take out the alert – no go!

How do I ensure that my mousedown event gets executed first? Or is this even the problem here????

Answer 1

mousedown is part of a click event.

Whatever you are doing with click events now should be moved to the submit event on the form. That way you can use mousedown, mouseover, or even click on the buttons to do whatever you want.