0

I'm working with Tumblr documentation to make it so when the page theme loads a certain post (ask posts in this case), it appends the html of that post into a separate fixed div that acts like a "chatLog" or sorts that continuously loads those posts as new messages as they show up (because infinite scrolling that continuously loads new posts is being considered here instead of pagination). Since I have infinite scrolling enabled, I can't simply use page onload or .each here, and can't figure out what to use other than $('.ask').ready()

Right now, what I have is

$(".ask").each(function() {
    var self = $(this);
    $(self).ready(
    function(){
        $("#chatLog").append($(self).html());
    });
});

but this clones instances (when I have four asks posts on the page, the first one appears 4 times, the second 3 times, the third 2 times, the fourth one time), and I'm not sure how wonkier the result will be once I enable the infinite-scrolling

and if I take out the .each, I can't reference the div objective with $(this) using just .ready()

*Note: Tumblr documentation doesn't let me simply load all the ask posts into the fixed div from the start because you can't separate ask posts from the general "posts block" consisting of all the other posts (text, photo, photoset, audio, video, etc.) too

user3597545
  • 53
  • 2
  • 4
  • If the `.ready()` you're talking about is generic jQuery, then regular DOM elements do not have `.ready()` capability. if you're trying to handle events from dynamically loaded elements, then you will want to use delegated event handling as described here [Does jQuery.on() work for elements that are added after the event handler is created?](http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409). This allows you to attach an event handler to a common parent element and use event bubbling from dynamic elements. – jfriend00 Oct 07 '15 at 03:47
  • Other references [jQuery .on() method for adding a click event after loading dynamic html](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376) and [JQuery Event Handlers - What's the “Best” method](http://stackoverflow.com/questions/9730277/jquery-event-handlers-whats-the-best-method/9730309#9730309). – jfriend00 Oct 07 '15 at 03:52
  • Not certain interpret Question correctly ? What is expected result of `.ready()` ? When element exists in `document` , call `.each()` on element ? – guest271314 Oct 07 '15 at 04:10
  • @guest271314 the intention was that because infinite scrolling will be enabled and new instances of that class will load as you scroll, something that would re-call the function would be needed – user3597545 Oct 07 '15 at 04:16
  • @guest271314 though it definitely shouldn't be nested inside .each in that case - but without .each, I wasn't sure how to reference $(this) – user3597545 Oct 07 '15 at 04:17
  • Still not certain what requirement is ? Try adjusting selector to `$(".ask:last")` , removing `.ready()` – guest271314 Oct 07 '15 at 04:45
  • @guest271314 okay thanks for that, definitely fixed the cloning problem - but yeah, like I said earlier, since infinite scrolling introduces new instances of the class as the user scrolls down the page, I'm not too sure how to get the function to re-initiate for the newly loaded posts – user3597545 Oct 07 '15 at 05:46
  • If new element dynamically added to document try `MutationObserver` to perform task when new node added to document or element – guest271314 Oct 07 '15 at 05:50

1 Answers1

0

Note: Tumblr documentation doesn't let me simply load all the ask posts into the fixed div from the start because you can't separate ask posts from the general "posts block" consisting of all the other posts (text, photo, photoset, audio, video, etc.) too

You can filter answers from other posts types. Tumblr provides the theme operator, {block:Answer}{/block:Answer} , for dealing with questions / answers, or ask posts.

The OP has a specific requirement to move answers into there own element:

<div class="posts posts--answers">
{block:Posts}
{block:Answer}

/* Answer post markup */

{/block:Answer}
{/block:Posts}
</div>


<div class="posts">
{block:Posts}

{block:Photo}
/* Photo post markup */
{/block:Photo}

{block:Text}
/* Text post markup */
{/block:Text}

{/block:Posts}
</div>

You can filter dynamically added posts with javascript and move any new answers to .posts-answers.

Reference: https://www.tumblr.com/docs/en/custom_themes#answer-posts

mikedidthis
  • 4,899
  • 3
  • 28
  • 43
  • Yeah, I realize that, but what I meant was that ask posts still have to be within the {block:Posts}, which can't be instanced more than once on a theme. So since I have my other posts (photo, etc.) already in a div container somewhere else, I can't simply separate the ask posts from them in a separate div with another {block:Posts}. So my approach is to let them "display" in that div container with the other post types, use CSS to change display to none, and move the HTML to the other div with jquery, thereby introducing the problem of dynamically loaded posts. – user3597545 Oct 08 '15 at 02:03
  • Why not run two post loops? You can filter anything dynamically added with javascript and add it to the correct element. Honestly, sounds like an XY problem. – mikedidthis Oct 08 '15 at 08:09
  • You're absolutely right, I was under the wrong impression that Tumblr doesn't allow for two post loops (since I hard tried doing so once before, but that time was with two photo posts blocks, so looks like it's no problem so long as it isn't a duplicate of post-type). – user3597545 Oct 09 '15 at 04:44
  • @user3597545 though that being said, since I can't imagine it being easy to get infinite scrolling to work on both post loops, how would you recommend filtering dynamically added posts with JavaScript? – user3597545 Oct 09 '15 at 04:48
  • TBH that is another queston. Infinite scroll gathers content based on a selector, it shouldn't matter if they are in different elements. – mikedidthis Oct 09 '15 at 07:21