无法将内容附加到Sidr

Question

我使用的是西德尔，一个提供侧菜单的jQuery插件。

我想做以下几件事：

1. 通过$.post()和json返回从数据库获取数据。Works
2. 将这些数据发布到我的Sidr菜单中。不工作！

当我执行脚本时会发生什么: Sidr菜单打开，但是var SHOPcontent content 在它的中找不到。

我甚至试着在打开Sidr菜单的同时运行一个alert(SHOPcontent)。警报成功:它显示var SHOPcontent的内容。那么为什么Sidr菜单不能显示它呢？

看看下面的代码，var SHOPcontent包含了我试图通过Sidr源代码选项回调放到我的Sidr菜单中的一堆html。

     product_tags.click(function() {

        $.sidr('toggle', 'shop_bar');               

        $.post("display_products_2.php", {'product_title_selected': product_title_selected}, function(display_shop) {

        var shop_array = $.parseJSON(display_shop);


        for ( c = 0; c <shop_array.length; c++)

                  {
                    var one_color =  "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>" 

                    var product_colors = product_colors + one_color;

                   }; 


        var one_color = "";

        var SHOPcontent =

                "<div id='shop_bar'>" +

                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +

                "<div id='shop_title'>" +

                "<span id='shop_brand'>" +

                 shop_array[0][2] +

                "</span>" +

                shop_array[0][4] +

                "</div>" +

                "<div id='shop_price'>" +

                shop_array[0][6] +

                "</div>" +

                "<div id='shop_picture'>" + 

                "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +

                "</div>" +

                "<div id='shop_description'>" +

                shop_array[0][5] +

                "</div>" +

                "<div id='more_product_information'>MORE INFORMATION</div>" +

                "<div id='shop_colors'>" +

                product_colors +

                "</div>" +

                "<div id='buy'>Buy</div>"  +

                "</div>"  ;

         });


   $('#shop_bar').sidr( {

                displace: false,
                name: 'shop_bar',
                source: function() {

                $('.sidr').html(SHOPcontent)

                } 

          });

寻找帮助指出我的代码出了什么问题。

Answer 1

因为sidr函数是从post success函数的外部调用的，所以sidr没有启动。试试看以下几点。确保这是在$(document).ready()函数中。

product_tags.click(function() {

  $.sidr('toggle', 'shop_bar');

  $.post("display_products_2.php", {
      'product_title_selected': product_title_selected
  }, function(display_shop) {
        var shop_array = $.parseJSON(display_shop);
        for (c = 0; c < shop_array.length; c++){
            var one_color = "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>"
            var product_colors = product_colors + one_color;
        };
        var one_color = "";
        var SHOPcontent = 
            "<div id='shop_bar'>" +
                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +
                "<div id='shop_title'>" +
                    "<span id='shop_brand'>" +
                        shop_array[0][2] +
                    "</span>" +
                    shop_array[0][4] +
                "</div>" +
                "<div id='shop_price'>" +
                    shop_array[0][6] +
                "</div>" +
                "<div id='shop_picture'>" +
                    "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +
                "</div>" +
                "<div id='shop_description'>" +
                    shop_array[0][5] +
                "</div>" +
                "<div id='more_product_information'>MORE INFORMATION</div>" +
                "<div id='shop_colors'>" +
                    product_colors +
                "</div>" +
                "<div id='buy'>Buy</div>" +
            "</div>";

        $('#shop_bar').sidr({
          displace: false,
          name: 'shop_bar',
          source: function() {
            $('.sidr').html(SHOPcontent)
          }
        });
    });
});

Answer 2

我认为您的问题是，当您通过回调注入内容时，您必须返回上述内容，如下所示：

HTML：

<button id="menu-toggle">Sidr me</button>

联署材料：

$('#menu-toggle').sidr({
    name: 'sidr-menu',
    source: function (name) {
        return '<h1>' + name + '</h1><ul>' +
            '<li>Foo</li>' +
            '<li>Bar</li>' +
            '<li>Baz</li>' +
           '</ul>';
    }
});

小提琴：

http://jsfiddle.net/tt8zjc79/2/

因此，在您的例子中，尝试重写回调如下：

$('#shop_bar').sidr({
    displace: false,
    name: 'shop_bar',
    source: function () {
        return SHOPcontent;
    }
});