Cannot append content to Sidr

Question

I'm using Sidr, a jQuery plugin that offers side menus.

I'm trying to do the following:

1. Get data from database through $.post() and a json return. Works

2. Post this data into my Sidr menu. Does not work!!!

What happens when I execute the script: the Sidr menu opens, but the var SHOPcontent content is not found inside it.

I even tried running an alert(SHOPcontent) alongside the opening of the Sidr menu. The alert is successful: it shows content of var SHOPcontent. So why can't the Sidr menu display it?

Check out my code below, var SHOPcontent contains the bunch of html I'm trying to put into my Sidr menu, through the Sidr source option callback.

     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)

                } 

          });

Looking for help in pointing out what's wrong with my code.

Answer 1

I think your problem is that when you inject content via callback you must return said content, like this:

HTML:

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

JS:

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

Fiddle:

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

So in your case try rewriting callback as follows:

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

Answer 2

Because the sidr function were being called from out side of the post success function, the sidr was not initiating. Try the following. Make sure this is in $(document).ready() function.

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