test.js

define(function(require) {
  var ITEM_TEMPLATE = "<article class='item added'><h1 class='font-gamma'>{{number}}</h1><p>{{content}}</p></article>";

  var paragraph_list = [
    "Poi ch'ei posato un poco il corpo lasso, ripresi via per la piaggia diserta, sì che 'l piè fermo sempre era 'l più basso.",
    "Ed ecco, quasi al cominciar de l'erta, una lonza leggiera e presta molto, che di pel macolato era coverta;",
    "e non mi si partia dinanzi al volto, anzi 'mpediva tanto il mio cammino, ch'i' fui per ritornar più volte vòlto.",
    "Temp'era dal principio del mattino, e 'l sol montava 'n sù con quelle stelle ch'eran con lui quando l'amor divino",
    "mosse di prima quelle cose belle; sì ch'a bene sperar m'era cagione di quella fiera a la gaetta pelle"
  ];

  var itemCount = 7;

  function add_post(mode) {
    var paragraph = paragraph_list.splice(0, 1);
    var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) {
        switch (g1) {
          case 'number':
            return ++itemCount;
          break;
          case 'content':
            return paragraph;
          break;
        }
    });
    var item = document.createElement('article');

    salvattore[mode+'_elements'](grid, [item]);

    item.outerHTML = content;

    if (!paragraph_list.length) {
      buttonBlock.classList.add('hide');
    }
  }

  function prepend_post (event) {
    add_post('prepend');
  }

  function append_post (event) {
    add_post('append');
  }

  var salvattore = require('salvattore');

  var grid = document.querySelector('.test-grid-b');
  var prependButton = document.querySelector('.post-prepend');
  var appendButton = document.querySelector('.post-append');
  var buttonBlock = document.querySelector('#js-button-block');

  appendButton.addEventListener('click', append_post);
  prependButton.addEventListener('click', prepend_post);
});

this example on the main http://salvattore.com/ page shows it appending items to different columns, when i implement similar code it only appends to 1 column, the first one, how can I change this? what's causing this issue?

this example on the main http://salvattore.com/ page shows it appending items to different columns, when i implement similar code it only appends to 1 column, the first one, how can I change this? what's causing this issue?

I'd like to second that - appending only seems to add to the first column. Please can you Advise?

I'd like to second that - appending only seems to add to the first column. Please can you Advise?

To clarify, what i didn't find clear in an otherwise excellent plugin, was that the 2nd parameter is an array with one item [item]

See line 28 on the code base
salvattore[mode+'_elements'](grid, [item]);

to make subsequent ones appear on button click I had to push elements to the array and when i updated the salvattore method with teh new array , it would update the columns

Thanks for a great plugin anyway - v useful

To clarify, what i didn't find clear in an otherwise excellent plugin, was that the 2nd parameter is an array with one item [item]

See line 28 on the code base
salvattore[mode+'_elements'](grid, [item]);

to make subsequent ones appear on button click I had to push elements to the array and when i updated the salvattore method with teh new array , it would update the columns

Thanks for a great plugin anyway - v useful

I had a weird issue with salvattore.min.js version on safari browser. Everything is working fine in other browsers with min version.

When using safari and min version for some reason I got the following error:

TypeError: 'undefined' is not an object (evaluating 'b[e].children.length')

it was driving me crazy until I switch to the non minified version.

I had a weird issue with salvattore.min.js version on safari browser. Everything is working fine in other browsers with min version.

When using safari and min version for some reason I got the following error:

TypeError: 'undefined' is not an object (evaluating 'b[e].children.length')

it was driving me crazy until I switch to the non minified version.

Hey Everyone - I also has some trouble with this one. The code below works well to iterate over multiple elements in one event, and for me it's distributing across my columns. "response" is an html string in this case.

var grid = document.querySelector('#grid');

jQuery(response).each( function(index, element) {
    var item = document.createElement('article');
    salvattore['append_elements'](grid, [item]);
    jQuery(item).html(element);
});

Hey Everyone - I also has some trouble with this one. The code below works well to iterate over multiple elements in one event, and for me it's distributing across my columns. "response" is an html string in this case.

var grid = document.querySelector('#grid');

jQuery(response).each( function(index, element) {
    var item = document.createElement('article');
    salvattore['append_elements'](grid, [item]);
    jQuery(item).html(element);
});

For everyone who are facing the problem of dynamic elements appending to the same column (say 1st column as reported in above comments), here is what you might be doing wrong -

• You might be using all the elements together as the item variable value.
• Doing so, salvattore thinks that whole item variable is one single element and it goes ahead and appends to one single column.

Here is what you should be doing -

• Return json encoded array of elements from the server as the ajax json response.
• In the success function of the jQuery ajax, parseJSON the encoded json array (which will convert the json string back to JS array)
• Loop through each element in the JS array using jQuery.each();
• Inside the loop, do the salvattore append/prepend stuff.

Here is my jQuery AJAX success function -

success: function(data) {
    var cards = jQuery.parseJSON(data.cards);
    jQuery.each(cards, function(index, value){
        var item = document.createElement('div');
        var grid = document.querySelector('#divDataboxWrapper');
        salvattore['append_elements'](grid, [item]);
        item.outerHTML = value;     
    });
 }

Thanks guys, for this awesome Library. Happy Coding.

For everyone who are facing the problem of dynamic elements appending to the same column (say 1st column as reported in above comments), here is what you might be doing wrong -

• You might be using all the elements together as the item variable value.
• Doing so, salvattore thinks that whole item variable is one single element and it goes ahead and appends to one single column.

Here is what you should be doing -

• Return json encoded array of elements from the server as the ajax json response.
• In the success function of the jQuery ajax, parseJSON the encoded json array (which will convert the json string back to JS array)
• Loop through each element in the JS array using jQuery.each();
• Inside the loop, do the salvattore append/prepend stuff.

Here is my jQuery AJAX success function -

success: function(data) {
    var cards = jQuery.parseJSON(data.cards);
    jQuery.each(cards, function(index, value){
        var item = document.createElement('div');
        var grid = document.querySelector('#divDataboxWrapper');
        salvattore['append_elements'](grid, [item]);
        item.outerHTML = value;     
    });
 }

Thanks guys, for this awesome Library. Happy Coding.