Anything special required to get jGestures working with Backbone.js? - backbone.js

I am attempting to get jGestures working with a Backbone.js application without much luck.
I am including my scripts at the bottom of the page body.
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jgestures.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="backbone.localStorage.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/app_root.js"></script>
<script type="text/javascript" src="src/app_beverage.js"></script>
<script type="text/javascript" src="src/app_order.js"></script>
<script type="text/javascript" src="src/app_people.js"></script>
<script type="text/javascript" src="src/app_router.js"></script>
And attaching the gesture handler like so.
events: {
"tapone .test": "something"
}
I know the event handler is attached correctly because I can trigger it manually via the console (on desktop, not a mobile device).
$(".test").trigger("tapone");
But running the code in iOS 5 it looks like the jGestures code is not generating the touch events. Is there someone else I need to do to trigger these touch events? I am using the Backbone router so maybe I need to init the library again after updating the DOM?

Backbone.View.events delegates directly over jQuery.bind and jQuery.delegate, look in the Backbone.View.delegateEvents' code.
So if your event binding definition can work like this:
$(<your View.el DOM element>).delegate(selector, eventName, method);
Then it should work with Backbone.
For example in your case you can try:
$(<your View.el DOM element>).delegate( ".test", "tapone", function(){ console.log( "hi! tapone" ); } );
Try to define the event binding directly in jQuery and see if doing it this way the event is triggered when expected, if it doesn't then the problem is out of Backbone, if it does then the problem should be in your implementation. I think in neither case the problem will be in Backbone itself.

Related

Using Alasql in AngularJS Factory

So I am making an AngularJS project and want to put my alasql functionality within a factory that I will inject into my controllers. However, I am getting a console error stating that alasql is not defined in my factory. Here is my code for some files:
// sqlFactory.js
angular.module('app').factory('sqlFactory', sqlFactory);
function sqlFactory() {
alasql("CREATE localStorage DATABASE IF NOT EXISTS db");
alaqsl("ATTACH localStorage DATABASE db");
alaqsl("USE db");
.......
}
I think I am handling the injection into the controller correctly:
// myController.js
angular.module("app").controller("myController", myController);
myController.$inject = ['sqlFactory'];
function myController(sqlFactory) {
....
}
And I am referencing the alasql file in my layout page, although maybe not in the correct order? :
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.3/alasql-worker.min.js"></script>
<script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="~/js/app.js"></script>
<script type="text/javascript" src="~/js/sqlFactory.js"></script>
<script type="text/javascript" src="~/js/site.js"></script>
I am fairly new to using factories and alasql. Anyone know why it is coming back as undefined? Do I need to inject alasql into my factory?

Angular hybrid app, typeerror calendar.fullcalendar is not a function

I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.

Blank page after injecting ui.bootstrap without errors

After injecting ui.bootstrap into my module the application is loading a blank page without throwing any errors.
If i remove the injection that page loads fine.
angular.module('app',['ui.bootstrap'])
I have all the necessary includes
<script type="text/javascript" src="/ev2/lib/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/ev2/lib/bower_components/angular-animate/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

Angular Material Dialog action buttons appear on the top (and not on the bottom)

relevant code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"
And,
$mdDialog.show(
$mdDialog.alert()
.clickOutsideToClose(true)
.title('Please Login')
.textContent('Please use facebook to login to Afsheen before making a purchase.')
.ok('Got it!')
.targetEvent(event)
);
Any idea whats going on ?
You are using both bootstrap and material css together, which is causing the issue, Check the material versions are same,
Here is the working App

Angularjs app improvement

Hi all i am working on angularJS app. Everything is fine but I have only one issue. I have to link and load(as dependency) in my app. That's why i have this kind of code
<script src="shared.js"></script>
<script src="user.js"></script>
<script src="home.js"></script>
<script src="product.js"></script>
<script src="comment.js"></script>
<script src="address.js"></script>
<script src="cities.js"></script>
<script src="phone.js"></script>
<script src="review.js"></script>
<script src="configs.js"></script>
<script src="app.js"></script>
And In app.js i have these app dependies
'mainApp.shareModule',
'mainApp.userModule',
'mainApp.homeModule',
'mainApp.commentModule',
'mainApp.addressModule',
'mainApp.citiesModule',
'mainApp.phoneModule',
'mainApp.reviewModule',
'mainApp.productModule'
Is there any solution like (lazy loading) but my understanding is about lazy loading is then i have to design all modules independent.
Thank you.

Resources