I have been extensively searching for the answer but i cant seem to find one that works. I am using Django 1.4, with twitter boostrap 2.0.4 and i am trying to use date picker (eyecon) with no success. When i click on the input box no date box shows up.
<div id="due_date">
<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
</div>
At the end of my base.html i have (right before closing the body):
<script src="/site_media/js/jquery.script.js"></script>
<script src="/site_media/js/bootstrap-datepicker.js"></script>
Finally on me jquery.script.js i have:
$(document).ready(function(){ $('.datepicker').datepicker()});
You have selected all elements who have the class "datepicker", while your input element definition does not have such a class but rather has datepicker as id attribute set.
Either select the id field $("#datepicker") or add a class ".datepicker" to your input field.
Do this: $(document).ready(function(){ $('#datepicker').datepicker()});
As you have set id="datepicker"
'.' is used for class and '#' is used for id
Related
I try to preselect an option of a select in an embedded HTML form in Camunda Tasklist, but always the first option is preselected.
I followed Binding to a Process Variable:
Binding to a Process Variable
A select box can be bound to a process variable using the cam-variable-name directive:
<select cam-variable-name="foo" cam-variable-type="String">
<option>bar</option>
<option>zar</option>
</select>
Research
I read also CAM-3173:
select box doesn't show the correct option
If I set the value of variable by a select box on the start form, the next task form didn't show the option that has been choosen in the start form. It uses the same select box.
but I use Camunda 7.9 and the problem is fixed since version 7.2.3.
HTML
<form>
<select cam-variable-name="variable" cam-variable-type="String">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
Result
option1 is preselected. I checked the process variable before entering the user task and it contains option2.
What did I wrong? If the bug still exists, is there any work-around?
I found a work-around, see Camunda Reference:
Implementing Custom Fields
The following is a small usage example which combines some of the features explained so far. It uses custom JavaScript to implement a custom interaction with a form field which does not use any cam-variable-* directives.
It shows how custom scripting can be used for
declaring a variable to be fetched from the backend,
writing the variable’s value to a form field,
reading the value upon submit.
[...]
The above example uses jQuery for interacting with the HTML controls. If you use AngularJS, you can also populate the $scope in the variables-fetched callback and read the values from the $scope in the submit callback:
My changed HTML:
<form>
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('variable');
});
camForm.on('variables-fetched', function() {
$scope.variable = camForm.variableManager.variable('variable');
});
camForm.on('submit', function() {
camForm.variableManager.variableValue('variable', $scope.variable);
});
</script>
<select data-ng-model="variable">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
I was looking at http://archive.tinymce.com/wiki.php/Configuration3x:editor_selector
Is there a way to select a textbox only if it is under a <form> with a specific id?
For example:
<form id="edit_page">
<textarea></textarea>
<form>
I know I can add a class to the text area to get it to work, but I'm hoping for this solution for my use case. As I'm using Active_admin and I don't want to have to redefine all the default forms for it.
If you are okay with using the tinyMCE jquery plugin, you can select the elements using the jquery selector($) and then call the tinymce function over that.
Codepen example is here.
JS Part:
$(function() {
$('#edit_page2 textarea').tinymce({
script_url : 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.4/tinymce.min.js',
theme : "modern",
mode : "textareas"
});
});
HTML Part :
<form id="edit_page1">
<textarea></textarea>
</form>
<form id="edit_page2">
<textarea></textarea>
</form>
<form id="edit_page3">
<textarea></textarea>
</form>
This will select based on the parent's id. You can use any type of css selector.
You will need to include jquery and tinyMce's jquery file
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.4/jquery.tinymce.min.js
Is there a way in Sitecore SPEAK UI (7.5) to configure a ListControl (ViewMode set to DetailList) to contain a column with images, and another column containing buttons?
I've created a ListControl Parameters item beneath my PageSettings item and have added a few ColumnField items for the required columns - but cant find any other template types to add for different types of column data. I've also tried playing around with the Formatter and HTMLTemplate fields of the ColumnFields but am not sure how these are meant to be used.
Considering button means hyperlink. You can try adding the following in the HTMLTemplate:
For Image:
<img src="{{YourImageSourceField}}" ..../>
For Hyperlink:
{{YourLinkTextField}}
You can also consider reading Martina Welander Speak Series for some information on this kind of custom implementations.
I've also used the custom title property of the ListView by setting ViewMode to TileList. Then used Knockout to databind to a custom tile using standard cshtml, if this is any use?
<div class="sc-tile-default" data-bind="attr: {id: Id}">
<div style="min-height: 98px;">
<img width="112" data-bind="attr: {src: Path}" />
</div>
<div class="sc-iconList-item-title">
<span data-bind="text: Name"></span>
</div>
See this project
https://github.com/sobek1985/WallpaperManager
I am working on a ticketing system and a create new ticket form which requires you to enter the status (working, open, closed etc.), the severity (low, high, normal, asap etc.) and several other parameters. The select boxes seem to be old-school and time-consuming so I want to replace them with a series of buttons.
model
status = models.CharField(max_length=100, choices=STATUS_CHOICES)
severity = models.CharField(max_length=100, choices=SEVERITY_CHOICES)
template:
<div class="form-group">
{{ form.status.errors }}
<label for="id_status" >Status:</label>
{{ form.status }}
</div>
<div class="form-group">
{{ form.severity.errors }}
<label for="id_severity" >Severity:</label>
{{ form.severity }}
</div>
How can this be achieved?
I'm assuming you meant radio buttons here, in which case you need to change the form widget for the field:
SEVERITY_CHOICES=[('critical','Critical'),
('blocking','Blocking),
('normal','Normal)]]
severity = forms.ChoiceField(choices=SEVERITY_CHOICES, widget=forms.RadioSelect())
If that's not what you're after then you'll have to write your own custom widget.
Button is not meant for that, man.
I commented your question and what i meant was - HOW - in the sense of HTML, can BUTTON be used for storing selected value? Button is not meant for that. Button is meant for clickin and doing something upon click.
Yes - you can make button click open drop-down list of elements. And yes- twitter bootstrap supports that (http://getbootstrap.com/components/#btn-dropdowns).
But what does not work is:
Button does not store the selected value. You would have to write all that js by yourself - change button inner text to indicate selected value.
Even worse - BUTTON is not an html element with value attribute - and it does not get posted on form post. You would have to come up with some means of inserting that value into list of values that get posted on form submit. All possible if you know your javascript.
There is no support in django for presenting field with many values as button. You would have to create your own widget for that. Again - it is all possible with django.
BUT... Why go through all that work, when, with some CSS you could just make your select LOOK like the button styles that Twitter bootstrap offers....
I am using Django and Bootrap 2.32. I want to include this wysiwyg-bootrap-themed text editor: http://mindmup.github.io/bootstrap-wysiwyg/. The usage of this editor is fairly simple, including
$('#editor').wysiwyg();
in the JS-declaration will render each
<div class=editor></div>
into a beatiful wysiwyg text-editor.
Now the problem: I want to include this editor into one of my django form field. I have the single form:
class Article_Form(ModelForm):
Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
class Meta:
model= Article
, whereas the Article model includes one simple CharField . Is there any chance, to get the editor work inside the Article_text form-field? With the above-mentioned widget, the created textarea cannot be controlled by the wysiwyg-editor-control buttons. Wrapping the form-template-tag like this
<div id="editor">
{{ Article_Form.Article_text }}
</div>
doesn't work either. The problem thus is that Django creates a textarea, wheras the editor would need a <div> to render correctly. Do you guys have any idea how to get this to work (without refering to django-wysiwyg).
Thanks!
I don't know enough about Django but I wrote the editor you're referring to, so here's a suggestion. Assuming the other answer on this page is correct and you can't generate a div directly, you can generate a text area using whatever Django templates you would normally do, then assign two events:
1) page onload event that would copy the textarea contents into the div, something like
$('#editor').html($('#textarea').val())
2) form onsubmit event that would reverse copy the current div contents into the textarea before it gets submitted
$('#textarea').val($('#editor').html())
Take a look at this.
Summernote is a simple WYSIWYG editor based on Twitter's Bootstrap.
django-summernote plugin allows you to embed Summernote into your Django admin page very handy.
https://github.com/lqez/django-summernote
Are you sure that this "plugin" doesn't work with textarea?
{{ Article_Form.Article_text }}
will be rendered to something like:
<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>
So there is a chance that you can initialize the wysiwyg editor like:
$('#id_Article_text').wysiwyg();
However after checking the plugin, I doubt that would be possible since it is using contenteditable="true" attribute of HTML5 and probably the plugin works with div only.
So there is no way you can make it work natively with Django form. The solution should be display other fields of your form manually, hide the one with textarea and display the editor instead:
<form action="" method="POST">
{{ Article_Form.field1 }}
{{ Article_Form.field2 }}
<div class=editor></div>
{% csrf_token %}
<input type="submit" value="Submit" id="submit-btn" />
</form>
Then you can use JS to submit your form:
$('#submit-btn').click(function (e) {
e.preventDefault();
$.ajax({
// do your magic here.
// note that you can get the content of the editor with: $('#editor').cleanHtml();
})
});
This way is hackish I agree so I don't recommend you go for it, just find other plugin then. Also please read PEP 8 carefully.
Hope it helps.
Take a look at this repo: https://github.com/rochapps/django-secure-input
I think it solves most of your problems.