I want to select option 1 and load a form with inputs
HTML:
<select id="orden" class="form-control" name="orden">
<option disabled selected>Selecciona una opción</option>
<option value="1">{{ results.1.op_ser_codigo }}{{ results.1.op_num_codigo }} / ({{ results.1.data_ini }} - {{ results.1.data_fim }})</option>
<option value="2">{{ results.2.op_ser_codigo }}{{ results.2.op_num_codigo }} / ({{ results.2.data_ini }} - {{ results.2.data_fim }})</option>
<option value="3">{{ results.3.op_ser_codigo }}{{ results.3.op_num_codigo }} / ({{ results.3.data_ini }} - {{ results.3.data_fim }})</option>
<option value="4">{{ results.4.op_ser_codigo }}{{ results.4.op_num_codigo }} / ({{ results.4.data_ini }} - {{ results.4.data_fim }})</option>
<option value="5">{{ results.5.op_ser_codigo }}{{ results.5.op_num_codigo }} / ({{ results.5.data_ini }} - {{ results.5.data_fim }})</option>
<option value="6">{{ results.6.op_ser_codigo }}{{ results.6.op_num_codigo }} / ({{ results.6.data_ini }} - {{ results.6.data_fim }})</option>
</select>
I want to fill this: (If on select option i select 1 on this inputs fill value 1)
<b><p class="black">OP: </b>{{ results.1.op_ser_codigo }}{{results.1.op_num_codigo}} </p>
<b><p class="black">Fecha Inicio: </b>{{ results.1.data_ini }} </p>
<b><p class="black">Fecha Final: </b> {{ results.1.data_fim }} </p>
You can handle it on client side (with jq, javascript) or on the server side. I definitely advice to handle it on the server side - as business logic should be there. Although in this case - as I understand - the trigger will come after the form is loaded and once the select options is selected.
I would go with an ajax solution.
place an onchange event to the select:
eg:
onchange="ChooseOption(this.value)"
add javascript to handle ajax request(I use jquery):
function ChooseOption(option_id){
$.ajax({
type: "POST",
url: "/applicatioin/option_selection/",
data: {
'option_id' : option_id,
'csrfmiddlewaretoken' :
$("input[name=csrfmiddlewaretoken]").val()
},
success: chooseoptionDetailSuccess,
dataType: 'html'
});
}
In the success you call chooseoptionDetailSuccess function. Which should pass the data to the relevant html field - with innerHtml.
Note: you may also use GET request type.
In you django view you have to render a html template which holds the html part (with the variables) which will be changed.
Sorry for the format. Seems like the code sample is not working.
Related
In Django when dealing with an image in a form, there is always this clear checkbox (if the image is nullable), e.g.:
<input type="checkbox" name="image_var-clear" id="image_var-clear_id">
<label for="image_var-clear_id">Clear</label>
Now, I wish to render it manually. If I place "{{ form.image_var }}" in my HTML, the checkbox appears and the above html code is generated, but I cannot figure out how to render it completely manually. So far I managed to get these values:
if required: {{ form.image_var.field.required }}
checkbox label: {{ form.image_var.field.widget.clear_checkbox_label }}
input text: {{ form.image_var.field.widget.input_text }}
checkbox name: {{ form.image_var.field.widget.name }}
text: {{ form.image_var.field.widget.initial_text }}
This all works fine, until I want to render the checkbox_id with:
{{ form.image_var.field.widget.checkbox_id }}
What am I missing?
I have a flask page that is for editing blog posts. It has the following vue:
<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input">
{{ form.csrf_token }}
<div style="margin-left:30px;margin-top:20px;">
Title: {{ form.title }}
</div>
<br/>
<div id="editor">
Content: {{ form.content( **{':value':'input','#input': 'update'}) }}
<div v-html="compiledMarkdown"></div>
</div>
<br/>
Category: {{ form.category|safe }}
<br/>
<input type="submit" value="Save">
</form>
<script>
new Vue({
el: '#editor',
data: {
input: "starting data"
},
computed: {
compiledMarkdown: function () {
return marked(this.input, { sanitize: true })
}
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value
}, 300)
}
});
</script>
What I would like to do is have a starting value for input based on something sent in by flask. Basically I would change input: "starting data" to input: {{ form.content.data }}. However, when I do this, it stops updating the input when I change the text in the box. I think I am kind of hardcoding the data to be whatever what in form.content.data as opposed to a string.
How can I pass this in so that it starts with the form.content.data value yet is still changeable?
The reason it didn't work was because {{ form.content.data }} appears in the template as raw text.
Thus it was trying to use something like: the brown fox jumped over the lazy dog
and this doesn't compile to a javascript object. Adding quotes around the {{ form.content.data }} like '{{ form.content.data }}' fixed it.
First time creating a webapp in django. please bear with me.
So I have this code in my html:
<h1><font color="Orange" face="Borda">{{ template_title }}</h1>
<form method='POST' action=''>{% csrf_token %}
<font color="Orange" face="Borda" style="background-color: transparent;">{{ form }}</font>>
<input type='submit' value='SUBMIT'>
</form>
now inside {{ form }} is all the views and forms. now what I want to do is to specifically call it individually (with style).
for example if I have:
email=CharField()
username=CharField()
and I wanted to call them in my html as:
<label class="sr-only" for="r-form-first-name">**EMAIL/USERNAME**</label>
<input type="text" name="r-form-first-name" placeholder="First name..." class="r-form-first-name form-control" id="r-form-first-name">
How do I do that? I already have a bootstrap template prepared for my login but other documentation suggest I use crispy forms, which I dont want to. Please tell me how if there is other ways of calling it.
Since it's your first time building a django app, i suggest you take your time building it, try reading relative doc pages for the parts you're working with.
Here's an example from the docs (tailored for your case):
<div class="fieldWrapper">
{{ form.username.errors }}
<label for="{{ form.username.id_for_label }}">Your message:</label>
{{ form.username }}
</div>
https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually
I'm building a database search engine in Laravel and I am having some problems getting Laravel to select the previously selected item in a dropdown.
Using the template builder options I can make the select like this, and it does what I want it to do:
{{ Form::select('bomserial', $bomserials, Input::get('bomserial'), array('class' => 'pure-input-1', 'tabindex' => '3')) }}
The "Input::Get('bomserial')" makes it re-select the previously selected option in the dropdown after the form has been submitted, but building the input this way means I can't use the "selected disabled" option, so I opted to build the select like this instead:
<select name="bomserial" class="pure-input-1" tabindex="3">
<option selected disabled>BOM Serial</option>
#foreach ($bomserials as $bomserial)
<option value="{{ $bomserial->serial }}">{{ $bomserial->serial }} - {{ $bomserial->job_desc }}</option>
#endforeach
</select>
This produces a better looking menu and allows for the use of a default option, but now I can no longer re-select the previous option after the form has been submitted. How can I get around this?
Since you're not using the Form builder anymore, you have to manually take control of selecting the correct option.
Based on your existing logic, you're looking at something like this: if the bomserial is not in the input, select the placeholder; if the bomserial is in the input, select the bomserial option that matches the input.
<select name="bomserial" class="pure-input-1" tabindex="3">
<option {{ Input::has('bomserial') ? '' : 'selected' }} disabled>BOM Serial</option>
#foreach ($bomserials as $bomserial)
<option value="{{ $bomserial->serial }}" {{ Input::get('bomserial') == $bomserial->serial ? 'selected' : '' }}>{{ $bomserial->serial }} - {{ $bomserial->job_desc }}</option>
#endforeach
</select>
I need to implement pagination. Actually I have pages array, page param and per_page variable.
In my code:
pages_count := math.Floor(float64(len(pages)) / float64(per_page))
then in template I need something like (pseudocode):
{{ if .page - 2 > 0 }}
{{ $start_page := .page - 2 }}
{{ else }}
{{ $start_page := 1 }}
{{ end }}
{{ if .page + 2 >= .pages_count }}
{{ $finish_page := .page + 2 }}
{{ else }}
{{ $finish_page := .pages_count }}
{{ end }}
<ul>
{{ for $i := $start_page; $i <= $finish_page; ++$i }}
<li {{ if $i == .page }} class="current_page" {{ end }}>
$i
</li>
{{ end }}
</ul>
How to implement this correctly?
Thx
When I work with Java templates (e.g. Velocity), I find that the kinds of template logic you are asking about lead to over-complex templates. The same applied in Go.
My solution is to move logic into the view-model layer and keep the templates rather dumb. This means that the controller and view model have to do a bit more work precomputing the kinds of values that your template shows. The view model is consequently larger - but it's just simple data and is easy to unit-test.
In your specific example, you would keep the for-loop that builds up the <li> list. Everything above the <ul> open tag can be handled in the view model. So the template would just work with some precomputed data.