I am trying to capture scroll start/stop events for a page control. I want to find out if the last field of the page is in the viewport. The way I am trying to figure out if field is in the viewport is by using the method getBoundingClientRect(). All this works fine but I am not able to invoke this method as I am not able to capture the scroll event. I intend to call this method inside the event handler for scrollstop, so I know the user has stopped the scroll and now is the time to check if the field is reached.
Using this link to find out the events that can be handled:
https://sapui5.hana.ondemand.com/#/api/module:sap/ui/events/ControlEvents
It is a touch device so need to figure out how to handle touch event as well.
Currently, below is the code for mouse scroll which is not working. Other events like clicked, mouseover are working.
How to get onscrollstart and onscrollstop to work?
In controller.js
onAfterRendering: function () {
controller.getView().byId("PAGECONTROLID").addEventDelegate({
onclick: function(){
console.log("clicked"); // works on all panels within the page
},
onmouseover: function(){
console.log("mouseover"); // works on all panels within the page
},
onscroll: function(){
console.log("onscroll"); // IS NOT CORRECT EVENT, but tried it anyway
},
onscrollstart: function(){
console.log("scroll start"); // DOES NOT WORK
},
onscrollstop: function(){
console.log("scroll stop"); // DOES NOT WORK
}
})
Related
Heads up to anyone who is self hosting who also runs across this bug....
In version 5.6.0 silver theme, the dialog urlinput enable/disable works for the input field but not the browse button of the control. The problem is that the enable/disable events are intercepted by the typeaheadBehaviours portion of the internal object so they never make it to the event handlers for the overall field. The fix is to add the onDisabled and onEnabled handlers to the Disabling.config for typeaheadBehaviours and remove the line of code from each handler that addresses the input field.
Original typeaheadBehaviours Disabling.config....
Disabling.config({
disabled: function () {
return spec.disabled || providersBackstage.isDisabled();
}
})
Amended code....
Disabling.config({
disabled: function () {
return spec.disabled || providersBackstage.isDisabled();
},
onDisabled: function (comp) {
memUrlPickerButton.getOpt(comp).each(Disabling.disable);
},
onEnabled: function (comp) {
memUrlPickerButton.getOpt(comp).each(Disabling.enable);
}
})
Haven't been able to figure out how to get those events to bubble up to the the overall control handlers but this seems to make things work as expected.
I want to show password by clicking help indicator in control sap.m.input.
As per code valueHelpRequest method must fired but not fired when clicking help indicator.
Its working fine for me. Share some code.
jsbin sample
js view code
createContent: function(oController) {
// button text is bound to Model, "press" action is bound to Controller's event handler
return new sap.m.Input({text:'{/actionName}',press:oController.doSomething,showSuggestion:true,showValueHelp:true,valueHelpRequest:oController.onVHR});
}
I got solution :
var oInput = this.getView().byId("idName"); oInput.attachValueHelpRequest(function(){
console.log("You click on value helper.")
});
Simple enough just can't get it to work and see no info within the docs. How to fire click event on button by code?
I have tried:
btn.fireEvent('click');
The button already has an event listener, I want it to run the code within the listener when the app is in a certain state.
you have to add EventListner to check whether click event is fired or not,see below code ,it fires without clicking the button. you can replace commented if condition with your condition on which you want to fire btn's click event
var win= Titanium.UI.createWindow({ backgroundColor:'white'});
win.open();
var btn= Titanium.UI.createButton({ title :' fire by code'});
btn.addEventListener('click',function(){
alert('Click event fired ');
});
win.add(btn);
//if(appState)
btn.fireEvent('click');
I would probably approach this a different way. You want an application to do the same thing if the button is clicked or if the app is already in a certain state.
function doThisThing(){
alert('This thing happened');
}
var win = Titanium.UI.createWindow({ backgroundColor:'white'});
win.open();
var btn = Titanium.UI.createButton({ title :' fire by code'});
btn.addEventListener('click',function(){
doThisThing();
});
// could also be defined as btn.addEventListener('click', doThisThing());
win.add(btn);
//if(appState)
doThisThing();
+1 to adnan for providing the code example to change around.
Assume button A in an HTML5 webapp built with jQuery Mobile.
If someone taps button A, we call foo(). Foo() should get called once even if the user double taps button A.
We tried using event.preventDefault(), but that didn't stop the second tap from invoking foo(). event.stopImmediatePropagation() might work, but it also stops other methods further up the stack and may not lead to clean code maintenance.
Other suggestions? Maintaining a tracking variable seems like an awfully ugly solution and is undesirable.
You can set a flag and check if it's OK to run the foo() function or unbind the event for the time you don't want the user to be able to use it and then re-bind the event handler after a delay (just a couple options).
Here's what I would do. I would use a timeout to exclude the subsequent events:
$(document).delegate('#my-page-id', 'pageinit', function () {
//setup a flag to determine if it's OK to run the event handler
var okFlag = true;
//bind event handler to the element in question for the `click` event
$('#my-button-id').bind('click', function () {
//check to see if the flag is set to `true`, do nothing if it's not
if (okFlag) {
//set the flag to `false` so the event handler will be disabled until the timeout resolves
okFlag = false;
//set a timeout to set the flag back to `true` which enables the event handler once again
//you can change the delay for the timeout to whatever you may need, note that units are in milliseconds
setTimeout(function () {
okFlag = true;
}, 300);
//and now, finally, run your original event handler
foo();
}
});
});
I've created a sample here http://jsfiddle.net/kiliman/kH924/
If you're using <a data-role="button"> type buttons, there is no 'disabled' status, but you can add the appropriate class to give it the disabled look.
In your event handler, check to see if the button has the ui-disabled class, and if so, you can return right away. If it doesn't, add the ui-disabled class, then call foo()
If you want to re-enable the button, simply remove the class.
$(function() {
$('#page').bind('pageinit', function(e, data) {
// initialize page
$('#dofoo').click(function() {
var $btn = $(this),
isDisabled = $btn.hasClass('ui-disabled');
if (isDisabled) {
e.preventDefault();
return;
}
$btn.addClass('ui-disabled');
foo();
});
});
function foo() {
alert('I did foo');
}
});
I am a new developer and am trying to create a jQTouch application to display some scrollable content throughout multiple pages. I've decided to use iscroll and it only works fine on the home page. I've read that I need to refresh iscroll after each page but I am completely lost on how to do this. Here is my script:
<script type="text/javascript">
var myScroll, myScroll2;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper1');
}, 100);
setTimeout(function () {
myScroll2 = new iScroll('wrapper2');
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
In my html I have a div id="wrapper1" which works fine until I navigate to the second page where the div id="wrapper2" has the rubber band effect.
In case you haven't figured this out yet (although I'm sure you have), you want:
myScroll.refresh()
or
myScroll2.refresh()
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}