I have a text field
<input type="text" value="This is a test." name="mytextbox" size="10"/>
and separated from that a button
<button type = "button" class="btn btn-primary">
<font size="1">Run</font>
</button>
that should update a list and update the value of the text field itself.
Sometimes forms are used in this context, but I would have to wrap the forms tag around the whole template when the input and button are separated on the screen.
Since I am relatively new to Django, I would like to know the best
strategy to solve the problem.
a) Reload the complete page template with changed arguments/context
b) Create a html template of the specific part that extends the main template and only try to render/update this one.
c) Do something smarter.
There are some answers in a (much older) post from 8 years ago but I am interested in the state-of-the-art solution.
Related
We are on Sitecore 8 using Web Forms for Marketers.
I am trying to identify how to add information to the "display-section-info" class item in a sitecore WFFM form. Looking # The generated code I see an element (display-section-info class) after the Field Legend, and before the starts of our fields. I would like to put some basic information regarding the fields in this element (below has text "THIS IS WHERE I WOULD LIKE TO ADD TEXT").
Here is the source from "View Source" on the browser. Through developer tools I plugged in some info and that is exactly where I want it to go.
<fieldset class="display-section-fieldset">
<legend class="display-section-legend">1. OUTSIDE INTEREST:</legend>
<p class="display-section-info">THIS IS WHERE I WOULD LIKE TO ADD TEXT</p>
<div class="display-section-content">
<div class=" field-border">
<span class=" field-title">
<span class=" field-required">*</span>
In the field below, list exceptions
</span>
Update1:
per Jammycans response I added a few parameters to the section but did not seem to display. items have been published, I also confirmed on the prod DB.
Content Editor
Results:
Thanks in advance
There is no field in the Form Editor to set this information, you can set it directly on the section item itself.
In the Content Editor, expand the form and select the Form Section item. On the section item in the Parameters field set the information field text you need:
<Information>THIS IS WHERE I WOULD LIKE TO ADD TEXT</Information>
You can use the Localized Parameters field if you need to translate the text.
EDIT:
There is a bug in the logic on the default WFFM section view, located in \Views\Form\EditorTemplates\SectionModel.cshtml (for Sitecore 8 update 5 and earlier). On lines 18-21, the code reads:
#if (string.IsNullOrEmpty(Model.Information))
{
<p class="#Model.CssClass display-section-info">#Html.Sitecore().Field("Information", Model.InnerItem)</p>
}
The first line here should read:
#if (!string.IsNullOrEmpty(Model.Information))
Note the "!". That explains why you were seeing the markup previously, even though the parameter was not set. You need to update the code in the view in order to fix it.
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.
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.
I have a finite state machine (django-fsm) which allows an object to go from a source state into one of several target states. I can add all the actions in a dictionary like:
ACTIONS { 'button_1': action1,
'button_2': action2,
...
}
This translates in a form with a submit button for each state.
{% for n,m in object.get_available_current_state_transitions %}
<input type="submit" class="btn" value="{{ n|get_action|capfirst }}"
name="button_{{n}}" />
{%endfor%}
<input type="submit" class="btn primary" value="Save">
<a class="btn" onclick="javascript:history.go(-1)">Cancel</a>
This usually results in more than 3 buttons.
Clicking a button results in a specific action, defined in my case in the model class.
Now, I know I can get the clicked button in the request.POST dictionary, but this would result in a cascade if like:
if 'button_1' in request.POST:
action_1()
elif 'button_2' in request.POST:
...
Is there any way to get the button pressed separately (ideally from the request object) in a variable so I can have something like
ACTIONS[clicked_button_name](...)
? In other words, is there any way to obtain the clicked button outside the POST dictionary?
PS: I've looked other replies on the "multiple buttons" question, but all offer request.POST as answer.
If all of the actions and strings are already in your view, why don't you just iterate over that actions dict?
for key, value in ACTIONS.items():
if key in request.POST:
value()
Just make your button names very unlikely to be used as a regular form field name.
A few alternatives: use javascript to handle the submission and have it set a single form field such as "action".
Use more unique keys and filter through request.POST.keys() with a regex pattern or string comparison.
action = [x for x in request.POST.keys() if 'FAIRLY_UNIQUE_BUTTON_PREFIX' in x]
if action:
ACTIONS[action]()
I don't think so directly, but a couple workarounds could be:
Send your buttons to different urlconfs with some variable (like a three letter arg). All of these confs point to the same view taking this three letter arg as an argument, which then knows what to do. This might still result in a cascade if else though.
Or, send them to different views all together.
You could try doing something ajaxy. The data will still be in a post dict, but you will have more control over how the post dict is structured.
I'm also assuming GET isn't an option for any of these (yet that still results in if else structures.)