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????
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.
Related
I want to count click set condition and display message for 2 condition.
If first time click it will display message "clicked".
I clicked second time it will display "paused clicked".
I am trying this code. It's detecting click inside iframe but not following condition.
var action = 1;
var monitor = setInterval(function(){
var elem = document.activeElement;
if(elem && elem.tagName == 'IFRAME'){
if ( action == 1 ) {
message.innerHTML = 'Clicked';
action = 2;
} else {
message.innerHTML = 'paused Clicked';
action = 1;
}
clearInterval(monitor);
}
}, 100);
iframe {
width: 500px;
height: 300px;
}
<iframe id="iframe" src="//example.com"></iframe>
<div id="message"></div>
http://jsfiddle.net/lemonkazi/16sdrqbq/
You clear the interval at the bottom (clearInterval(monitor);), so at no point is this function going to run again. It's setting action correctly to 2, but in order for it to check action == 1, it would need to run this function again.
Unfortunately, what you're trying to accomplish is not possible (Detecting multiple clicks inside an iframe) if you don't control what's going inside the iframe. The activeElement is actually pretty clever, but since clicking again in the iframe wont cause it to change again, there's no way to sense another click. You would have to attach an event to the inner-frame, which requires same-origin access. See here and here.
I have a simple checkbox.
<div class="myCheckBox"><label><input type="checkbox" checked><span class="label-text">My Label</span></label></div>
Note: The HTML is part of a stack that already has a unique ID assigned to it (referenced the the JS as %id%.
I want to connect it to a javascript function. I know I can use onClick in the HTML to achieve this, but in this use case I need an event handler in my javascript to call (correct term?) the function.
My JS is
$(document).ready(function() {
var stack = $('%id%'),
checkbox = $('.myCheckbox',stack);
function filterCheck(%id=filterName%, %id=values%) {
var sheet = mainViz.getWorkbook().getActiveSheet();
var updateType;
if(checkbox.is(":checked")) {
updateType = "ADD";
} else {
updateType = "REMOVE";
}
worksheetArray = sheet.getWorksheets();
for (var i = 0; i < worksheetArray.length; i++) {
worksheetArray[i].applyFilterAsync(filterName, values, updateType);
}
}
}
checkbox.click(function(e) {
}
});
The event handler (I assume) goes after the checkbox.click(function(e) { ...but I am at a moment of clueless loss. Help?
I could see one issue with the code.
var stack = $('%id%'),
checkbox = $('.myCheckbox',stack);
You are not using # to reference id of element. Correct way should be either escaping the special characters
var stack = $('#\\%id\\%')
or by wrapping up dom object with jQuery Wrapper
var stack = $(document.getElementById('%id%'))
Both will help to find the stack which you have used as context below
$('.myCheckbox',stack);
event handler should work fine as given.
I am working on a dialog script in Vanilla JS. I ran into a problem with the click event on the video image. Even tough the image is surrounded with an anchor tag it shows the image as the event.target on the "trigger-dialog-open" event.
Here is the HMTL:
<a class="trigger-dialog--open thumbnail" data-dialog-id="dialog-video" href="javascript:;">
<figure>
<img src="http://i.ytimg.com/vi/id/sddefault.jpg" alt="" />
</figure>
</a>
And this is the event in JS:
var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < openTriggers.length; i++) {
openTriggers[i].addEventListener("click", function (event) {
this.openDialog(event.target.getAttribute('data-dialog-id'));
}.bind(this), false);
}
The event handler wants to know the dialog-id from the anchors data attribute. It can't be found because it thinks the image is the event.target, not the actual anchor. How can I correct this? Thanks!
Use event.currentTarget. The event.target is supposed to be the img element since that is what the user has clicked on. The click then bubbles up through the image's containers. event.currentTarget gives you the element that the click handler was actually bound to.
(Or if you didn't bind this to some other object you could use this within the click handler and it should also be the current target.)
I have a few questions is the var openTriggers supposed to be a part of a module hash? Because if it's global then you don't use a this, you only add a this, if it's referencing a variable that the function is also contained in. For example:
var aThing = {
openTriggers: document.getElementsByClassName('trigger-dialog--open'),
openModal: null,
openDialog: function(clickedThingAttr){
if(this.openModal !== null){
this.openModal.style.display = 'none';
}else{
this.openModal = document.getElementById(clickedThingAttr);
}
this.openModal = document.getElementById(clickedThingAttr);
this.openModal.style.display = 'block';
},
setEventListenersNStuff: function(){
for (var i = 0, n = this.openTriggers.length;i < n; i++) {
this.openTriggers[i].addEventListener("click", function (event) {
this.openDialog(event.target.getAttribute('data-dialog-id'));
});
};
}
};//end of aThing hash object
aThing.setEventListenersNStuff();
There are a few issues here:
1. why are you using .bind I think that is a jQuery thing, you want to pass a string to another function when an object is clicked, there no need for binding at all.
2. Also make sure that if you want to do something like open a modal, there is no need to call another method unless it's kinda complex.
3. What about other potential dialogs, it seems that when a .trigger-dialog--open is clicked you're just showing that one one modal with the embedded id, but what about others? Make sure all modals are closed before you open a new one, unless you want to have like 10 modals are open.
A thing to note: I added the line var i = 0, n = openTriggers.length;i < n; i++, now in this case it's silly optimization, and I heard for modern browsers this doesn't apply, but to explain why I added it, is because i < openTriggers.length would count and integrate the array N times. (This may be an outdated optmiziation).
If you meant global
Below I added a different set of code, just in case you meant that var openTriggers is global, kinda like you wrote above. Also I used querySelectorAll for this which is like jQuery's $('.thing') selector.
anyhoo, I also added
var openTriggers = document.querySelectorAll('.trigger-dialog--open');
var n = openTriggers.length;
function openDialog(ddId){
for (var i = 0;i < n; i++) {
openTriggers[i].style.display = 'none';
};
document.getElementById(ddId).style.display = 'block';
};
for (var i = 0;i < n; i++) {
openTriggers[i].addEventListener("click", function (event) {
openDialog(event.target.getAttribute('data-dialog-id'));
});
}
}
So for the question of hiding already open modals I would suggest you could either cache the open Dialog within a module, or you could toggle a class, which would be less efficient since it would require an extra DOM search. Additionally you could add a if this.openModal.id === clickedThingAttr to hide if open, that way you got a toggle feature.
Anyways I suggest you read up on this stuff, if you want to use plain JS but would like the features of jQuery: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native
Thank you for your time.
You can use a closure
var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < this.openTriggers.length; i++) {
(function(element) {
element.addEventListener("click", function (event) {
element.openDialog(event.target.getAttribute('data-dialog-id'));
}, false)
})(openTriggers[i]);
}
I have this code that registers an event to an array of breakpoints:
var breaks = ["(min-width: 800px)","(min-width: 300px)"];
var breakChange = function(mq) {
console.log(mq);
}
for ( i = 0; i < breaks.length; i++ ) {
var mq = window.matchMedia(bG.breaks[i]);
mq.addListener(breakChange);
}
It works great, but I want to be able to remove the listeners from these breaks at a later point. Does anyone know what would be the best way to go about removing event listeners registered dynamically at a later point?
I have this function (transComplete) which performs the task of highlighting a relevant indicator showing the user which page they are on, each element of these controllers/indicators represents a page and will highlight appropriately.
This works independently however when I introduce a click function that allows to interact with indicators to move between pages it navigates correctly but does not highlight as needed (works only every two clicks) which leads me to believe its a logic issue in my code.
The boolean logic of true/false is the cause, the highlighting only occurs on the 'true' cases of the variable "isOnSecond" so I essentially need a solution that always highlights the relevant controller when clicked
The main function is below:
function transComplete() {
slideTransStep = 0;
crtSlideIndex = nextSlideIndex;
// for IE filters, removing filters re-enables cleartype
if (nextSlide.style.removeAttribute) {
nextSlide.style.removeAttribute("filter");
// show next slide
showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);
//Highlights a nav circle every two transitions as the boolean alternates
if (isOnSecond == true) {
//unhighlight all controls
for (var i = 0; i < slidesControllersCollection.length; i++) {
if (slidesControllersCollection[i].className === slideHighlightClass) {
slidesControllersCollection[i].className = "";
}
// highlight the control for the next slide
document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
}
isOnSecond = false;
}
else {
isOnSecond = true;
}
}
The onclick Function:
function clickSlide(control) {
showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true);
}
I think you made your trans function when you were still iterating from one page to the very next, now that user can go any frame, you need to clear any highlight each time, then put it again on current one.
Or rather, for performance's sake, store the last highlighted, then highlight the new one.
But ... why not just drop the 'onSecond' logic ? It doesn't make much sense for the user to get a highlight one time over two only...
Anyway if you keep it the onSecond idea, logic would be :
if (lastHighlighted) lastHighlighted.className = "";
if (isOnSecond) {
lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
lastHighLighted.className = slideHighlightClass;
} else {
lastHighLighted = null;
}
isOnSecond = ! isOnSecond;
But in fact i wonder if what you want is not the version without onSecond logic :
if (lastHighlighted) lastHighlighted.className = "";
lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
lastHighLighted.className = slideHighlightClass;
(Rq declare lastHighlighted as a var so it can be in the scope of transComplete)