web-dev-qa-db-fra.com

Case à cocher lors du filtrage sur la même page

Actuellement, je le fais avec la méthode GET. Je pense que je l'ai trop compliqué. Les cases à cocher Toutes les pages sont cochées et, lorsque les utilisateurs décochent cette case, une publication présentant cette taxonomie est filtrée. Mon code fonctionne actuellement et le voici:

Case à cocher de réglage cochée:

    $actual_link = "https://$_SERVER[HTTP_Host]$_SERVER[REQUEST_URI]";      
    if ( $actual_link == 'https://www.example.com/') {
        $var_check = 1;
    }

Cases à cocher:

    <form action="<?php echo get_permalink() ?>" method="GET" id="filter">      
        <input type='hidden' value='0' name='f'>
        <input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if ( ($face =='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite facebook" style="margin-left:5px;"> <span class="tooltiptext">Filter by Facebook</span></div><br>
        <input type='hidden' value='0' name='t'>
        <input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ( ($Twitter=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite Twitter2" style="margin-left:5px;"> <span class="tooltiptext">Filter by Twitter</span></div><br>
        <input type='hidden' value='0' name='te'>
        <input type="checkbox" name="te" value="1" onchange="this.form.submit()" <?php if ( ($telegram=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite telegram2" style="margin-left:5px;"><span class="tooltiptext">Filter by Telegram</span></div><br>   
        <input type='hidden' value='0' name='r'>
        <input type="checkbox" name="r" value="1" onchange="this.form.submit()" <?php if ( ($reddit=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite reddit" style="margin-left:5px;"> <span class="tooltiptext">Filter by Reddit</span></div><br>
        <input type='hidden' value='0' name='e'>
        <input type="checkbox" name="e" value="1" onchange="this.form.submit()" <?php if ( ($email=='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="Sprite email" style="margin-left:5px;"> <span class="tooltiptext">Flter by Email</span></div><br>
        <input type='hidden' value='0' name='ph'>
        <input type="checkbox" name="ph" value="1" onchange="this.form.submit()" <?php if ( ($phone=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite phone" style="margin-left:2px;"> <span class="tooltiptext">Filter by Phone</span></div><br>
        <input type='hidden' value='0' name='b'>
        <input type="checkbox" name="b" value="1" onchange="this.form.submit()" <?php if ( ($bitcointalk=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite bitcointalk" style="margin-left:3px;"> <span class="tooltiptext">Filter by BitcoinTalk</span></div><br>
        <input type='hidden' value='0' name='k'>
        <input type="checkbox" name="k" value="1" onchange="this.form.submit()" <?php if ( ($kyc=='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="Sprite kyc" style="margin-left:5px;"> <span class="tooltiptext">Filter by KYC</span></div><br>
        <input type='hidden' value='0' name='y'>
        <input type="checkbox" name="y" value="1" onchange="this.form.submit()" <?php if ( ($youtube=='1') || ($var_check == 1) ) {echo 'checked';}?>> <div class="Sprite youtube" style="margin-left:2px;"> <span class="tooltiptext">Filter by YouTube</span></div><br>
        <input type='hidden' value='0' name='l'>
        <input type="checkbox" name="l" value="1" onchange="this.form.submit()" <?php if ( ($linkedin=='1') || ($var_check == 1) )  {echo 'checked';}?>><div class="Sprite linkedin" style="margin-left:5px;"> <span class="tooltiptext">Flter by LinkedIn</span></div><br>
        <input type='hidden' value='0' name='eth'>
        <input type="checkbox" name="eth" value="1" onchange="this.form.submit()" <?php if ( ($ethereum =='1')  || ($var_check == 1) ) {echo 'checked';}?>><div class="ethereum" style="margin-left:5px;">ETH<span class="tooltiptext">Filter by Ethereum</span></div><br>
        <input type='hidden' value='0' name='neo'>
        <input type="checkbox" name="neo" value="1" onchange="this.form.submit()" <?php if ( ($neo =='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="neo" style="margin-left:5px;">NEO<span class="tooltiptext">Filter by NEO</span></div><br>
        <input type='hidden' value='0' name='xml'>
        <input type="checkbox" name="xml" value="1" onchange="this.form.submit()" <?php if ( ($stellar =='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="stellar" style="margin-left:5px;">XML<span class="tooltiptext">Filter by Stellar</span></div><br>
        <input type='hidden' value='0' name='waves'>
        <input type="checkbox" name="waves" value="1" onchange="this.form.submit()" <?php if ( ($waves =='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="waves" style="margin-left:5px;">WAVES<span class="tooltiptext">Filter by Waves</span></div><br>
        <input type='hidden' value='0' name='kmd'>
        <input type="checkbox" name="kmd" value="1" onchange="this.form.submit()" <?php if ( ($komodo =='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="komodo" style="margin-left:5px;">KMD<span class="tooltiptext">Filter by Komodo</span></div><br>
        <input type='hidden' value='0' name='own'>
        <input type="checkbox" name="own" value="1" onchange="this.form.submit()" <?php if ( ($own =='1') || ($var_check == 1) ) {echo 'checked';}?>><div class="own" style="margin-left:5px;">OWN<span class="tooltiptext">Filter by Own chain</span></div><br>
        <input type="hidden" name="action" value="req">
    </form>

Voici comment obtenir les variables:

    if ( isset($_GET['f']) && $_GET['f'] == '1') {$face='1';} elseif ( !isset($_GET['f']) ) {$face = '0'; }  else {$face='facebook';}
    if ( isset($_GET['t']) && $_GET['t'] == '1' ) {$Twitter='1';} elseif ( !isset($_GET['t']) ) {$Twitter = '0'; } else {$Twitter='Twitter';}
    if ( isset($_GET['te']) && $_GET['te'] == '1' ) {$telegram='1';} elseif ( !isset($_GET['te']) ) {$telegram = '0'; } else {$telegram='telegram';}
    if ( isset($_GET['r']) && $_GET['r'] == '1' ) {$reddit='1';} elseif ( !isset($_GET['r']) ) {$reddit = '0'; } else {$reddit='reddit';}
    if ( isset($_GET['e']) && $_GET['e'] == '1' ) {$email='1';} elseif ( !isset($_GET['e']) ) {$email = '0'; } else {$email='email';}
    if ( isset($_GET['ph']) && $_GET['ph'] == '1' ) {$phone='1';} elseif ( !isset($_GET['ph']) ) {$phone = '0'; } else {$phone='phone';}
    if ( isset($_GET['b']) && $_GET['b'] == '1' ) {$bitcointalk='1';} elseif ( !isset($_GET['b']) ) {$bitcointalk = '0'; } else {$bitcointalk='bitcointalk';}
    if ( isset($_GET['k']) && $_GET['k'] == '1' ) {$kyc='1';} elseif ( !isset($_GET['k']) ) {$kyc = '0'; } else {$kyc='kyc';}
    if ( isset($_GET['y']) && $_GET['y'] == '1' ) {$youtube='1';} elseif ( !isset($_GET['y']) ) {$youtube = '0'; } else {$youtube='youtube';}
    if ( isset($_GET['l']) && $_GET['l'] == '1' ) {$linkedin='1';} elseif ( !isset($_GET['l']) ) {$linkedin = '0'; } else {$linkedin='linkedin';}           
    if ( isset($_GET['eth']) && $_GET['eth'] == '1' ) {$ethereum='1';} elseif ( !isset($_GET['eth']) ) {$ethereum = '0'; } else {$ethereum='ethereum';}
    if ( isset($_GET['neo']) && $_GET['neo'] == '1' ) {$neo='1';} elseif ( !isset($_GET['neo']) ) {$neo = '0'; } else {$neo='neo';}
    if ( isset($_GET['xml']) && $_GET['xml'] == '1' ) {$stellar='1';} elseif ( !isset($_GET['xml']) ) {$stellar = '0'; } else {$stellar='stellar';}
    if ( isset($_GET['waves']) && $_GET['waves'] == '1' ) {$waves='1';} elseif ( !isset($_GET['waves']) ) {$waves = '0'; }  else {$waves='waves';}
    if ( isset($_GET['kmd']) && $_GET['kmd'] == '1' ) {$komodo='1';} elseif ( !isset($_GET['kmd']) ) {$komodo = '0'; } else {$komodo='komodo';}
    if ( isset($_GET['own']) && $_GET['own'] == '1' ) {$own='1';} elseif ( !isset($_GET['own']) ) {$own = '0'; } else {$own='own';}

Et enfin la requête:

    $tax_query_args[] = array(                  
     'relation' => 'AND',                   
     array(
        'taxonomy' => 'filters',
        'field'    => 'slug',
        'terms'    => array ($face, $Twitter, $telegram, $reddit, $email, $phone, $bitcointalk, $kyc, $youtube, $linkedin),
        'relation' => 'AND',
        'operator' => 'NOT IN'
         ),                         
    array(
        'taxonomy' => 'platform',
        'field'    => 'slug',
        'terms'    => array ($ethereum, $neo, $stellar, $waves, $komodo, $own),
        'relation' => 'AND',
        'operator' => 'NOT IN'
         ),                     
    );

Cela fonctionne actuellement et j'obtiens le résultat souhaité. Mais comment faire avec la méthode POST sur la même page, de sorte que l'URL ne soit pas modifiée avec des paramètres. Je suppose que je vais devoir utiliser AJAX, mais je n'en ai pas l'habitude.

J'apprécierai toute aide ou conseils.

Je vous remercie.

custom-taxonomyquery
1
Ante Medic

Essayez ce script:

Mais avant cela, la form 's method devrait rester comme GET. Et dans le balisage form/HTML, supprimez la onchange="this.form.submit()" de tous les champs checkbox. Ajoutez ensuite un bouton de soumission standard au formulaire. Exemple:

<input type="submit" value="Go" />

[EDIT] Le bouton d'envoi n'est pas nécessaire. J'ai mis à jour le script afin que, lors de la sélection d'un filtre (c'est-à-dire "la vérification" d'une checkbox), la demande AJAX soit automatiquement déclenchée.

Ensuite, assurez-vous d’attribuer un ID unique aux publications/result div ou au conteneur. Pour cet exemple, l'ID est my-unique-ID. (Ce conteneur doit pas inclure le formulaire de filtre.)

Maintenant, voici le script:

<script>
jQuery( function( $ ){
    function ajaxFilter() {
        var $form = $( 'form#filter' );

        // Disable the submit button and then remove its focus.
        $form.find( ':submit' ).prop( 'disabled', true ).blur();

        // Make sure to change my-unique-ID to the correct value.
        $( '#my-unique-ID' ).load(
            $form.attr( 'action' ) + ' #my-unique-ID',
            $form.serialize(),
            function(){
                // Enable the submit button once AJAX is complete.
                $form.find( ':submit' ).prop( 'disabled', false );
            }
        );
    }

    // Run the AJAX request upon submitting the form.
    $( 'form#filter' ).on( 'submit', function( e ){
        e.preventDefault();

        ajaxFilter();
    } );

    // Run the AJAX request upon selecting a filter; i.e. "checking" a checkbox.
    $( ':checkbox', 'form#filter' ).on( 'change', function(){
        ajaxFilter();
    } );
} );
</script>

Vous pouvez ajouter le script après le conteneur posts/result, ou avant la balise </body> de clôture, ou à tout autre endroit que vous jugez approprié (ce qui signifie que jQuery doit déjà avoir été chargé).

J'espère que cela vous aidera et faites-le moi savoir si vous avez besoin d'une aide supplémentaire.

0
Sally CJ