I have a custom javascript that autofills a CharField when I check a checkbox but when I click "Save" the text from the CharField doesn't save to the database, it's empty. How can I fix this?
window.addEventListener("load", function () {
(function () {
django.jQuery(document).ready(function () {
console.log(django.jQuery('#id_main_product'))
django.jQuery('#id_main_product').change(function () {
if (this.checked) {
django.jQuery('#id_name').val(django.jQuery('#id_category :selected').text())
django.jQuery('#id_name').prop("disabled", true)
}
else {
console.log('unchecked')
}
})
})
})(django.jQuery);
});
I need to know when my modal has been closed. There doesn't seem to be an explicit way to do this in the same vein as ionViewDidLeave or something like that. I tried ionViewDidLeave and have a feeling it didn't work for the modal close because I haven't moved to that page using the navController, I'm showing the page using a modal.
home.ts
/*show modal with post form on add event page */
postEvent(){
let modal = this.modalCtrl.create(AddEvent);
modal.present();
}
AddEvent.TS
/* Close modal and go back to feed */
close(){
this.viewCtrl.dismiss();
//I need to change a value on the home page when this dismiss happens.
}
You Just need to listen to the modal close event in your home.ts
// listen for close event after opening the modal
postEvent(){
let modal = this.modalCtrl.create(AddEvent);
modal.onDidDismiss(() => {
// Call the method to do whatever in your home.ts
console.log('Modal closed');
});
modal.present();
}
`
This question is asked before Ionic 4 was released, but I think this is relevant these days. The Ionic 4 version:
home.ts
async postEvent() {
const modal = await this.modalCtrl.create({
component: AddEvent
});
modal.onDidDismiss().then(data => {
console.log('dismissed', data);
});
return await modal.present();
}
add-event.ts
constructor(public modalCtrl: ModalController) {}
close() {
this.modalCtrl.dismiss({
dismissvalue: value
});
}
And don't forget to include the AddEventModule in HomeModule:
home.component.ts
#NgModule({
declarations: [
...
],
imports: [
IonicModule,
CommonModule,
AddEventModule
],
exports: [
...
]
})
You would just do
// home.ts
// -------
postEvent() {
let modal = this.modalCtrl.create(AddEvent);
modal.onDidDismiss(data => {
// Do stuff with the data you closed the modal out with
// or do whatever else you need to.
});
modal.present();
}
You can find this in the docs.
Every thing work fine in this function, but this.nav.popToRoot() doesn't work in that location.
If I move it to the beginning of the function it works correctly.
Doesn't any one has a logical explanation for this.
Thank you in advance for your time and consideration.
Here is the code in a booking.ts component:
book(){
let newReservation = {
_id: this.room._id,
from: this.details.from.substring(0,10),
to: this.details.to.substring(0,10)
}
let loading = this.loadingCtrl.create({
content: "Booking room..."
});
loading.present();
this.roomsService.reserveRoom(newReservation).then((res) => {
loading.dismiss();
console.log("Room reserved successfully ... ");
this.nav.popToRoot();
}, (err) => {
console.log(err);
});
}
It happens the same to me, but i managed to replace the whole history stack, in my case after a certain point i don't need to keep the history stack, this is how i did it:
this.navCtrl.setPages([
{ page: RootPageHere }
]);
Works inside of a promise then function.
Hi I am trying to do things with emberjs and google maps.
The issue with google autocomplete api is if user enters text in location search but does not select any value from dropdown suggestion in textbox the first suggestion is not selected. I found a good solution for it on stack overflow solutiion in jquery only
I am trying to do it in ember.
App.AutocompleteAddressView = Ember.TextField.extend({
tagName: 'input',
autocomplete: null,
didInsertElement: function () {
this._super();
var options = {
componentRestrictions: {
country: "xx"
}
};
this.set('autocomplete', new google.maps.places.Autocomplete(this.$()[0], options));
//var autocomplete = new google.maps.places.Autocomplete(this.$()[0], options);
},
keyDown: function (e) {
var that = this;
var suggestion_selected = $(".pac-item.pac-selected").length > 0;
if (e.keyCode === 13 && !suggestion_selected) {
//key down arrow simulations
var event = Ember.$.Event('keypress', {
keyCode: 40
});
Ember.run(this.$("#searchTextField"), 'trigger', event);
console.log('loggin autocomplete');
console.log(this.get('autocomplete'));
//adding google map event and then triggering it
google.maps.event.addListener(this.get('autocomplete'), 'place_changed', function () {
var place = that.get('autocomplete').getPlace();
that.set('autocomplete_result', place)
console.log('google event was triggered');
console.log(that.get('autocomplete_result'));
});
google.maps.event.trigger(this.get('autocomplete'), 'place_changed');
}
}
});
Now I need to do simulation part. I guess ember testing has somthing that simulates keypress but I cannot used it.
If I use the solution from the link I mentioned things work fine first time but on clicking browser back navigation it does not work.
The solution I tried in code not working
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>