javascript - 评分小部件未显示在 ajax 调用中

Question

我的问题是，当我使用 ajax 函数进行搜索和过滤时，我使用的星级评分插件 ( http://rating-widget.com/) 没有显示。

当页面首次加载其工作正常时，星级评级显示

但是当我使用过滤器和搜索功能时，星级评分消失了。这张图片是当我在下拉列表中选择动机时

这是主页的代码，其中包含图像、搜索和过滤功能

    <div id="div-search" class="wow fadeInDown">
        <div class="form-group inline-buttons">
            <div>
                <div class="input-group">
                     <span class="input-group-addon" style="min-width:150px;">Search</span>
                     <input type="text" name="search_text" id="search_text" placeholder="Search for name or topic" class="form-control"/>

                </div>
            </div>
        </div>

        <div class="input-group">
            <span class="input-group-addon" style="min-width:150px;">Filter</span>
                <select name="sortdrpdwn" id="sortdrpdwn" class="form-control" style="width:100%;">
                    <option value="all">All</option>
                    <option value="motivational">Motivational</option>
                    <option value="technology">Technology</option>
                    <option value="business">Business</option>
                    <option value="leadership">Leadership</option>
                    <option value="innovation">Sales</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="healthcare">Health Care</option>
                </select>
        </div>
    <br>
    <div id="order_table" style="overflow-x:auto;"></div>  

<script>
$(document).ready(function()
{
    $('#sortdrpdwn').change(function()
    {
        var sortdrpdwn = $('#sortdrpdwn').val();  

            $.ajax({  
            url:"filterSp.php",  
            method:"POST",  
            data:{filter:sortdrpdwn},  
            success:function(data)  
            {  
               $('#order_table').html(data);  
            }  
            });  

    });

});
</script>

<script>
$(document).ready(function()
{
    $('#search_text').keyup(function()
    {
        var searchtext = $('#search_text').val();


            $.ajax({  
            url:"searchSp.php",  
            method:"POST",  
            data:{search:searchtext},  
            success:function(data)  
            {  
               $('#order_table').html(data);  
            }  
            });  


    });

});
</script>

<script>  
$(document).ready(function(){  
    load_data();  
    function load_data(page)  
    {   
    var sortdrpdwn = $('#sortdrpdwn').val(); 
    var searchtext = $('#search_text').val();

    if(searchtext != '')
    {
        $.ajax({  
        url:"searchSp.php",  
        method:"POST",  
        data:{search:searchtext},  
        success:function(data)  
        {  
           $('#order_table').html(data);  
        }  
        });  
    }
    else
    {
    $.ajax({  
        url:"filterSp.php",  
        method:"POST",  
        data:{filter:sortdrpdwn},  
        success:function(data)  
        {  
           $('#order_table').html(data);  
        }  
        });
    }           
    }  


});  
</script>  

filterSp.php 这是我使用过滤器下拉列表时调用的 php 文件，里面是用于星级评分的插件 java 脚本。

  <?php  

        error_reporting(E_ALL & ~E_NOTICE);
        error_reporting(E_ERROR | E_PARSE);

        $connect = mysqli_connect("localhost", "root", "", "srdatabase");  

        if(isset($_POST['search_text']))
        {
            $search = mysqli_real_escape_string($connect, $_POST["search"]);

            $query = "
            SELECT * FROM speakers 
            WHERE speaker_fullname LIKE '%".$search."%'
            OR speaker_specialization1 LIKE '%".$search."%'
            OR speaker_specialization2 LIKE '%".$search."%'
            OR speaker_specialization3 LIKE '%".$search."%'
            OR speaker_specialization4 LIKE '%".$search."%'
            OR speaker_specialization5 LIKE '%".$search."%'
            ";  
        }

        else
        {
            $filter = mysqli_real_escape_string($connect, $_POST["filter"]);

            if($filter == "all")
            {
                $query = "SELECT * FROM speakers";  
            }

            else if($filter == "motivational")
            {   
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'motivational' OR speaker_specialization2 = 'motivational' OR speaker_specialization3 = 'motivational' ";  
            }

            else if($filter == "technology")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'technology' OR speaker_specialization2 = 'technology' OR speaker_specialization3 = 'technology' ";  
            }   

            else if($filter == "business")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'business' OR speaker_specialization2 = 'business' OR speaker_specialization3 = 'business' ";
            }

            else if($filter == "leadership")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'leadership' OR speaker_specialization2 = 'leadership' OR speaker_specialization3 = 'leadership' ";
            }

            else if($filter == "innovation")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'innovation' OR speaker_specialization2 = 'innovation' OR speaker_specialization3 = 'innovation' ";
            }

            else if($filter == "entertainment")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'entertainment' OR speaker_specialization2 = 'entertainment' OR speaker_specialization3 = 'entertainment' ";
            }

            else if($filter == "healthcare")
            {
                $query = "SELECT * FROM speakers WHERE speaker_specialization1 = 'healthcare' OR speaker_specialization2 = 'healthcare' OR speaker_specialization3 = 'healthcare' ";   
            }
        }   
            $result = mysqli_query($connect, $query);  


            if(mysqli_num_rows($result) > 0)   
            {  
                    while ($array = mysqli_fetch_array($result)) 
                    { 
                            $output .= '  
                                 <a href="speakerProfile.php?id='.$array["id"].'">
                                <div class="col-sm-6 col-md-4 wow fadeInDown">
                                    <div class="thumbnail"><img class="speakers-image" src="img/'.$array["speaker_image"].'" style="height:220px; min-width:100%;"/>
                                    <div class="caption" style="height:150px; min-width:100%" >
                                        <center>
                                        <h3 class="speakers-name">'.$array["speaker_fullname"].'</h5>
                                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization1"].'</p> 
                                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization2"].'</p>
                                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization3"].'</p>
                                        <br><br>
                                      //The div where the star rating will show
                                        <div class="rw-ui-container" data-urid='.$array["id"].'></div>
                                        </center>
                                    </div>
                                    </div>
                                </div>
                                </a>
                            ';  
                    }  
            }
            echo $output;  
         ?>
// Star rating javascript        
         <script type="text/javascript">(function(d, t, e, m){

            // Async Rating-Widget initialization.
            window.RW_Async_Init = function(){

                RW.init({
                    huid: "374760",
                    uid: "43310efaa801e10e1e02debca5f5b237",
                    source: "website",
                    options: {
                        "size": "medium",
                        "style": "oxygen",
                        "isDummy": false
                    } 
                });
                RW.render();
            };
                // Append Rating-Widget JavaScript library.
            var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
                l = d.location, ck = "Y" + t.getFullYear() + 
                "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
                f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
                a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
            if (d.getElementById(id)) return;              
            rw = d.createElement(e);
            rw.id = id; rw.async = true; rw.type = "text/javascript";
            rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
            s.parentNode.insertBefore(rw, s);
            }(document, new Date(), "script", "rating-widget.com/"));
        </script>

searchSp.php 这是我使用搜索功能时调用的 php 文件，里面是用于星级评定的插件 java 脚本。

<?php  

error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);

$connect = mysqli_connect("localhost", "root", "", "srdatabase");   

    $search = mysqli_real_escape_string($connect, $_POST["search"]);

    $query = "
    SELECT * FROM speakers 
    WHERE speaker_fullname LIKE '%".$search."%'
    OR speaker_specialization1 LIKE '%".$search."%'
    OR speaker_specialization2 LIKE '%".$search."%'
    OR speaker_specialization3 LIKE '%".$search."%'
    ";  

    $result = mysqli_query($connect, $query);  


    if(mysqli_num_rows($result) > 0)   
    {  
        while ($array = mysqli_fetch_array($result)) 
        { 
                $output .= '  
                     <a href="speakerProfile.php?id='.$array["id"].'">
                    <div class="col-sm-6 col-md-4 wow fadeInDown">
                        <div class="thumbnail"><img class="speakers-image" src="img/'.$array["speaker_image"].'" style="height:220px; min-width:100%;"/>
                        <div class="caption" style="height:220px;>
                            <center>
                            <h3 class="speakers-name speaker-topics">'.$array["speaker_fullname"].'</h5>
                            <p class="speakers-name speaker-topics">'.$array["speaker_specialization1"].'</p> 
                            <p class="speakers-name speaker-topics">'.$array["speaker_specialization2"].'</p>
                            <p class="speakers-name speaker-topics">'.$array["speaker_specialization3"].'</p>
                            <br><br>

                            <div class="rw-ui-container" data-urid='.$array["id"].'></div>
                            </center>
                        </div>
                        </div>
                    </div>
                    </a>
                ';  
           }  
    }
    echo $output;  
 ?>


 <script type="text/javascript">(function(d, t, e, m){

    // Async Rating-Widget initialization.
    window.RW_Async_Init = function(){

        RW.init({
            huid: "374760",
            uid: "43310efaa801e10e1e02debca5f5b237",
            source: "website",
            options: {
                "size": "medium",
                "style": "oxygen",
                "isDummy": false
            } 
        });
        RW.render();
    };
        // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
        l = d.location, ck = "Y" + t.getFullYear() + 
        "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
        f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
        a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
    }(document, new Date(), "script", "rating-widget.com/"));</script>

Answer 1

在 searchSp.php 中，您没有将评级脚本传递给 ajax 响应。

就像我在评论中所说的那样，您可以使用 sdk，如果是这样就不需要 javascript，您的 searchSp.php 会像

<?php  

error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
    // Use API site scope.
define('RW_SDK__API_SCOPE', 'site');

// Modify the following definitions to your site details.
define('RW_SDK__SITE_ID',         '__YOUR_SITE_ID__');
define('RW_SDK__SITE_PUBLIC_KEY', '__YOUR_SITE_PUBLIC_KEY__');
define('RW_SDK__SITE_SECRET_KEY', '__YOUR_SITE_SECRET_KEY__');

// Include RatingWidget's SDK.
require dirname(__ROOT__) . '/ratingwidget.php';

// Init SDK with your site details (assumes that the SDK located in same folder of this example).
$rw_api = new \RatingWidget\Api\Sdk\RatingWidget(
    RW_SDK__API_SCOPE,
    RW_SDK__SITE_ID,
    RW_SDK__SITE_PUBLIC_KEY,
    RW_SDK__SITE_SECRET_KEY
);

$item_id = $array["id"]; // Replace that with your rating id.

// If you want the rating to work with Rich-Snippets,
// set the rating class to one of the following values:
//     product, page, blog-post, post, front-post, item
$rating_class = 'product';  
$connect = mysqli_connect("localhost", "root", "", "srdatabase");   

$search = mysqli_real_escape_string($connect, $_POST["search"]);

$query = "
SELECT * FROM speakers 
WHERE speaker_fullname LIKE '%".$search."%'
OR speaker_specialization1 LIKE '%".$search."%'
OR speaker_specialization2 LIKE '%".$search."%'
OR speaker_specialization3 LIKE '%".$search."%'
";  

$result = mysqli_query($connect, $query);  


if(mysqli_num_rows($result) > 0)   
{  
    while ($array = mysqli_fetch_array($result)) 
    { 
            $output .= '  
                 <a href="speakerProfile.php?id='.$array["id"].'">
                <div class="col-sm-6 col-md-4 wow fadeInDown">
                    <div class="thumbnail"><img class="speakers-image" src="img/'.$array["speaker_image"].'" style="height:220px; min-width:100%;"/>
                    <div class="caption" style="height:220px;>
                        <center>
                        <h3 class="speakers-name speaker-topics">'.$array["speaker_fullname"].'</h5>
                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization1"].'</p> 
                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization2"].'</p>
                        <p class="speakers-name speaker-topics">'.$array["speaker_specialization3"].'</p>
                        <br><br>
                         <div class="rw-ui-container rw-class-'. 
                           $rating_class .' rw-urid-'. $item_id.'">
                          </div>'.
                         $rw_api->EchoAggregateRating($item_id).'
                        </center>
                    </div>
                    </div>
                </div>
                </a>
            ';  
       }  
}
echo $output;  
?>

参见 this ->