-1

I've finally managed to get my live search in Wordpress working, but it only works when i directly call it in the class.

I want to put it in a shortcode, so i can call it on every page i want. But when i call the shortcode, my jquery/ajax is not working.

Constructor

    add_action( 'wp_ajax_schoenen_zoeken_shortcode_output', array($this, 'schoenen_zoeken_shortcode_output'));
    add_action( 'wp_ajax_nopriv_schoenen_zoeken_shortcode_output', array($this, 'schoenen_zoeken_shortcode_output'));
    add_action( 'wp_head', array($this, 'add_js' ));
    add_action( 'init', array($this, 'register_schoenen_shortcodes'));

Javascript:

    public function add_js() {
      ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "/wp-admin/admin-ajax.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>
<?php
}

Shortcode

 public function register_schoenen_shortcodes() {

       add_shortcode('schoenen_zoeken', array($this, 'schoenen_zoeken_shortcode_output'));

    }

PHP AND HTML

  public function schoenen_zoeken_shortcode_output() {
        global $wpdb;      

        if ($_POST) {
        $q = mysql_real_escape_string($_POST['search']);
        foreach ($wpdb->get_results("SELECT plaatsen FROM wp_plaatsen WHERE plaatsen LIKE '%$q%'") as $key => $row) {

            $plaatsnaam = $row->plaatsen;
            $b_plaatsnaam = '<strong>'.$q.'</strong>';
            $final_plaatsnaam = str_ireplace($q, $b_plaatsnaam, $plaatsnaam);
?>
           <div class="show" align="left">
               <span class="name"><?php echo $final_plaatsnaam; ?></span>
</div>
<?php

        }
   die();

        }

        ?>
<div class="schoen_zoeken_container">
            <div class="schoen_zoeken">
                <form action="" method="POST">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12">

                                <div class="zoeken">
                                <input type="text" class="search" id="searchid" name="search" placeholder="Zoek schoen" />
                                <div id="result">
                                </div>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
<?php
}
0

Your ShortCode callback method should take an atts parameter that stores the attributes passed to it from the do_shortcode call which is I am assuming how you are getting the $q parameter for the database query.

The callback method should also return instead of echo the output.

Without seeing any of the output/error messages I would say you'll need to create a different method for the shortcode. Perhaps one that outputs the search form that will trigger the ajax calls.

Take a look a the Shorcode API for details on creating the callback.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.