I'm trying to replace instances of jsTree with Foundation's drilldown menu as it has better benefits, but in some places I'm utilizing jsTree's lazy loading however there's no option for this in Foundation. Is there any way of doing this, or does anybody know if it's been done before?
I had the initial parent-level list populating, but the drilldown functionality wasn't being applied after calling Foundation.Drilldown(), and I haven't been able to figure out the next-level items yet.
$(function(){
var tree = $("ul#tree_id");
$.getJSON("/url/",function(data){
console.log(data);
if(data){
$.each(data,function(key,value){
var node = document.createElement("li");
$(node).html(value.text);
tree.prepend($(node))
});
}
var elem = new Foundation.Drilldown(tree);
});
});
Thanks.
Related
Currently on this site the off canvas menu is always visible for mobile and small desktop screens... Can anyone tell me what I am doing wrong?
The site is built using the Joints WP theme based upon the Zurb Foundation framework.
Thanks in advance,
Adam
You have the error in the console:
Uncaught TypeError: $ is not a function
That suggests you have a jQuery problem and Foundation uses jQuery to hide the (not relevant) portion of the navigation on small / large screens.
I'm going to guess that if you change this:
$(document).ready(function() {
var temp = "";
$(':input').click(function() {
temp = $(this).attr('placeholder');
$(this).attr('placeholder','');
$(this).blur(function() {
$(this).attr('placeholder',temp);
});
});
});
To this:
jQuery(document).ready(function() {
var temp = "";
jQuery(':input').click(function() {
temp = jQuery(this).attr('placeholder');
jQuery(this).attr('placeholder','');
jQuery(this).blur(function() {
jQuery(this).attr('placeholder',temp);
});
});
});
In script.js
Things may work (though I have not checked the voracity of the code).
Have a look at http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ for more information on how jQuery can run into conflicts.
I see this question is being ask all over again still don't find solution that works for such a trivial task.
This url displays a list of navigations tabs for workspaces.
http://localhost:4200/users/1/workspaces
Each of tab resolves to
http://localhost:4200/users/1/workspaces/:wid
Also on the I have a button that suppose to create a new workspace as well as new tab.
Here how controller for looks:
export default Ember.Controller.extend({
actions: {
newWorkspace: function () {
this.get('currentModel').reload();
var self = this;
var onFail = function() {
// deal with the failure here
};
var onSuccess = function(workspace) {
self.transitionToRoute('dashboard.workspaces.workspace', workspace.id);
};
this.store.createRecord('workspace', {
title: 'Rails is Omakase'
}).save().then(onSuccess, onFail);
}
}
});
When I click on button I see in ember inspector new record indeed created as well as url redirected to id that represents newly created workspace.
My question is how to force model/template to reload. I have already killed 5h trying model.reload() etc. Everything seem not supported no longer. Please please help.
UPDATE
When adding onSuccess
model.pushObject(post);
throws Uncaught TypeError: internalModel.getRecord is not a function
I believe you should call this.store.find('workspace', workspace.id) for Ember Data 1.12.x or earlier. For 1.13 and 2.0 there are more complicated hooks that determine whether or not the browser should query the server again or use a cached value; in that case, call this.store.findRecord('workspace', workspace.id, { reload: true }).
I do not know if this help. I had a similar problem. My action was performed in the route. Refresh function took care of everything.
I am working on an Ember.js - based platform, where I use nicEdit. Here is my code
RichHTMLView = Ember.TextArea.extend({
id: null,
editor: null,
didInsertElement: function(){
var view = this;
view.id = this.get("elementId");
view.editor = new nicEditor({
buttonList : ['bold','italic','underline','right','center','justify', 'link', 'ul', 'ol']
}).panelInstance(view.id);
//When the editor looses focus the content of the editor is passed to descr
view.editor.addEvent('blur',function(){
view.get('controller').set('descr',view.getViewContent());
});
//So the editor looks nice
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');
},
getViewContent: function(){
var view = this,
inlineEditor = view.editor.instanceById(view.id);
return inlineEditor.getContent();
},
willClearRender: function(){
var view = this;
}
});
So this works nicely as long as I am on the page which hosts the view, but if I transition to another route, the view has some leftovers, namely the editor is destroyed, but I assume that nicEdit keeps track of event bindings, so I end up with the blur event being bound to editor, which is undefined in the new context, as the view does not exist.
My best guess is that I need to somehow unbind the editor in the willClearRender, but I don't know how.
as I got no reply and nicEdit is abandoned I made some changes to the source-code in order to deal with this issue by adding removeEvent to bkEvent:
removeEvent: function(A, B){
if (B){
this.eventList = this.eventList || {};
this.eventList[A] = this.eventList[A] || [];
this.eventList[A].splice(this.eventList[A].indexOf(B),1);
}
Then I can remove the event in willClearRender:
view.editor.removeEvent('blur',view.onBlur);
Be aware that I've not tested it with multiple editors, as my needs do not require, but if you have multiple editors with the same callback the behavior is not defined.
On the Ember MVC TodoApp there is an option "Clear all Completed".
I've been trying to do a simple "Clear All".
I've tried multiple things, none of them work as I expected (clearing the data, the local storage and refreshing the UI).
The ones that comes with the sample is this code below:
clearCompleted: function () {
this.filterProperty(
'completed', true
).forEach(this.removeObject, this);
},
My basic test, that I expected to work was this one:
clearAll: function () {
this.forEach(this.removeObject, this);
},
Though, it's leaving some items behind.
If I click the button that calls this function in the Entries controller a couple times the list ends up being empty. I have no clue what's going on! And don't want to do a 'workaround'.
The clearCompleted works perfectly by the way.
The answer depends on what you really want to know-- if you want to clear an ArrayProxy, as per the question title, you just call clear() on the ArrayProxy instance e.g.:
var stuff = ['apple', 'orange', 'banana'];
var ap = Ember.ArrayProxy.create({ content: Ember.A(stuff) });
ap.get('length'); // => 3
ap.clear();
ap.get('length'); // => 0
This way you're not touching the content property directly and any observers are notified (you'll notice on the TodoMVC example that the screen updates if you type Todos.router.entriesController.clear() in the console).
If you're specifically asking about the TodoMVC Ember example you're at the mercy of the quick and dirty "Store" implementation... if you did as above you'll see when you refresh the page the item's return since there is no binding or observing being done between the entry "controller" and the Store (kinda dumb since it's one of Ember's strengths but meh whatev)
Anywho... a "clearAll" method on the entriesController like you were looking for can be done like this:
clearAll: function() {
this.clear();
this.store.findAll().forEach(this.removeObject, this);
}
Well, this worked:
clearAll: function () {
for (var i = this.content.length - 1; i >= 0; i--) {
this.removeObject(this.content[i]);
}
},
If someone can confirm if it's the right way to do it that would be great!
What I am trying to do is have a "load more" button at the bottom of a ajax populated list. I have got all the code working with a docked button, but I would now like to have it at the bottom.
What is happening is when the listView card is show I see my list but the list won't scroll. It pulls up and down a little but just won't have it. I have tried adding different configurations and layouts to listView with no different.
What I have done is the following
var moreButton = new Ext.Button({
text: 'Load more...',
ui: 'round',
handler: function() {//Do the loading - this works}
});
//In my list config I have a docked top bar for going "back" other than that pretty standard
var list = new Ext.List(Ext.apply(listConfig, {
fullscreen: false
}));
//This is my view for what I am trying to do
var listView = new Ext.Container({
items:[list, moreButton]
});
listView is then added to an other container as it is populated from a search box, it is show with setCard when I get a valid response from the server.
[sencha person] are you on 0.98? I think we had a regression in our scroller. Might want to downgrade back to 0.97