How to execute a function when scroll bar reached bottom in VueJs - vuejs2

I'am trying to execute a method when scroll bar of the page reached bottom of the page but console is giving an error of
Uncaught TypeError: this.fn is not a function
but when i simply try alert() fn it works fine
this is the code i'm trying with
Js Fiddle

Related

I have a TypeError warning but the app works fine

Suddenly I started getting the following TypeError warning from Vue but my app works fine
[Vue warn]: Error in render: "TypeError: Cannot read property 'Name' of null"
This is coming from a data property named 'dashboard' that is loaded via AJAX call after user selects an item from a drop down. In debugging I have been able to simplify the code to get the warning and learned how to not get the warning.
This line will give me the warning but works fine
Dashboard: {{dashboard.Name}}
This line will display the entire dashboard object with no warning
Dashboard: {{ dashboard}}
This line works fine as well with no warning
Dashboard: {{ dashboard == null ? "Null" :dashboard.Name}}
I'm doing my first project with Vue and have had this code in working just fine for a couple of weeks, with no warnings.
Why all of a sudden do I start seeing this warning?
Secondary question is how do you typically track down such warnings. The stack trace is all in Vue code and gives me no idea where the problem originates from in my code.
The Vue team explained this in an answer from their forums here. I'll repeat a shorter version below as it took awhile to get it into my thick head.
A TypeError will be emitted when Vue does its rendering and the state of the data is not yet complete, in my case data was not yet set by the async AJAX call. When the AJAX call does return the data reactivity kicks in and the render is done again and this time the data is in a valid state.
This explains why the below has a TypeError but renders just fine
Dashboard: {{dashboard.Name}}
The TypeError is because Vue is attempting to render null.Name on initial rendering, i.e. dashboard is initially set to null. After the AJAX call returns, dashboard is now set and Vue reactivity kicks in and second rendering works as expected.
This below does not emit the TypeError warning because accessing\rendering null
Dashboard: {{ dashboard}}
is valid with nothing to render so no TypeError, after the AJAX call returns reactivity causes a re-render which displays the data as expected.
Resolution, quoted from the mentioned post.
Generally speaking you would put a conditional render either around your component, or the data that may require that information with a v-if statement to trigger a truthy expression. As null is “false”. When ajax fills it in it becomes “truthy”

navigating to component twice giving error for setstate

I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.

sencha touch Cannot read property 'detach' of null comes up that is cause by setActiveItem

I am developing app with sencha touch but facing a problem when activating a tab on a tapPanel
I'm making a tab active by next statement:
tabpanel.setActiveItem('#idLogin');
Everything works fine and the tab is actually activated, but later on (so not directly after this statement) an error appears in the console.log. When removing this piece of code the error doesn't appear so I am sure it is related to this statement.
The error:
Uncaught TypeError: Cannot read property 'detach' of null
Does anybody has faced this issue and were you able to solve?
First, define "later on." Run your app using sencha-touch-all-debug.js to locate the statement throwing the error.
Second, look at the source. You'll see that 'detach' is sencha-speak for 'remove an element from the DOM:"
detach: function() {
var dom = this.dom;
if (dom && dom.parentNode && dom.tagName !== 'BODY') {
dom.parentNode.removeChild(dom);
}
return this;
},
This is invoked in just a few places: when removing an element directly, or when updating an inner wrapper as a result of view navigation or other view swapping.
In most cases, the affected element has animation applied to it, which implies that the error is a side effect of an attempt to remove an element that has already been animated out of scope. The solution, as hacky as it seems, is to get the layout of the parent container, suppress its animation, remove your element, then reapply animation, like this:
container.getLayout().setAnimation(false);
// item removal or view change here;
container.getLayout().setAnimation(true);
I was getting the same error when using a form field with name="id"

Wordpress revolution slider grey box errors

Revolution slider is not working on my Wordpress site. it works with other themes but not the one currently running.
I was told the site is throwing out these two errors which are stopping it from working
Uncaught TypeError: Cannot read property 'id' of undefined s3Slider.js?ver=1:23
Uncaught TypeError: Cannot read property 'opera' of undefined custom.js?ver=1:16
But am unsure of how to resolve these or get the error to stop so the slider works
Site url: http://henrysstuff.co.uk/ - Slider is the grey element at the top
You initialize the slider with the following code:
jQuery('#slider').s3Slider({
timeOut: 3000
});
But there is no element with the id of "slider" found in your markup. This most likely is causing your first error.
The second error is because $.browser was removed in jQuery 1.9, and the site is running 1.9.1. Code below from custom.js line 16.
if (!jQuery.browser.opera) {

Appcelerator Titanium, getting the current window and applying property not working

I'm trying to add a right nav button in iOS to a windows in Titanium.
The code is just the original "master/detail" starting template provided by Titanium and then in MasterView.js, I try to add a button to the navbar.
But it doesn't work like it was supposed to:
var addBtn = Ti.UI.createButton({
systemButton:Ti.UI.iPhone.SystemButton.ADD
});
//self.setRightNavButton(addBtn);
var win1 = Titanium.UI.currentWindow;
win1.setRightNavButton(addBtn);
This fails with the error:
[ERROR] : Script Error = 'undefined' is not an object (evaluating
'win1.setRightNavButton') at MasterView.js (line 14).
How can I add this button to the navbar then? I've seen some examples but they all rely in having the navbar declared in place. In this case that ain't possible since Titanium declared the navbar in the AplicationWindow.js specific to each platform and then calls the MasterView.js function and file where I'm supposed to define the navbar button.
Ti.UI.currentWindow only works if there is a window already open. The error you have is coming from the fact that when you create the MasterView, you have not yet opened up the window.
Look inside ApplicationWindow.js, you will see that you create the masterview before even opening the window.
If you want to set navbar items, either add them in the ApplicationWindow, app.js, or pass the window to the MasterView.
Ti.UI.currentWindow only works if a window is opened using the url parameter. In that case, the controller that is referenced by the url parameter will have the Ti.UI.currentWindow property set to the window.