Odwróć lub ukryj jQuery ajax dla wyników pola wyboru danych wejściowych
Nie mam dobrej wiedzy na temat jquery, więc mam kod działający dobrze, ale ich problemem jest ukrycie wyniku po odznaczeniu pola wyboru. (Zaznacz, aby uzyskać wyniki z bazy danych - odznacz ukryj te wyniki)
kod catfd.php
<input type="checkbox" value="2" class="catcf"> catfd2 <br />
<input type="checkbox" value="35" class="catcf"> catfd35 <br />
<input type="checkbox" value="22" class="catcf"> catfd22 <br />
<input type="checkbox" value="133" class="catcf"> catfd133 <br />
<input type="checkbox" value="28" class="catcf"> catfd28 <br />
<input type="checkbox" value="33" class="catcf"> catfd33 <br />
<input type="checkbox" value="55" class="catcf"> catfd55 <br />
<input type="checkbox" value="44" class="catcf"> catfd44 <br />
<div class="main-area-courses-continer">
<!-- here will echo the results -->
</div>
Kod jquery ajax pobiera wynik ze strony PHP „getvalue.php”
if(isset($_POST['catcf'])){ ?> <div class="main-area-courses-continer" > <?php $catcfid= $_POST['catcf']; $sql = 'SELECT * FROM tablename where cat_id = '.$catcfid.' order by p_id asc'; $catandproid = $wpdb->get_results($sql);
foreach($catandproid as $key){
/////////////////////////////////Updates
?>
<div class="<?php echo $catcfid; ?>" > <?php echo $key->title;
?>
</div><!-- End of Continer catcfid -->
<?php
////////////////////////////////////////////
}
}
?>
</div>
a jest kodem AJAX JQuery
$(document).ready(function() { $(".catcf").on('click', function() {
if ($('input.catcf').is(':checked')) { var catcf = Number($(this).val());
$.ajax({ url: 'getvalue.php', type: 'post', data: { catcf: catcf }, beforeSend: function() { $(".main-area-courses-continer").html("Looding....");
},
success: function(response) {
// Setting little delay while displaying new content
setTimeout(function() {
// appending posts after last post with class="post"
$(".main-area-courses-continer:last").after(response).show().fadeIn("slow"); $(".main-area-courses-continer").html("");
}, 2000);
}
});
}
});
});
Odpowiedzi
Możesz sprawdzić, czy element div z class="catcfid"
istniejącym elementem DOM, czy nie, $(".main-area-courses-continer > ." + catcf).length == 0
jeśli jego długość wynosi, 0
oznacza, że nie ma takiego elementu div, a następnie możesz wysłać żądanie AJAX, aby przenieść to z zaplecza, w przeciwnym razie po prostu pokaż ten element div używając $("." + catcf).parent().show();
else if unchecked
hide ten element div używając $("." + catcf).parent().show();
.
Kod demonstracyjny :
$(document).ready(function() {
$(".catcf").on('click', function() { var catcf = Number($(this).val());
if ($(this).is(':checked')) { //check if the div with class catcf is not there if ($(".main-area-courses-continer > ." + catcf).length == 0) {
/*.ajax({
url: 'getvalue.php',
type: 'post',
data: {
catcf: catcf
},
beforeSend: function() {
$(".main-area").html("Looding...."); }, success: function(response) {*/ setTimeout(function() { //$(".main_container:last").after(response).show().fadeIn("slow");
//dummy data append ..
$(".main_container:last").after('<div class="main-area-ourses-continer"><div class="' + catcf + '">catfd' + catcf + ' data....</div> </div>') $(".main-area").html("")//empty loading ..
}, 100);
/*
});*/
} else {
//show that class
$("." + catcf).parent().show(); } } else { //hide that class means unchecked $("." + catcf).parent().hide()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="2" class="catcf" checked> catfd2 <br />
<input type="checkbox" value="35" class="catcf"> catfd35 <br />
<input type="checkbox" value="22" class="catcf" checked> catfd22 <br />
<input type="checkbox" value="133" class="catcf"> catfd133 <br />
<input type="checkbox" value="28" class="catcf"> catfd28 <br />
<input type="checkbox" value="33" class="catcf"> catfd33 <br />
<input type="checkbox" value="55" class="catcf" checked> catfd55 <br />
<input type="checkbox" value="44" class="catcf"> catfd44 <br /> Datas :
<!--put this div for loading separtely-->
<div class="main-area"></div>
<div class="main_container">
<div class="main-area-courses-continer">
<div class="2">
catfd2 data....
</div>
</div>
<div class="main-area-courses-continer">
<div class="22">
catfd22 data....
</div>
</div>
<div class="main-area-courses-continer">
<div class="55">
catfd55 data....
</div>
</div>
</div>
Po prostu zmień QUERY i myślę, że w tym problem
$sql = 'SELECT * FROM tablename Where cat_id = '.$catcfid.' And status = '1' order by p_id ASC';