1
Kinda hard to explain by the title, but here’s the thing, I have a foreach that prints in a list <ul>
<li>
tags, and within it I have the following code:
<?php if ($row['Status'] == 'Em Processo'):?>
<span class="process badge" style="background-color:#67A6DF">Em Processo</span>
<?php endif; ?>
<?php if ($row['Status'] == 'Teste'): ?>
<span class="test badge" style="background-color:#FCB529">Em Teste</span>
<?php endif;?>
<?php if ($row['Status'] == 'Aprovada'):?>
<span class="approve badge" style="background-color:#43A995">Aprovada</span>
<?php endif;?>
The idea is if it has a set status it prints what it is, but I have the following button:
<a href="javascript:void(0);" class="flex-icon approved" data-toggle="tooltip" data-placement="top" title="Aprovar" data="5"><i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i></a>
This changes the status setting, in this case clicking on it it will change the status to Approved, so inside the list it Munda the <span>
along with the list.
But the question is, what hasn’t been tested yet, can’t be approved, but I can’t just take the class process of the first <span>
and send in Ajax to not change.
Script:
$(document).ready(function() {
$('.approved').on('click', function(){
var process = $('.process').text();
if(process != "Em Processo"){
var hrefdata = $(this).attr("data");
var taskid = $(this).parent().parent().attr('id');
$.ajax({
url: './task.php',
type: 'POST',
data: { id: taskid, approved: hrefdata},
success: function(data) {
window.location.reload();
}
});//Ajax
}else{
alert('Está em processo não pode ser aprovado antes de enviar para teste');
};//If
});//Onclick
});
How do I get him to just read <span>
with the process class and not set the same condition for the others?
Well with the reply of @Kirmayrtomaz I managed to solve my problem, but I had to make some changes to the code.
If I use:
$(document).ready(function() {
$('.approved').on('click', function(){
var father = $(this).parent().parent();
var taskid = $(father).attr('id');
var process = document.querySelectorAll("#" + taskid + " .process");
if($(process).text() != "Em Processo"){
var hrefdata = $(this).attr("data");
$.ajax({
url: './task.php',
type: 'POST',
data: { id: taskid, approved: hrefdata},
success: function(data) {
window.location.reload();
}
});//Ajax
}else{
alert('Está em processo não pode ser aprovado antes de enviar para teste');
};//If
});//Onclick
});
I had to make the following change to the ID:
<li class="list-group-item id-task" id="<?php echo $row['TasksId'];?>"> ...
</li>
To:
<li class="list-group-item id-task" id="task<?php echo $row['TasksId'];?>"> ...
</li>
The following error is shown:
"Uncaught Syntaxerror: Failed to execute 'querySelectorAll' on 'Document': '#1 . process' is not a Valid selector."
To remove the word "task" from the ID I had to put the following code
$idtaskapproved = strip_tags($_POST['id']);
$substrid = substr ($idtaskapproved, 4);
That takes the first 4 POST strings I’m getting.
Look it turned ugly but it worked.
If anyone had any idea how to make this ugly thing better.
Each line of the <span> must have a unique identification for this. I recommend you put an ID that does not repeat and call it on the approve button. That way you will be calling only 1 single 'process'.
– Fabio Fila
@Fabiofila But there is a problem because these <span> will need to repeat themselves, they are inside a foreach, for every data I have in the database they repeat in html after.
– Wagner Viana