I have a data-table when user click on the table row it will get the {{ content.id }} and pop up another child table.
<table id="project-content-datatable" class="display table table-hover table-responsive" style="width: 100%">
<thead>
<tr>
<th class="small text-muted text-uppercase"><strong>ID</strong></th>
<th class="small text-muted text-uppercase"><strong>Name</strong></th>
<th class="small text-muted text-uppercase"><strong>Description</strong></th>
</tr>
</thead>
<tbody>
{% for content in content_list %}
{% if content.search_type.name == searchtype.name %}
<tr class="text-primary">
<td class="text-left" style="cursor: pointer"
onclick='load_workorder({{ content.id }});'>
{{ content.id }}
</td>
<td class="text-left" style="cursor: pointer" onclick='load_workorder({{ content.id }});'>
{{ content.name }} </td>
<td class="text-left"> {{ content.description }} </td>
</tr>
{% endif %}
{% endfor content_list %}
</tbody>
<script>
function load_workorder(content_id) {
workorder_path = "/dashboard/workorder_list/" + content_id + "/?format=json";
workorder_table.api().ajax.url(workorder_path).load();
</script>
Inside the child table I have a button to pop up a modal form to create a new content in it, one of its field is a dropdown ForeignKey field.
<div class="modal-body">
<div class="field">
<label>Project Type</label>
<select name="parent_project_content" required="" id="id_parent_project_content">
<option value="">---------</option>
<option value="1" selected="">Iron man suit</option>
<option value="2">SEQ 001</option>
<option value="4">SEQ 002</option>
</select>
</div>
The <option> value is equal to the {{ content.id }}.I want to hide this field from user so how can I change the <option> to selected based on the {{ content.id }} click by user.
Any help is much appreaciated, Thanks
So if the content.id value matches that of the option in the select dropdown the jQuery for that is pretty straightforward.
Here's a little example but all you need to do is call the selectOption() function and pass through your content.id value:
// my simplified example to grab a value from the table
$('td').click(function(){
var value = $(this).text();
selectOption(value);
});
// pass the value to this function
function selectOption(v){
$('#id_parent_project_content option[value="'+v+'"]').prop('selected', true);
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments