Cochez la case de texte si elle n'est pas vide, sinon actualisez la page.
J'ai essayé de vérifier si l'ID de la zone de texte est == null alors la page s'actualisera toutes les 5 secondes et si son ! = nul ou non vide la page ne rafraîchit pas.
basé sur la demande de 20yco est le code complet:
<textarea name="field5" class="field-style" placeholder="opinion" id="opinion"></textarea>
<script type="text/javascript">
if($('#opinion').val() == null ){
window.setTimeout(function () {
location.href = " ";
}, 5000);
}
</script>
c'est le morceau de code dont j'ai besoin pour le réparer:
{% block body %}
<head>
<link rel="stylesheet" type="text/css" href="{% static '/css/simpleInformation.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/simpleInformationSearch.css' %}">
</head>
<body>
{# refresh the page each 50 second #}
<script type="text/javascript">
// if($('#opinion').val() == null ){
// window.setInterval(function () {
// location.href = " ";
// }, 5000);
// }
var myTimer = setInterval('window.location.reload()', 5000);
$('#opinion').on('keyup change', function(){
if( $(this).val().length == '' ) {
myTimer = setInterval('window.location.reload()', 5000);
} else {
clearInterval(myTimer);
}
});
</script>
<form class="form-style-9">
<!-- {{ Queryresult }} -->
<table border="1" style=" border-style:solid; width: 100%; ">
<thead>
<tr style=" text-align: center; padding: 8px; background-color: #4CAF50;
color: white;">
<th style=" text-align: center; padding: 8px; background-color: #2D77A2;
color: white;">
add opinion
</th>
<th style=" text-align: center; padding: 8px; background-color: #2D77A2;
color: white;" >
num
</th>
<th style=" text-align: center; padding: 8px; background-color: #2D77A2;
color: white;">
title
</th>
<th style=" text-align: center; padding: 8px; background-color: #2D77A2;
color: white;">
date
</th>
<th style=" text-align: center; padding: 8px; background-color: #2D77A2;
color: white;">
description
</th>
</tr>
</thead>
{% for item in Queryresult %}
<tr style=" text-align: center; padding: 8px;">
<td style=" text-align: center;" >
<a href="#" class="te2">
{{ item.te2chira_id }}
</a>
</td>
<td style=" text-align: center;">
{{ item.num }}
</td>
<td style=" text-align: center;">
{{ item.title }}
</td>
<td style=" text-align: center;">
{{ item.te2chira_date }}
</td>
<td style=" text-align: center;">
{{ item.description }}
</td>
</tr>
{% endfor %}
</table>
<br>
<br>
<ul>
<li>
<input type="hidden" id="theid">
<input type="date" name="field2" class="field-style field-split align-left" placeholder="date" id="date" readonly/>
</li>
<li>
<input type="number" name="field3" class="field-style field-split align-right" placeholder="num" id="num" readonly/>
</li>
<li>
<input type="text" name="field4" class="field-style field-full align-none" placeholder="title" id="title" readonly/>
</li>
<li>
<textarea name="field5" class="field-style" placeholder="description" id="text" readonly></textarea>
</li>
<li>
<table id="opinions_table" class="searchte2chira">
</table>
</li>
<br>
<li>
<textarea name="field5" class="field-style" placeholder="opinion" id="opinion"></textarea>
</li>
<li>
<input type="submit" class="field-style field-full align-none" value="Add opinion " id="updateform" />
</li>
</form>
<script type="text/javascript">
$(function(){
var theSections={}
$('.te2').on('click',function(e){
e.preventDefault()
$.ajax({
'method':'POST',
'url':'/getTe2chira',
'data':{
id:$(e.target).text()
},
headers: {
'X-CSRFToken': '{{csrf_token}}'
}
}).done(function (msg) {
console.log(msg)
$('#year').val(msg['te2']['year'])
$('#date').val(msg['te2']['te2chira_date'])
$('#num').val(msg['te2']['num'])
$('#title').val(msg['te2']['title'])
$('#text').val(msg['te2']['description'])
$('#theid').val(msg['te2']['te2chira_id'])
$.ajax({
'method':'POST',
'url':'/getOpinion',
'data':{
'id':$('#theid').val()
},
headers: {
'X-CSRFToken': '{{csrf_token}}'
}
}).done(function(resps){
//console.log(resps)
var respsO=resps['opinions']
theSections=resps['sections']
console.log(respsO)
opinionsTable.clear().rows.add(respsO).draw()
})
}).fail(function (xhr,e,r) {
//console.log(xhr)
})
})
$('#updateform').on('click',function (e) {
e.preventDefault()
if($('#num').val().length == 0 ){
alert('please select a valid record to edit')
}else {
$.ajax({
method: 'POST',
url: '/updateinfo',
headers: {
'X-CSRFToken': '{{csrf_token}}'
},
data: {
'te2chira_id': $('#theid').val(),
'opinion': $('#opinion').val()
}
}).done(function (msg) {
console.log(msg)
document.location = '/simpleInformation.html'
}).fail(function (xhr, e, r) {
console.log(xhr)
})
}
})
var opinionsTable=$('#opinions_table').DataTable({
searching: false, paging: false, info: false,
columns:[
{'title':'sec','data':'section',
"render":function(val,type,row,meta){
console.log('the Value is ',val)
if (type == 'set'){
console.log('doing here ')
row.section = val
row.section_display=sections[row.section]
row.section_filter=sections[row.section]
return
}else if (type === 'display',val) {
console.log('display')
return theSections[val];
}
else if (type === 'filter') {
console.log('filter',val)
return row.section_filter;
}
// 'sort', 'type' and undefined all just use the integer
return row.section;
}},
{'title':'opinion','data':'opinion'}
]
})
})
</script>
</body>
{% endblock %}
Si la zone de texte avec l'option id a une entrée de l'utilisateur, cela signifie qu'elle n'est pas vide et que la page ne sera pas actualisée. Sinon, si elle est vide, la page doit être actualisée toutes les 5 secondes.
3 Réponses :
Essayez celui-ci, par défaut, la page se rechargera toutes les 5 secondes, mais si vous remplissez l'entrée - la page cessera de se recharger, mais ensuite, si vous remplissez à nouveau l'entrée vide - la page recommencera à se recharger toutes les 5 secondes, pour éviter cela , supprimez simplement myTimer dans if ($ (this) .val (). length == '') {}
Mis à jour:
// define timer that reload page every 5 seconds;
var myTimer = setInterval('window.location.reload()', 5000);
// input events
$('#opinion').on('keyup change', function(){
if( $(this).val().length == '' ) {
// if you leave input empty again - page start reloading again
myTimer = setInterval('window.location.reload()', 5000);
} else {
// if input not empty - clear interval and stop reload page
clearInterval(myTimer);
}
});
Screencast p >
Les commentaires ne sont pas destinés à une discussion approfondie; cette conversation a été déplacé vers le chat .
J'ai implémenté un scénario utilisant formwatcher pour vous, où -
jQuery vous informera uniquement lorsque vous remplissez une entrée de formulaire ou lorsque vous effacez une entrée de formulaire. La page ne sera actualisée qu'une fois après l'effacement d'une entrée de formulaire. Donc, veuillez faire référence à cette solution uniquement si vous êtes d'accord avec ce scénario ; sinon, vous pouvez vous référer à cette question similaire.
Voici le plnkr & Démo jsfiddle pour le scénario mentionné ci-dessus. N'oubliez pas de consulter la console pour les journaux de sortie.
Vous devrez peut-être utiliser setInterval
@TusharWalzade je n'ai pas compris votre commentaire
Essayez de le comparer à une chaîne vide (('#opinion'). Val () === '') au lieu de null.
@pydev s'il vous plaît vérifier comme bonne réponse si cela vous a été utile, merci
@ MirzaMašić j'ai essayé avec une chaîne vide mais ne fonctionne toujours pas
Vous pouvez utiliser efficacement jQuery formWatcher ici, référez-vous à ceci - jquery-form-watcher.readthedocs. io / fr / dernier
@pydev vérifiez-le ici, cela fonctionne -> jsfiddle.net/mirzamasic/mxcLh24e/3
@ MirzaMašić le même problème, il rafraîchit même s'il n'est pas vide
Le problème est que lorsque la page est chargée, le champ de saisie est vide -> il le vérifie et démarre le compte à rebours pour se rafraîchir. Peu importe que vous ayez plus tard entré une valeur
oui c'est le problème alors comment puis-je refuser l'actualisation de la page pour arrêter le compte à rebours une fois que la zone de texte n'est pas vide?
@pydev s'il vous plaît vérifier la réponse mise à jour