So I am using django-wysiwyg-redactor==0.4.9 and Django==1.9.
The issue described here.
I tried a trick in comments, but that didn't help.
Also in browser's console I run this code directly to needed textarea:
$('#id_outboundprogram_set-2-text').trigger('redactor:init');
But anyway there are no redactor on it.
Textarea element looks like this before and after running above code:
<textarea class=" redactor-box" cols="40" data-redactor-options="{"lang": "en", "fileUpload": "/en/redactor/upload/file/", "imageUpload": "/en/redactor/upload/image/", "plugins": ["table", "video"]} id="id_outboundprogram_set-2-text" name="outboundprogram_set-2-text" rows="10"></textarea>
Strange thing is that this code, that I found in jquery.redactor.init.js from package files is not working:
// Initialize Redactor on admin's dynamically-added inline
// formsets.
//
// Credit to the approach taken in django-selectable:
// https://github.com/mlavin/django-selectable
$(document).on('click', '.add-row', function () {
$(this).parents('.inline-related')
.find('tr.form-row:not(.empty-form)').last()
.find('textarea.redactor-box')
.trigger('redactor:init');
});
Any ideas?
UPD:
Well, I still don't know why it happpens, but I solved this problem by including redactor.js file from package files and adding a little changes to above script:
<script type="text/javascript" src="{% static 'js/admin/redactor.js' %}"></script>
var program_tab = $('#outboundprogram_set-group'); // this is just because I have several inlines
program_tab.children('.add-row').on('click', function(){
program_tab.children('.inline-related:not(.empty-form)')
.last()
.find('textarea.redactor-box')
.redactor();
});
UPD 2:
Using this soution there is no plugins and image/file handlers. So I researched a little and found this article.
But image and file handling already implemented in django-wysiwyg-redactor, so I need just to use RedactorUploadView(). Urls can be found in urls.py file from sources. So here is the code:
var program_tab = $('#outboundprogram_set-group');
program_tab.children('.add-row').on('click', function(){
program_tab.children('.inline-related:not(.empty-form)')
.last()
.find('textarea.redactor-box')
.redactor({
imageUpload: "{% url 'redactor_upload_image' 'tours/out/programs/img/' %}",
fileUpload: "{% url 'redactor_upload_file' 'tours/out/programs/files/' %}",
plugins: ['table', 'video', 'fullscreen', 'image']
});
});
Related
I´m trying to use a date picker widget from a model form in the template. I´ve seen several posts but couldn´t get it working correctly.
The one I´m trying now is: Answered question
Form.py
My form code looks like
class FormularioTareas(forms.ModelForm):
class Meta:
model = Tareas
widgets = {'fecha_limite': forms.DateInput(attrs={'class': 'datepicker'})}
fields = ["destinatario", "titulo", "tarea", "resuelto", "fecha_limite"]
Template
In the template I add this script:
/* Include the jquery Ui here */
<script>
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2012",
});
});
</script>
And have this form call in the html
<div style="background: white;">{{ tareas_form.fecha_limite }}</div>
Jquery
I load Jquery as follows and have no problems detected in the browsers console.
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
What I get
I found out that the picker is working, but the main text box diplays options down when focused so I didn´t see it. The text box is still behaving as a date picker and as a text box. How can I prevent this?
Any clues welcome. Thanks!
I used autocomplete="off" on the form so the usual text input dropdown options don´t show.
I know this question have been asked here so many times, but i just cant show up Tinymce in my admin's flatpages. I don't know where I'm missing or doing something wrong. Please help me out where I'm going wrong.
The javascript file is in:
C:\Users\Kakar\web\cms\static\js\tinymce\tinymce.min.js
urls.py:
(r'^tiny_mce/(?P<path>.*)$', 'django.views.static.serve', { 'document_root': 'C:/Users/Kakar/web/cms/static/js/tinymce' }),
In my templates dir i have another admin folder, which have the change_form.html:
and right after {{ media }}:
<script type="text/javascript" src="/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
In the firebug it says:
ReferenceError: tinyMCE is not defined
tinyMCE.init({
Please help me out. Thank you.
Your url for you tinymce script is currently pointing to http://yoursite/tiny_mce/ because of this: (r'^tiny_mce/... but the script you have included would attempt to GET tinymce.min.js from http:/yoursite/tinymce.min.js because you have not included the /tiny_mce/tinymce.min.js in front of it. If your tinymce.min.js is in a subdirectory you would need to include the path to it as follows <script type="text/javascript" src="/tiny_mce/(pathtodirectory)/tinymce.min.js"></script>
I'm having quite the problem with Handlebars.JS as it is not replacing {{anything}} with the corresponding variables.
I have the following helper function:
function compileTemplate(name){
return Handlebars.compile($('#'+name+'-template').html());
}
Which I use in the following Backbone view:
Soccer.Teams.Li = compileTemplate('team-li');
Soccer.Router = Backbone.Router.extend({
routes: {
"": "index"
},
index: function(){
Soccer.container.html(compileTemplate('main'));
var teams = new Soccer.Teams.View();
var container = Soccer.container.find('.sub-content');
container.html(teams.render().$el.html());
var teamsList = container.find('#teams-list');
teams.teams.forEach(function(team){
teamsList.append(Soccer.Teams.Li(team.toJSON()));
}, this);
Soccer.page.trigger('pagecreate');
}
});
And #team-li-template is the following:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id="{{id}}"><a>{{name}}</a></li>
</script>
The correct information is definitely being passed, if I console.log the .toJSON it does contain the correct information, but nothing is replaced, the tags are just turned into nothing.
Any ideas?
Thanks!
Update:
Strangely enough I copied all of my code to a JSFiddle and it worked fine:
http://jsfiddle.net/vcrhh/1/
The actual app is 54.235.201.41 (sorry, wouldn't let me add it as a link).
Also tried just saving the code as a file locally and running it, that works fine too.
User username: mkremer90#gmail.com and password test for both. See anything wrong with the actual app? Why would it work in JSFiddle/local and not in my app?
The Handlebars and Backbone looks fine and the fiddle runs so the problem is with your testing environment. When I look at the page source on your server, I see this:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id=""><a></a></li>
</script>
Note the conspicuous absence of braces. I'd guess that something server-side is eating your braces. You say that you're using Django so Django's templates are probably causing your problem.
I have a setup screen, it consists of a sidebar and a body. The body can have a form to update the user's profile or password.
The routing looks like this:
App.Router.map(function(match) {
(match("/")).to("index");
(match("/user")).to("user", function(match) {
(match("/")).to("userIdx");
(match("/settings")).to("userSetup", function(match) {
(match("/")).to("userSetupIdx");
(match("/profile")).to("userSetupProfile");
(match("/password")).to("userSetupPassword");
});
});
});
and the wrapping setup template like this:
<script type="text/x-handlebars" data-template-name="userSetup">
<div class='sidebar'>
Sidebar
</div>
<div class='main'>
Setup <br/>
{{outlet}}
</div>
</script>
A complete example can be found here:
http://jsfiddle.net/stephanos/mgp7F/6/
What's the right approach to do this in Ember.js?
EDIT
With the help of sly7_7 I managed to make the fiddle above work: http://jsfiddle.net/ygvsS/9/. All I did was rename everything from userSetup (template, view, route) to setup. BUT obviously this is not a solution (since I have appSetup, too).
I think I have done what you are looking for, based on your comment example: http://jsfiddle.net/rt8fv/
router code:
App.Router.map(function(match){
match('/').to('home');
match('/about').to('about');
match('/contributors').to('contributors', function(match){
match('/').to('contributorsIndex');
match('/:contributor_id').to('contributor', function(match){
match('/').to('contributorIndex');
match('/details').to('contributorDetail');
match('/repos').to('contributorRepos');
});
});
});
Maybe related question: Best approach to fetch data in every state of app
(This question is related to this one)
I have a web2py application which I want to extend with some ember.js code. The delimiters of the templating systems in web2py and ember.js conflict (both are {{ and }}). Since my application has no ember.js legacy, I would like to write the ember.js code using a different delimiter. Is this possible?
The template engine use by ember.js is Handlebars.js, and I don't think you can change the delimiter.
I've seen the other question, and perhaps an other answer could be found here : Handlebars.js in Django templates
In web2py: response.delimiters = ('[[',']]')
If you don't want to change any delimiters (on web2py or in handlebars) you can do it by saving the handlebars template in an external file like people.hbs in the
web2py /static/ folder for example
{{#each people}}
<div class="person">
<h2>{{first_name}} {{last_name}}</h2>
</div>
{{/each}}
And in the view import that file using jQuery load() function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<div id="list"></div>
<script id="people-template" type="text/x-handlebars-template"></script>
<script type="text/javascript">
$('#people-template').load('/static/people.hbs', function() {
var template = Handlebars.compile($("#people-template").html());
var data = {
people: [
{ first_name: "Alan", last_name: "Johnson" },
{ first_name: "Allison", last_name: "House" },
]
};
$('#list').html(template(data));
});
</script>