pg_basebackup
кажется лучшим способом сделать это сейчас, особенно для больших баз данных.
Возникла похожая проблема и вместо этого использовалась следующая строка (преобразованная для вашего кода). Извините, я не помню, где я его нашел.
В вашем коде замените это:
jQuery("#content").append(el).masonry( 'appended', el, true );
этим:
jQuery("#content").append(el).masonry( 'reload' );
Похоже, что функция masonry
ожидает объект jQuery в качестве второго параметра, а не необработанную строку HTML. Вы сможете исправить это, добавив параметр обратного вызова success следующим образом:
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
if (html.length > 0) {
var el = jQuery(html);
jQuery("#content").append(el).masonry( 'appended', el, true );
}
});
});
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
columnWidth: '210px',
itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
success: function (response) {
if(response.length > 0) {
var el = js(response);
setTimeout(function () {
js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
}, 500);
}
}
отлично работает для меня.
Следующее сработало для меня. У меня есть AJAX, который возвращает набор элементов HTML (возвращает частичное представление из AJAX), когда я нажимаю кнопку «Загрузить еще» на моей веб-странице. Ниже приведено частичное представление, которое генерируется динамически.
foreach (var item in Model.SocialFeedList)
{
<div class="grid-item">
<div class="grid-inner">
<div class="img-holder" style="background-image:url(imageURLHere)">
</div>
<div class="content-area">
<h3><a target="_blank" href="SomeLink">TitleOfTheLink</a></h3>
<p>SomeDescription</p>
<h5 class="date"><span>Published</span>: 2016/07/13</h5>
</div>
</div>
</div>
}
В методе ajax при успешном обратном вызове я сделал следующее, где «response» - это набор элементов HTML Я получаю из вышеупомянутого HTML. Где "divFeedList" является корневым элементом, где я показываю набор HTML-элементов.
jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();
Пожалуйста, дайте мне знать, если ответ неясен.
Я добавил следующий код после команды append
, и все было в порядке:
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
Причина:
Загруженные изображения могут скинуть макеты масонства и вызвать предмет элементы для перекрытия. imagesLoaded решает эту проблему. imagesLoaded - это отдельный скрипт, который вы можете скачать по адресу imagesloaded.desandro.com.
Вы пропустили вызов макетного масонства. В соответствии с документами вам необходимо обновить макет, выполняя .masonry()
после каждого изменения (например, .masonry('appended')
):
$grid.masonry()
.append(elem)
.masonry('appended', elem)
// layout
.masonry();
(источник: http://masonry.desandro.com /methods.html)
У меня была та же проблема с моим списком ajax, я мог решить ее, позвонив по номеру reloadItems
& amp; layouts
функции после ответа ajax:
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
columnWidth: '210px',
itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
Это решение работает для меня: -
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
dataType: 'json',
cache: false,
success: function(response) {
if (response.length > 0) {
var $container = $('#container');
var msnry = $container.data('masonry');
var elems = [];
var fragment = document.createDocumentFragment();
for (var x in response) {
var elem = $(response[x]).get(0);
fragment.appendChild(elem);
elems.push(elem);
}
$container.appendChild(fragment);
msnry.appended(elems);
}
}
});
Просто для будущих людей, которые находят эту проблему, и вышеуказанные решения не работают для них: я обнаружил проблему с моим селектором и добавленным элементом, который не имеет такой же случай, т.е. был добавлен <div class="card">
.
Надеюсь, это поможет.
это ясно объяснено здесь https://masonry.desandro.com/methods.html#prepended
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
if (html.length > 0) {
jQuery("#content").append(html).masonry( 'appended', html, true );
}
});
});
в вашем success function
, вам нужен ваш ответ "html «быть завернутым в jquery object
и затем добавить с помощью html()
или append()
.
var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );
окончательный код должен быть
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
if (html.length > 0) {
var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );
}
});
});
Для Masonry v3.2.2 (последняя на момент написания этой статьи) это то, что работает:
Предполагая, что newHtml является строкой, подобной этой:
<li>item 1</li><!--split-->
<li>item 2</li><!--split-->
<li>item 3</li>
Вы обрабатываете ее как это:
$.get(apiUrl, function(newHtml) {
var textArr = newHtml.split("<!--split-->");
var elArr = [];
$.each(textArr, function(i,v) {
if (v) {
elArr.push($(v)[0]);
}
});
$(this).append(elArr);
$container.waitForImages( function() {
$container.masonry('appended', elArr);
});
}
У меня ушло 2 часа, чтобы узнать это!
Я нашел решение, которое отлично работает для меня. каждые полсекунды перезагружается макет экземпляра каменной кладки.
//initialization of a masonry object:
var msnry = new Masonry("#container",{
itemSelector: '#post',
gutter: 15
});
//thread that makes the magic happens:
setInterval(function(){
msnry.reloadItems();
msnry.layout();
},500);
Таким образом, вы можете добавлять вещи, используя ajax, и вуаля, есть макет кладки.