I cannot send selected value to test.html.
I wrote codes
<form method="post" action="">
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;" name="main">
{% for i in json_data.items.values %}
<option value="{{forloop.counter}}">{{ i }}</option>
{% endfor %}
</select>
{% for key, values in preprocessed %}
<select name="type" id=type{{forloop.counter}}>
{% for counter, value in values %}
<option value="{{forloop.counter}}">{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#mainDD').on('change', function() {
var thisType = "type" + $(this).val();
for(i=1; i<6; i++) {
var thisId = "type" + i;
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
}).trigger('change');
});
</script>
<form id="postform" action="app/test_view" method="GET">
{% csrf_token %}
<input type="submit" value="SEND">
</form>
<script type="text/javascript">
var key = $('select[name="main"] option:selected').text();
var value = $('select[name="type"] option:selected').text();
var array1 = [];
var array2 =[];
document.querySelector("input[type=submit]").onclick = e => {
const test = window.open(`test_view?${key}=${value}`, "_blank");
}
</script>
But now test.html shows
I wrote test.html
<h2>RESULTS</h2>
<script type="text/javascript">
onload = () => {
document.body.appendChild(
document.createTextNode([...new URLSearchParams(location.search).entries()])
);
}
</script>
I selected i(actually value is A) & value(actually value is a-1) in index.html so I wanna show in test.html like
These 2 selected buttons load json file like
{
"items":
{
"---":"---",
"A":"A",
"B":"B",
},
"type1":
{
"---":"---",
"a-1":"a-1",
"a-2":"a-2",
},
"type2":
{
"---":"---",
"b-1":"b-1",
"b-2":"b-2",
}
}
How should I fix this?What should I write it?Is it garbled？or code error?
Related
I Want filter system.
I Want select list value Variable = Razor (RFilter) variable.
Thanks for helps.
My Selectbox;
<select id="selector2" style="width:20vh;">
<option v-for="(item, i) in options" :index="i" v-bind:value="item.id"> {{ item.name }}</option>
</select>
My Button;
<button class="btn btn-primary" type="button" onclick="UAFunction(RFilter)">SEÇ</button>
My Function;
#{
int RFilter = 0;
<script>
UAFunction(RFilter);
function UAFunction(RFilter) {
var JSFilter = document.getElementById('selector2').value();
var JSFilter = #RFilter;
}
</script>
}
My Foreach;
#foreach (var item in Model)
{
if (item.AppId == RFilter)
{
<tr class="gradeU" style="text-align:center;">
<form action="/Home/AllList" method="POST">
<td><h4>#item.UserName</h4></td>
<td><h4>#item.UserLastName</h4></td>
<td><h6>#item.Question</h6></td>
<td><h4>#item.Answer</h4></td>
<td><h4>#item.CreatingTime</h4></td>
</form>
</tr>
}
}
I have forms that are rendered dynamically based on values in a dictionary. They are given an ID based on the key value. They are all initially hidden.
<div id="subforms" style="display: none" >
{%for k, v in options.items() %}
<h3>{{k}}:</h3>
<form id= "{{k}}">
{% for option in v %}
<label>{{option}}</label>
<input type="checkbox" name="{{option}}_enabled">
{% endfor %}
</form>
{% endfor %}
</div>
I now create an input list with those same keys:
<form action="/action_page.php">
<input list="tables" id="tablelist" >
<datalist id="tables">
{% for key in options.keys() %}
<option value={{key}}>
{% endfor %}
</datalist>
</form>
Last I have Javascript used to listen to the tablelist element and select a form based on the inputlist's value.
const tables = document.getElementById("tablelist")
const subform_block = document.getElementById("subform_display")
const forms = document.getElementById("subforms")
tables.oninput = () => {
let form =
forms.querySelector('form[id="${tables.value}"]');
if(form){
subform_block.innerHTML = form.outerHTML;
}
else {
subform_block.innerHTML = "not found";
}
}
The querySelector is not working. I confirmed that the HTML is rendered correctly and the IDs are consistent, but my querySelector is unable to find any of the forms. What is wrong?
Changed:
let form = forms.querySelector('form[id="${tables.value}"]');
to:
document.querySelector('form[id=' + tables.value + ']');
And it works. Not sure why ${tables.value} wasn't recognized properly
I am trying to update the text inside a cell that contains also an input box.
In line $(ib).closest('td').prop('textContent',888); I am assigning the value 888 to the text but this results in assignment of cell's text to "888" but also for some reason deleting the input box.
My code (Django template):
{% extends "base.html" %}
{% block head_scripts %}
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
{% endblock %}
{% block title %}
Schedule Match
{% endblock %}
{% block styles %}
<style type="text/css">
tfoot {
display: table-header-group;
}
</style>
{% endblock %}
{% block content %}
<table id='pm_table' class="display" cellspacing="0" width="100%">
<thead>
<tr>
{% for col_name in table_headers%}
<th>{{col_name}}</th>
{% endfor %}
</tr>
</thead>
<tfoot>
<tr>
{% for col_name in table_headers%}
<th>{{col_name}}</th>
{% endfor %}
</tr>
</tfoot>
<tbody>
{% for data_row in table_data%}
<tr>
{% for item in data_row%}
<td>{{item}}</td>
{% endfor%}
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
var SITE_ID_COL = 0;
var PRIORITY_COL = 3;
var IS_SCHEDULED_COL = 4;
// priority input box
$("#pm_table td:nth-child(" + PRIORITY_COL + ")").each(function() {
// $(this).children().css('visibility', 'hidden');
$(this).css('text-align', 'center');
// $(this).css('font-size', 0);
var $input_box = $('<input type="text" class="priority_changed" />')
$input_box.prop('value', $(this).text());
$input_box.prop('size', 1);
$input_box.css('text-align', 'center');
$input_box.prependTo(this);
});
// remember old value of input box
$("#pm_table td:nth-child(" + PRIORITY_COL + ")").on('focus', '.priority_changed', function() {
this.old_val = this.value;
});
// priority input box listener
$('#pm_table').on('change', '.priority_changed', function() {
var $changed_tr = $(this).closest('td').closest('tr');
var site_id = $changed_tr.children().eq(SITE_ID_COL).text();
var old_val = parseInt($(this).closest('td').text());
var ib = this;
// confirm change
if (!confirm('Change priority for site ' + site_id + ' from ' + this.old_val + ' to ' + this.value + " ?")) {
//revert input box value
$(this).prop('value', this.old_val);
} else {
// make the change in db
new_val = this.value;
var url = '/api/manage/schedule_match/set_priority/' + site_id + '/' + new_val + '/';
$.ajax({
type: 'POST',
url: url,
success: function(result) {
res = JSON.parse(result) // todo read res
alert('SUCCESSFULLY changed priority for site ' + site_id + ' from ' + ib.old_val + ' to ' + res.new_val + ".");
$(ib).closest('td').prop('textContent',888);
},
error: function() {
alert('ERROR updating database!');
//revert input box state
$(ib).prop('value', ib.old_val);
},
});
}
});
</script>
{% endblock %}
I tried $(ib).closest('td').text(888); and many different properties like innerText, innerHtml,$(ib).closest('td').childNodes[1].prop('text',888) but without result in right direction.
What am I doing wrong here?
You should change your template to have a span inside td. Like:
<tbody>
{% for data_row in table_data%}
<tr>
{% for item in data_row%}
<td><span>{{item}}</span></td>
{% endfor%}
</tr>
{% endfor %}
</tbody>
Then you can use $(ib).closest('td').children('span').text(888) to change the text without deleting the input box.
i'm coding a simple forum, and i want that the user add the message without refreshing the page, i dont know about ajax , i tried to make things work but when i click on the submit button nothing happens, any help please ??
here is my cotroller :
$request = $this->get('request');
$entityManager = $this->getDoctrine()->getManager();
$msga = new Msg();
$form = $this->get('form.factory')->create(new MsgType());
$form->handleRequest($request);
if ($form->isValid())
{
if($request->isXmlHttpRequest())
{
$msga->setContenu($form->get('contenu')->getData());
$msga->setDateEcriture($date);
$msga->setNbvote(0);
$msga->setUser($user);
$msga->setForum($forum);
$entityManager->persist($msga);
$entityManager->flush();
return $this->render('otaotaBundle:Forum:forum.html.twig', array(
'forum'=>$forum,
'msg'=>$msg,
'msgUF' =>$msgByUser,
'id' => $forum->getIdForum(),
'form' => $form->createView(),
'action' => "add",
));
}
}
and the view:
{% extends "::base.html.twig" %}
{% block body %}
<form action="{{path("show_forum", {id: id} )}}" method="post" novalidate>
Date de création :
<h7>{{forum.datedebforum|date("Y-m-d")}}</h7><br/><br/>
{{forum.description}}<br/><br/><br/>
<table>
{% for m in msg %}
<tr>
<td>
{{m.dateEcriture|date("Y-m-d")}}<br/>
{{m.nbVote}}
{{m.contenu}}
<br/><br/>
</td>
<td>
{% for ms in msgUF %}
{%if ms.idMsg == m.idMsg %}
<a class="link" href="{{ path('delete_msg',{id: ms.idMsg}) }}">supprimer</a>
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
</table>
<br/>
{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
{{ form_widget(form._token) }}
<textarea name="textarea" id="contenu"></textarea>
<input type="submit" value="Repondre" />
<script>
$(document).ready(function() {
$('form').submit(function(event) {
// prevents the browser from "following" the link
event.preventDefault();
var $url = $("form").attr("action");// + '.json';
var $value = $('#contenu').val();
$.ajax({
type: "POST",
url: $url,
data: $value
});
});
});
</script>
{% endif %}
</form>
{%endblock%}
i want that the message shows up after the submitting without refreshing
Here I found the following helpful javascript to dynamically add a form to my python/django template. Here is the code:
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function addForm(btn, prefix) {
// Make a variable and assign to it a string convertd to an integer. The string is the variable
// with the the #id assigned to it. The value of this attribute is saved. The value will equal
// the current number of forms
var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
// Find the element with the given class, and clone it after loading the 0 index get request.
// Var row is now a cloned row.
var row = $('.dynamic-form:first').clone(true).get(0);
$(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
$(row).children().not(':last').children().each(function() {
updateElementIndex(this, prefix, formCount);
$(this).val('');
});
$(row).find('.delete-row').click(function() {
deleteForm(this, prefix);
});
$('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
return false;
}
function deleteForm(btn, prefix) {
$(btn).parents('.dynamic-form').remove();
var forms = $('.dynamic-form');
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
for (var i=0, formCount=forms.length; i<formCount; i++) {
$(forms.get(i)).children().not(':last').children().each(function() {
updateElementIndex(this, prefix, i);
});
}
return false;
}
Then I have my following template.
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% crispy form form.helper %}
{% load staticfiles %}
{% block extrahead %}
{% endblock %}
{% block blurb %}
<h1>Upload Samples</h1>
<p>Upload A Single Sample, Or A Batch Of Samples</p>
{% endblock %}
{% block form %}
<style>
tr th {text-align:center;}
</style>
<!-- Display formset -->
<form id="myForm" method="post" action="">
{{ formset.management_form }}
<div class='table'>
<table class='no_error' id='id_forms_table' border="2px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
{% for form in formset %}
<tr id="{{ form.prefix }}-row" class="dynamic-form">
<td></td>
<
<td {% if forloop.first %} class="hidden"{% endif %}>
<a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" class="delete-row"><input type='button' value='Remove Row' class='delete-row'></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</form>
<!-- Dynamic Formset javascript -->
<script type="text/javascript">
$(function () {
$('.add-row').click(function() {
return addForm(this, 'form');
});
$('.delete-row').click(function() {
return deleteForm(this, 'form');
})
$('.add-10-rows').click(function() {
return addForm(this, 'form');
})
})
</script>
<input type='button' value='Add Row' class='add-row'>
<input type='button' value='Add 10 Rows' class='add-10-rows'>
<div style='padding-top:20px'>
<input class='btn btn-primary' type='submit' value='Upload' />
</div>
{% endblock %}
This works great, but now I would like to adjust this to allow for the addition of n rows. I will make a form that takes in an interger, then when a button is pressed, I would like to add that number of forms instead of one at a time. I am quite new to javascript/jquery, but I figured the psudo code would look something like this:
function addNForms(btn, prefix, n){
for(var i = 0; i < n; i++){
// Perform the same logic as addForm.
}
}
Unfortunately I have not been able to figure it out. I have performed the function logic n times in a for loop, but the result was that only one form at a time was being made. Which part of the addForm function can I put in a for loop to achive this goal?