इनपुट चेकबॉक्स परिणामों के लिए jQuery ajax को उल्टा या छिपाएं

Nov 28 2020

मुझे jquery के बारे में अच्छी जानकारी नहीं है, इसलिए मेरे पास एक कोड अच्छा काम कर रहा है, लेकिन उनकी समस्या है, चेकबॉक्स को अनचेक करने पर परिणाम को छिपाने के लिए। (डेटाबेस से परिणाम प्राप्त करने के लिए चेक करें - इन परिणामों को अनचेक करें)

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>

jquery ajax कोड का परिणाम 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>

और 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);
        }
      });
    }
  });
});

जवाब

1 Swati Nov 29 2020 at 13:48

आप यह जांच कर सकते हैं कि यदि class="catcfid"आपके DOM में मौजूद div है या नहीं का उपयोग कर रहा है $(".main-area-courses-continer > ." + catcf).length == 0यदि लंबाई का 0अर्थ है कि ऐसी कोई div नहीं है तो आप ajax से अनुरोध कर सकते हैं कि बैकएंड से बस यह दिखाएं कि div का उपयोग करते हुए छिपाने के लिए $("." + catcf).parent().show();अन्य uncheckeddiv का उपयोग करें $("." + catcf).parent().show();

डेमो कोड :

$(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>

Ashikul Nov 29 2020 at 14:11

बस QUERY बदलें, और मुझे लगता है कि यह मुद्दा है

$sql = 'SELECT * FROM tablename Where cat_id = '.$catcfid.' And status = '1' order by p_id ASC';