Is there a way to destroy the joyride provided by Zurb Foundation problematically. I am trying to destroy the joyride like this
$('#joyride-list-location-creation').joyride('destroy');
But I am getting this error
Uncaught TypeError: $(...).joyride is not a function(…)
I'm using version 2.1 of joyride.
There is a 'destroy' function in the source code
For my usage, I needed to destroy it when it closed, so I added a call to destroy in the postRideCallback.
Like this:
$('#incompleteJoyRide').joyride({
autoStart : true,
postRideCallback: function () {
$('#incompleteJoyRide').joyride('destroy');
},
modal:true,
expose: true,
animate: true
});
Related
I'm having trouble unloading data models and having them properly re-populate when API calls are made.
The models:
/* Model Foo */
export default DS.Model.extend({
bars: DS.hasMany('bar', { async: true })
});
/* Model Bar */
export default DS.Model.extend({
foo: DS.belongsTo('foo', { async: true, inverse: 'bars' })
});
At a point in the app, both foo and bar are unloaded from ember data store and then reloaded from an API call. Like so:
/* Unload and reload snippet */
this.store.unloadAll('bar');
this.store.unloadAll('foo');
let bars = this.store.filter('bar', {
queryParam: x
}, function(bar) {
return x === bar.x
});
let foos = this.store.filter('foo', {
queryParam: y
}, function(foo) {
return y === bar.y
});
let self = this;
Ember.RSVP.all([foos, bars]).finally(function() {
self.controller.set('model.foos', foos);
self.controller.set('model.bars', bars);
});
The problem arises in a computed property that is dependent on these model changes.
/* Computed property elsewhere in app */
compProp: Ember.computed('foo.bars.[]', function() {
let tmp = this.get('foo.bars'); /* <-- Error generating line */
.
.
.
})
This line gives me the following error:
Assertion Failed: calling set on destroyed object: <DS.PromiseManyArray:ember1995>.content = <DS.ManyArray:ember3320>
Stack trace from error:
Assertion Failed: calling set on destroyed object: <DS.PromiseManyArray:ember1014>.content = <DS.ManyArray:ember1348>
Error
at assert (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:23072:13)
at Object.assert (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:23285:34)
at Object.set (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39281:17)
at Class.set (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:52151:26)
at ManyRelationship._updateLoadingPromise (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152522:33)
at ManyRelationship.getRecords (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152723:21)
at Class.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152101:60)
at ComputedPropertyPrototype.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:34367:28)
at get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39184:19)
at _getPath (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39205:13)
at Object.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39180:14)
Thanks for any help!
Side notes:
I'm aware store.filter() is deprecated. I'm upgrading the app from an earlier Ember version and using ember-data-filter addon for temporary compatibility.
This was working on Ember 1.13.
Update
In the interest of not leaving this question open ended, I was never able to find the problem.
The solution for me was removing all unloadAll() calls and managing records individually as needed.
This could be caused by any async set that occurs on an element that's been destroyed by ember. As such it can be tricky to track down. I usually turn on "pause on caught exceptions" in the chrome developer console to find the set that caused the issue.
This plugin: media-with-compression worked well a few days ago, but now I'm getting this when I try to record: EXCEPTION: Uncaught (in promise): TypeError: window.Media is not a constructor
I already have declared:
declare var window: any;
declare var Media: any;
And I was using it this way:
this.audioFile = new window.Media(this.audioDirectory + this.audioName,
.....
I don't know if its because a new version of #ionic-native, or what happened, but I didn't touch this code for weeks and now its not working.
Any clue if with the new versions of #ionic-native, non native plugins are working different?
Thank you!
You cannot run this on the browser.You have to run this on the Actual device.
Here you can see that how to set the path.iOS Media Plugin
The trick on iOS AND Android is to use .toInternalURL() instead of
.toURL() on the file object. This code will work perfectly on both
platforms:
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0,
function(fileSystem) {
fileSystem.root.getDirectory('app-data/main-packages/en/', {create: false}, function(sourceDir){
sourceDir.getFile('2.mp3', {create: false}, function(file){
console.log('file url: ', file.toInternalURL());
var mymedia = new Media(file.toInternalURL());
mymedia.play();
});
});
},
function(err){
console.log('Error in requestFilesystem, err.code', err.code);
}
);
I'm trying to put together what I think is a pretty straightforward ember delete action (based on this example: http://discuss.emberjs.com/t/migrating-from-ember-data-0-13-to-1-0-0-beta-1-my-findings/2368) from an Index Controller and I think I must be missing something.
actions: {
deleteZone: function (zone) {
if (confirm("Are you sure you want to delete the zone?")) {
var _this = this;
zone.deleteRecord();
zone.save().then(
function () {
_this.transitionToRoute('zones.index');
},
function (error) {
zone.rollback();
}
);
}
}
}
I'm running into trouble when I try to delete a zone that has a corresponding dependency. In this case, the server (Rails 4) throws an exception and returns the following JSON:
{"status":422,"message":"Cannot delete record because of dependent projects","errors":{}}
However, while I believe the server returns the correct error, the UI seems to fail before it gets that far. If I put a debugger on the line after zone.rollback() inside the catch function I get this error:
Attempted to handle event `becameInvalid` on <App.Zone:ember1276:6> while in state root.deleted.inFlight. Called with {}.
I'm running on ember 1.4.0-beta.1, ember-data 1.0.0-beta.4 (ActiveModelAdapter) and rails 4.0.1. Any suggestions would be much appreciated, thanks!
Manually transitioning to a loaded.saved state after the rollback seems to resolve the issue:
zone.transitionTo('loaded.saved');
After upgrading to the latest ember/ember-data and slightly modifying the JSON response I'm now able to extract the error message out of the JSON using the error reference passed in to the catch expression.
{"status":422,"message":"translation missing: en.Invalid zone","errors":{"base":["Cannot delete record because dependent projects exist"]}}
And ember versions:
DEBUG: Ember : 1.4.0-beta.1+canary.4d69bca7 ember.js?body=1:3307
DEBUG: Ember Data : 1.0.0-beta.5+canary.2e773365 ember.js?body=1:3307
DEBUG: Handlebars : 1.0.0 ember.js?body=1:3307
DEBUG: jQuery : 1.10.2
I ran into to this issue as well. Running model.transitionTo('loaded.saved'); helped to vaoid any errors thrown, but the model is destroyed as well.
If one wants to keep the model in the store, one must re-inject it, which seems odd, but works:
var model = this.get('model');
var store = model.store;
model.deleteRecord();
model.save().catch(function(err){
model.transitionTo('loaded.saved');
var payload = model.serialize({includeId: true});
store.unloadRecord(model)
store.pushPayload('nestedSet',{nested_set:payload});
});
I am running:
DEBUG: -------------------------------
DEBUG: Ember : 1.8.0-beta.1+canary.d6d4f01d
DEBUG: Ember Data : 1.0.0-beta.9
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.11.1
DEBUG: -------------------------------
For version testing completeness same happens on ember-data#1.0.0-beta.7!
Hope it helps, if anyone runs into this too.
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.
I am trying to inject another component into an element that is rendered by the template of another Coomponent..but in the afterrender event, the template is yet to be rendered so the call to Ext.get(el-id) returns null: TypeError el is null.
tpl:
new Ext.XTemplate(
'<tpl for=".">',
'<ul>',
'<li class="lang" id="cultureSelector-li"></li>',
'</ul>',
'</tpl>'
),
listeners: {
afterrender: {
fn: function (cmp) {
console.log(Ext.get('cultureSelector-li')); // < null :[
Ext.create('CultureSelector', {
renderTo: 'cultureSelector-li'
});
}
}
},
So when can I add this component so that the element is targeting has been created in the DOM?
I think it depends on the component that you are working with. For example, the Data Grid View has a "viewready" event that would suite your needs, and depending what you are attempting, the "boxready" function could work for combo box (only the first render though). Other than that, you can either go up through the element's parent classes searching for the XTemplate render function being called (might be in the layout manager) and extend it to fire an event there, or risk a race condition and just do it in a setTimeout() call with a reasonable delay.
I ended up having to do the work myself. So, I now have the template as a property called theTpl, and then rendered it in beforerender, and then i was able to get a handle on the element in afterrender. This seems wholly counter-intuitive, does anyone have any insight?
beforeRender: {
fn: function (me) {
me.update(me.theTpl.apply({}));
}
},
edit in fact I just extended Component thus:
Ext.define('Ext.ux.TemplatedComponent', {
extend: 'Ext.Component',
alias: 'widget.templatedComponent',
template: undefined,
beforeRender: function () {
var me = this;
var template = new Ext.XTemplate(me.template || '');
me.update(template.apply(me.data || {}));
me.callParent();
}
})
...template accepts an array of html fragments
Turns out I was using the wrong things - apparently we should be using the render* configs for this type of thing (so what are thetpl & data configs for?)
Here's a working fiddle provided for me from the sencha forums:
http://jsfiddle.net/qUudA/10/