Using JQuery and Mobiscroll

Hello there.

I want to use Mobiscroll in my hybrid app. I built a directive to use it. The problem is, if I insert the jquery and the mobiscroll scripts before the ionic.bundle (beta 1) , the mobiscroller works, but the view animation (attribute directive “animation”) doesnt work. If I switch the script loading order the animation works but not the mobiscroller ( function call mobiscroll() “undefined is not a function”. Do you know what could be the problem ? Thanks in advance !

You’re going to be in a world of hurt if you try to integrate another scroll library into an Ionic app. Ionic manages scrolling via its own built-in mechanism. Anything you add is just going to cause all kinds of conflicts. I’d seriously advise against this.

1 Like

Hi, I recently had this “undefined is not a function” problem.
It’s because the mobiscroll function is added to the JQuery prototype function, but JQ>ite doesn’t have this function.
If you load the JQuery before angular(ionic), angular will use JQuery as JQLite, so that you can successfully call mobiscroll function.

I didn’t play with the view animation, so can’t help with that.

Mobiscroll should play well with Ionic. It is not a scroll library in the sense of a custom page scroller implementation.

Could you please share a codepen of its implementation with any element like the mobiscroll time picker , etc

Only if you can provide Mobiscroll example. Don’t forget, they’re not cheap.

I have 2-year-old Mobiscroll time picker, from the time when this plugin was free, but it’s not working with Ionic. So we need a newer version to play with.

Have you tried Mobiscroll trial version?

Is mobiscroll paid ? but i found it in github https://github.com/acidb/mobiscroll. And i am trying to follow this http://blog.mobiscroll.com/how-to-integrate-your-ui-widgets-with-angularjs/#usage-examples to intrgrate only problem with this js is that when is put the dependency ‘mobiscroll’ in my angular.module the app fails to instantiate

It’s a premium set of plugins.

You can buy a single plugin, but it will cost you 125 Eur per component.

Or 445 Eur for everything.

http://mobiscroll.com/pricing

Though they offer a 15 day trial.

thanks for the info @Gajoretes but is there any other alternative to this ? i just want the user to have the same experience using the select option in android as he gets in ios with the scroll and also provide the date time option in similar manner

Try taking a look at these Ionic plugins: http://www.gajotres.net/must-have-plugins-for-ionic-framework/

There’s you’ll find plugins for Date and Time.

Or if you want to have real native feel you can use native iOS and Android time and date pickers with this Cordova plugin: http://ngcordova.com/docs/plugins/datePicker/

Can you please explain then whats https://github.com/acidb/mobiscroll all about and how is it different from the plugin js files that mobiscroll will present to me when i pay for it

What you see on that Github link is just a Mobiscroll core engine you can use to create your own scroller, nothing else, at least nothing production useful.

I have hit a wall it seems with mobiscroll , now it says Failed to instantiate module mobiscroll. I have included the whole mobiscroll js and css files in my index.html still it says mobiscroll is not available. Can you please share in what order is it suppose to exists i mean jquery , ionic , angular , mobiscroll this is my current order

I already told you, you can’t use files found on Mobiscroll GitHub.

Mobiscroll requires only 2-3 files, depending on platform. I can show you what it used to look: http://jsfiddle.net/Gajotres/WDjfR/

But that was a long time ago