Cannot append content to Sidr

Question

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

I'm trying to do the following:

Get data from database through $.post() and a json return. Works
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.

Please describe how exactly posting content does not work. Do you see errors in console or broken html? Also you have a typo Slidr in you question heading. — Olga, Aug 13 '15 at 18:04
I edited my post. No broken html or errors in console. What happens is that the Sidr menu opens, but no content is found inside of it, when it should be displaying the variable contents. I tried an alert(var SHOPcontent) and that actually works (it displays the content as a pop-up - so what's wrong with Sidr? — blurgoon, Aug 13 '15 at 18:45

score 0 · Answer 1 · answered Aug 13 '15 at 18:02

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

thanks for the response. however, your solution didn't work as well. when I click the product tags the Sidr doesn't even come out. strange isn't it? — blurgoon, Aug 13 '15 at 18:34

score 0 · Answer 2 · answered Aug 14 '15 at 12:09

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

Cannot append content to Sidr

2 Answers2