In information section, I have a menu with a href to id, but they are not working. I don´t know the reason since it´s very simpl. In the menu:
PRECIOS
In the section:
<h2 id="terms-prices">PRECIOS</h2>
I´ve finally fixed it with jquery:
$(document).ready(function() {
$(window).load(function() {
$(function(){
$('a[href^=#]').click(function(e){
var id = $(this).attr('href').substr(1);
var pos = $('#' + id).offset().top - $('#nav').height() * 1.2;
$('body').animate({ scrollTop: pos });
e.preventDefault();
});
});
});
});
Related
My app has a page where I'm using the view to display the data from other template with my view like this :
<script type="text/x-handlebars" data-template-name="enquiry">
[...] // some other information display before
{{view App.EnquirySelectedVehicleView}}
</script>
<script type="text/x-handlebars" data-template-name="selectedVehicle">
// Here is my content
</script>
My map looks like this :
this.resource('enquiry', { path: '/enquiry/:enquiry_id'}, function() {
this.route('selectedVehicle');
});
After reading the doc I just did this in my view :
App.EnquirySelectedVehicleView = Ember.View.extend({
templateName: 'selectedVehicle'
});
So far so good, its showing the text from my template. But I need to return data from an ajax call in this template (selectedVehicle) automatically, like its fetching the data when you are on /enquiry/1/.
I've done this in my router :
App.EnquirySelectedVehicle = Ember.Object.extend({});
App.EnquirySelectedVehicleRoute = Ember.Route.extend({
model: function() {
console.log('DEBUG: SelectedVehicle Model');
App.SelectedVehicle.vehicleStock(this)
}
});
App.EnquirySelectedVehicle.reopenClass({
vehicleStock: function(that) {
console.log('DEBUG: Fetch vehicle stock');
// Here come the ajax call
}
});
But my issue is that route is never call.. How can I return some value from my selectedVehicleRoute when I'm on the /enquiry/1 page in a view template ? (not sure if I ask it correctly)
Thanks for the help !
[edit]
#Fanta : I think I begin to understand how I can do that :
App.EnquiryRoute = Ember.Route.extend({
beforeModel: function(transition) {
this.controllerFor('login').send('isSession', transition);
},
model: function(param) {
var promise = new Ember.RSVP.Promise(function(resolve, reject) {
var modelData = {enquiry: {}, vehicleStock: {}};
Ember.$
.get(host + '/enquiry/' + param['enquiry_id'], function(data) {
console.log('DEBUG: Enquriry GET OK id = ' + param['enquiry_id']);
modelData.enquiry = data.enquiry;
Ember.$.get(host + '/vehiclestock/' + data.enquiry.VehicleStockId, function(data) {
console.log('DEBUG: VehicleStock GET OK id = ' + data.enquiry.VehicleStockId)
console.log(data);
modelData.vehicleStock = data.vehicleStock;
resolve(modelData);
});
});
});
return promise;
}
});
It seems to work, now I have to figure it out how to display my Object :) but thank you for your help, that actually make me resolve it by a different way !
For future reference, just go to https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md and you'll see two links, one to JSFiddle and one to a JSBin with the basic setup.
Are you sure the route is not being called ? I created a Fiddle, http://jsfiddle.net/NQKvy/817/ if you check the JS console, you'll see in the log:
DEBUG: SelectedVehicle Model
DEBUG: Fetch vehicle stock
Just started using Ember.JS so I apologize if this at all a stupid question. I have this in my app.js file:
window.Todos = Em.Application.create();
Todos.Todo = Em.Object.extend({
title: null,
completed: false
});
Todos.todosController = Em.ArrayController.create({
content: [],
createTodo: function(title)
{
var todo = Todos.Todo.create({title: title});
this.pushObject(todo);
}
});
Todos.CreateTodoView = Em.TextField.extend({
insertNewLine: function()
{
alert('test');
var value = this.get('value');
if (value)
{
Todos.todosController.createTodo(value);
this.set('value', '');
}
}
});
Then this in my index.html file:
<script type="text/x-handlebars">
{{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
</script>
I believe insertNewLine is meant to be called when you press enter in the text box, am I right? The textbox renders fine but whenever I press enter it doesn't do anything.
It should be insertNewline. Note the lowercase l. With it works as expected. See this fiddle.
I need to create an Ember component to select a file.
My page will include multiple "upload component"
I have read a post trying to implement that: (https://stackoverflow.com/questions/9200000/file-upload-with-ember-data) BUT the UploadFileView is directly linked to the controller.
I would like to have something more generic...
I would like to remove the App.StoreCardController.set('logoFile'..) dependency from the view or pass the field (logoFile) from the template...
Any idea to improve this code ?
App.UploadFileView = Ember.TextField.extend({
type: 'file',
attributeBindings: ['name'],
change: function(evt) {
var self = this;
var input = evt.target;
if (input.files && input.files[0]) {
App.StoreCardController.set('logoFile', input.files[0]);
}
}
});
and the template:
{{view App.UploadFileView name="icon_image"}}
{{view App.UploadFileView name="logo_image"}}
I completed a full blown example to show this in action
https://github.com/toranb/ember-file-upload
Here is the basic handlebars template
<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo" contentBinding="content"}}
{{view PersonApp.UploadFileView name="other" contentBinding="content"}}
<a {{action submitFileUpload content target="parentView"}}>Save</a>
</script>
Here is the custom file view object
PersonApp.UploadFileView = Ember.TextField.extend({
type: 'file',
attributeBindings: ['name'],
change: function(evt) {
var self = this;
var input = evt.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
var that = this;
reader.onload = function(e) {
var fileToUpload = reader.result;
self.get('controller').set(self.get('name'), fileToUpload);
}
reader.readAsDataURL(input.files[0]);
}
}
});
Here is the controller
PersonApp.PersonController = Ember.ObjectController.extend({
content: null,
logo: null,
other: null
});
And finally here is the view w/ submit event
PersonApp.PersonView = Ember.View.extend({
templateName: 'person',
submitFileUpload: function(event) {
event.preventDefault();
var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: this.get('controller').get('logo'), other: this.get('controller').get('other') });
this.get('controller.target').get('store').commit();
}
});
This will drop 2 files on the file system if you spin up the django app
EDIT (2015.06): Just created a new solution based on a component.
This solution provides an upload button with a preview and remove icon.
P.S. The fa classes are Font Awesome
Component handlebars
<script type="text/x-handlebars" data-template-name='components/avatar-picker'>
{{#if content}}
<img src={{content}}/> <a {{action 'remove'}}><i class="fa fa-close"></i></a>
{{else}}
<i class="fa fa-picture-o"></i>
{{/if}}
{{input-image fdata=content}}
</script>
Component JavaScript
App.AvatarPickerComponent = Ember.Component.extend({
actions: {
remove: function() {
this.set("content", null);
}
}
});
App.InputImageComponent = Ember.TextField.extend({
type: 'file',
change: function (evt) {
var input = evt.target;
if (input.files && input.files[0]) {
var that = this;
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
that.set('fdata', data);
};
reader.readAsDataURL(input.files[0]);
}
}
});
Usage example
{{avatar-picker content=model.avatar}}
Old Answer
I took Chris Meyers example, and I made it small.
Template
{{#view Ember.View contentBinding="foto"}}
{{view App.FotoUp}}
{{view App.FotoPreview width="200" srcBinding="foto"}}
{{/view}}
JavaScript
App.FotoPreview= Ember.View.extend({
attributeBindings: ['src'],
tagName: 'img',
});
App.FotoUp= Ember.TextField.extend({
type: 'file',
change: function(evt) {
var input = evt.target;
if (input.files && input.files[0]) {
var that = this;
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
that.set('parentView.content', data);
}
reader.readAsDataURL(input.files[0]);
}
},
});
Marek Fajkus you cannot use JQuery's .serialize, it makes no mention of file uploads in the documentation at JQuery UI docs
However, you could use JQuery Upload Plugin
Actually it does mention it, it says:
". Data from file select elements is not serialized."
In case of uploading multiple files, you may want to use
{{input type='file' multiple='true' valueBinding='file'}}
^^^^
This is a solution that you would use in normal HTML upload.
Additionally, you can use 'valueBinding' which will allow you to set up an observer against that value in your component.
There are many POST indicating that once a user click on your Like button, it arises an event that you can catch like the next code:
window.fbAsyncInit = function() {
//Your app details here
FB.init({appId: '110981675649741', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('You just liked '+href);
});
FB.getLoginStatus(function(response) {
It seems that now, this do not work.
Does anyone know why? Did Facebook team change the way you get such event?
Use this code.
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function () {
FB.init({ appId: 'AppID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('edge.create', function (href, widget) {
// Do something, e.g. track the click on the "Like" button here
// alert('You just liked ' + href);
// alert('You just liked ' + widget);
window.location = "http://www.google.com";
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
//-->
</script>
It will work.
Thanks
I quite like the filter feature of django admin views (list_filter).
But, on views with a lot of fields, I would really like the ability to minimize/expand it with a click, to save screen real-estate and also because it sometimes actually hides stuff.
Is there an easy way to add a collapse button (some already existing plugin I haven't found or something similar)?
Given that you now have jQuery in django admin, it's easy to bind a slideToggle() to the titles in the List Filter.
This seems enough Javascript for it to work:
// Fancier version https://gist.github.com/985283
;(function($){ $(document).ready(function(){
$('#changelist-filter').children('h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
});
})(django.jQuery);
Then in the ModelAdmin subclass you want to activate that set the Media inner class:
class MyModelAdmin(admin.ModelAdmin):
list_filter = ['bla', 'bleh']
class Media:
js = ['js/list_filter_collapse.js']
Make sure to drop the list_filter_collapse.js file in a 'js' folder inside your STATIC_DIRS or STATIC_ROOT (Depending on your Django version)
I changed Jj's answer to collapse the whole filter when clicking on the 'filter' title, adding it here for completeness, a gist is available here:
(function($){
ListFilterCollapsePrototype = {
bindToggle: function(){
var that = this;
this.$filterTitle.click(function(){
that.$filterContent.slideToggle();
that.$list.toggleClass('filtered');
});
},
init: function(filterEl) {
this.$filterTitle = $(filterEl).children('h2');
this.$filterContent = $(filterEl).children('h3, ul');
$(this.$filterTitle).css('cursor', 'pointer');
this.$list = $('#changelist');
this.bindToggle();
}
}
function ListFilterCollapse(filterEl) {
this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;
$(document).ready(function(){
$('#changelist-filter').each(function(){
var collapser = new ListFilterCollapse(this);
});
});
})(django.jQuery);
I have written a small snippets downloadable on bitbucket for the purpose.
The state of the filters are stored in a cookie and the selected filters stay visible.
Thanks to #JJ's idea.
I added toggles for the whole window, simpler than #abyx's implement.
Toggle the whole filter by clicking "Filter" title
Toggle each list by clicking list title
This is the js file content:
;(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter > ul').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
Made another change to this so that the H3's are hidden, as well as the filter lists, when you click on the top H2. This will get the entire list of filters out of the way if you click on the top "Filters".
This is the js file content
;(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter').find('> ul, > h3').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
Modified fanlix solution to:
Show cursor as pointer on hover
Be folded by default
Code
(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.next().toggle();
$title.css("cursor","pointer");
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = false;
$('#changelist-filter > h2').css("cursor","pointer");
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter > ul').each(function(){
$(this).slideToggle(toggle_flag);
});
});
});
})(django.jQuery);
Combined Tim's and maGo's approaches, with some tweaks:
Pros:
Allows user to hide the entire list (added "click to hide/unhide" to the filter list title so user knows what to do).
Maintains folded filter categories by default
Cons:
The page refresh after a filter is selected causes the filter categories to fold once again; ideally the ones you're working with would stay open.
The code:
(function($){ $(document).ready(function(){
// Start with a filter list showing only its h3 subtitles; clicking on any
// displays that filter's content; clicking again collapses the list:
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.next().toggle();
$title.css("cursor","pointer");
$title.click(function(){
$title.next().slideToggle();
});
});
// Add help after title:
$('#changelist-filter > h2').append("<span style='font-size: 80%; color: grey;'> (click to hide/unhide)</span>");
// Make title clickable to hide entire filter:
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter').find('> h3').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
I wrote a snippets for menu collapse and single element menu collapse.
It's a fork from abyx code, I've just extended it.
If a filter was previously activated the element menu related to this will start as opened.
The filter menu starts closed as default.
Hope this helps
https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets
Giuseppe De Marco's snippet works best. So i am adding his code snippet here for easy access. It even solves the problem (Cons) discussed above by joelg:
// Copied from
// https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets
(function($){
var element_2_collapse = '#changelist-filter';
var element_head = 'h2'
var filter_title = 'h3'
// this is needed for full table resize after filter menu collapse
var change_list = '#changelist'
ListFilterCollapsePrototype = {
bindToggle: function(){
var that = this;
this.$filterTitle.click(function(){
// check if some ul is collapsed
// open it before slidetoggle all together
$(element_2_collapse).children('ul').each(function(){
if($(this).is(":hidden"))
{
$(this).slideToggle();
}
})
// and now slidetoggle all
that.$filterContentTitle.slideToggle();
that.$filterContentElements.slideToggle();
that.$list.toggleClass('filtered');
});
},
init: function(filterEl) {
this.$filterTitle = $(filterEl).children(element_head);
this.$filterContentTitle = $(filterEl).children(filter_title);
this.$filterContentElements = $(filterEl).children('ul');
$(this.$filterTitle).css('cursor', 'pointer');
this.$list = $(change_list );
// header collapse
this.bindToggle();
// collapsable childrens
$(element_2_collapse).children(filter_title).each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
$title.css('border-bottom', '1px solid grey');
$title.css('padding-bottom', '5px');
$title.css('cursor', 'pointer');
});
}
}
function ListFilterCollapse(filterEl) {
this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;
$(document).ready(function(){
$(element_2_collapse).each(function(){
var collapser = new ListFilterCollapse(this);
});
// close them by default
$(element_2_collapse+' '+element_head).click()
// if some filter was clicked it will be visible for first run only
// selezione diverse da Default
$(element_2_collapse).children(filter_title).each(function(){
lis = $(this).next().children('li')
lis.each(function(cnt) {
if (cnt > 0)
{
if ($(this).hasClass('selected')) {
$(this).parent().slideDown();
$(this).parent().prev().slideDown();
// if some filters is active every filters title (h3)
// should be visible
$(element_2_collapse).children(filter_title).each(function(){
$(this).slideDown();
})
$(change_list).toggleClass('filtered');
}
}
})
});
});
})(django.jQuery);
Django 4.x, here is how I do.
create admin template as below
{% extends "admin/change_list.html" %} {% block extrastyle %}
{{ block.super }}
function toggle_filter() {
$("#changelist-filter").toggle("slow");
};
$(document).ready(function(){
// close them by default
$("#changelist-filter").toggle("fast");
}); {% endblock %}
enhance admin/base_site.html to add button
<button onclick="toggle_filter()" class="btn btn-warning btn-sm" type="submit">Toggle Filter</button>