Isotope not working after I replace a div - javascript

I have a jQuery post that replaces a div with updated products. The grid is formatted with isotope but I can't figure out how to make it re-format the grid after update.
$.post(url, function(data) {
$('#product_list').first().replaceWith(data.products);
}).always($('#product_list').isotope({
itemSelector: '.product-thumb-info-list'
}));
If I run the isotope() from console it will re-order the grid nicely so I guess it is firing too early.
How can I get it to apply to the grid immediately after the post function replaces the div?

Can you change on how you handle your always method to this instead:
$.post(url, function(data) {
$('#product_list').first().replaceWith(data.products);
}).always(function() {
$('#product_list').isotope({
itemSelector: '.product-thumb-info-list'
})
});

Related

How to use afterRender and rebuild from fullpage.js

I've read the documentation regarding afterRender from the fullpage.js github page. In my site I have content that is generated by AJAX in a particular div.
Example below
$("#fullpage").fullpage({
afterRender: {
// I don't know what to put here
}
});
$("#btn-generate-content").on("click", function() {
// Target the div
$.ajax({
url: "get_topic_content.php",
dataType: "json",
success: function(data) {
// Place the data in the div
}
});
});
With the code above, I'm generating a long paragraph and placing it into a div. Now I want my site to resize accordingly to the generated paragraph. How can I use reBuild() on the afterRender to target this particular div when it has finished rendering the content.
After get ajax content you should use $.fn.fullpage.rebuild() in a callback.
I don't see an action of placing html content.
It should be done in success function, and then you should call rebuild function.

Jquery LazyLoad not working on ajax generated images and outputted in tabs

I am using http://www.appelsiini.net/projects/lazyload but it is not working for an image result tabs that is generated by php loop and outputted using jquery ajax serializearray on bootstrap tabs. So I tried to put these codes in ajax success function and together with the output as but nothing worked.
$("#container").one("click", function() {
$("#container").load("images.html", function(response, status, xhr) {
$("img.lazy").lazyload();
});
});
Source: http://www.appelsiini.net/projects/lazyload/enabled_ajax.html
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
Source: Binding image lazy loading to new images inserted after ajax request
Thanks for the help!
Update
Part of the problem is found by setting the container. This code is added in ajax success function.
$("img.lazy").lazyload({
threshold : 100,
effect : "fadeIn",
container: $(".resulttab, .resulttab2")
});
$('.resulttab, .resulttab2').trigger('scroll');
Then this one is added in document ready function.
$(document).ready(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
})
Now the remaining problem is, the images in the other tab. The images don't load unless I scroll the page. I tried to trigger scroll when the tab is clicked but it didn't work. This is what I tried but both didn't work.
//Attempt one
$( "#display" ).on( "tabsbeforeload", function( event, ui ) {
$('.resulttab').trigger('scroll');
})
//Attempt two
function triggerscroll() {
$('.resulttab').trigger('scroll');
}

jquery select2 after ajax not working anymore

I have a simple select2 control on my site placed in a div. When the site loads, everything works fine. However, if the html content of the div "simpleDiv", where the Select2 is placed, is loaded with Ajax, the Select2 is not showing the results anymore when triggered.
That means, in this case the Select2 data is got from the Server, but never shown in the Select2.
And this all happens just when the "simpleDiv" html content is loaded with Ajax. Otherwise, everything works fine.
Can anyone help, please?
<div id='simpleDiv'>
<input type="hidden" id="MedikamentID" name="MedikamentID" class="fixed-width4" />
</div>
<script>
$('#MedikamentID').select2({
placeholder: "[Medikament]",
allowClear: true,
minimumInputLength: 2,
ajax: {
url: "/Medikament/List",
dataType: 'json',
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data };
}
}
});
</script>
Whenever you change things using .html() or .innerHTML, essentially, the DOM gets reconstructed and all the javascript events and properties attached to them is lost. But the fix is simple. Just call Select 2 again after you finished inserting the new HTML. So something like:
$.ajax("example.php").done(function(data){
$("#simpleDiv").html(data)
$("#MedikamentID").select2(...) //rebuild select2
})
I attached a jsfiddle to illustrate this:
http://jsfiddle.net/HT3rP/1/
If I got your question correct, you may be having a similar problem related to this stackoverflow problem
You could try something like this
$(document).on("ready", "#MedikamentID", function () {
$(this).select2({
// options go here
});
});

Masonry - How to shuffle items

I'm using the masonry script for one of my webpages.
This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.
Thank you for every help!
shuffle the items before they are rendered and displayed
Do the items have any JavaScript event listeners assigned to them.
If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:
creating an array that stores the markup of each individual masonry-item as HTML string.
Shuffle the array and
dump the array contents into the 'container'
A crude solution for sure. But, hope this gets the job done.

JS function doesn't work when AJAX request is done (Maybe a $(this) problem)

My site has a form which insert records in a database using ajax, at the same time, it "refreshes" a table also using AJAX in the same page showing this new record.
So I have the JS code
// New Record Div
$('button[type=submit]').click(function() {
// Read all the form content
var creditor = $('#selCreditor').val();
var reason = $('#txtReason').val();
var value = $('#txtValue').val();
var debtor = $('#selDebtor').val();
$.ajax({
type: 'POST',
url: 'index/insert/creditor/'+creditor+'/reason/'+reason+'/value/'+value+'/debtor/'+debtor,
success: function() {
$('#status').slideDown();
$('#latestRecords').fadeOut();
$.ajax({
type: 'POST',
url: 'index/latest',
success: function(html) {
$('#latestRecords').fadeIn();
$('#latestRecords').html(html);
}
});
}
});
return false;
});
Basically, it inserts a new record in the database, then on success, it requests a page which contains only the table and populate the div with the returned data. It's sort of a refresh when the data is submitted. Everything is done using AJAX.
I've uploaded the situation image for a better understanding. image
The Problem
Everything goes fine until you try to delete a "refreshed" table row. Without the AJAX (only press F5) I can delete any row I want through the delete button, but when I insert a row and the try to delete any row in the table won't do. This is the Delete button code
// TR Fading when deleted
$('.delete').click(function() {
$.ajax({
type: 'POST',
url: 'history/delete/id/'+$(this).attr('id')
});
$(this).closest('tr').fadeOut('slow', function() { $(this).remove(); });
$('#latest')
return false;
});
I suspect that the problem is $(this) which not refers to the delete button element once the table is refreshed, but I don't know how to fix it.
If the entire table is being reloaded then .click() wont work as it will have lost the elements it was applied to. Try using .live() instead.
e.g.
$('.delete').live('click',function(){...});
Also assign $(this) to a variable and use the variable instead, it can help make the code a bit clearer I think. e.g. var $deleteButton = $(this);
take a look at jquerys live, i think this is what you're looking for.
In addition to Nalums anwser, Who stated that you can use .live() — which will work even if you add dynamic elements through jQuery — you should instead use for most occasions the newer .delegate() (version added: 1.4.2)
Could be used in this fashion:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
Or check out api.jquery.com/delegate/ for more information.

Categories