I've removed all post centered markup from my Tumblr theme and instead I'm using ajax to fetch the data. So far, so good. Now I want to add a like button to each post, but I can't seem to find any documents on how to do this (without resorting to their api, which needs oauth to work).
Are there no way to include like buttons when you use ajax to fetch the posts and you rather not go full fledge api with oauth?
Tumblr's new implementation of the "Like button" for individual posts uses an <iframe> element to function. The URL for this iframe is obtainable only through your Theme code.
For example:
{Block:Posts}
<div class="like-button">{LikeButton}{/div>
{/Block:Posts}
What is rendered for the {LikeButton} will look something like this:
<iframe id="like_iframe_84714330251" src="http://assets.tumblr.com/assets/html/like_iframe.html?_v=fa292ab73ee80893ffdf1edfabaa185a#name=blog-name-&post_id=84814329251&rk=reKNyFfj" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true"></iframe>
There does not seem to be any way to obtain this without including {LikeButton} inside of a {Block:Posts}
For using ajax, you could include a hidden element on the page that loads this information and parse it out when loading each page of posts using ajax.
So if in your theme you included something like:
<div id="posts-info" style="display: none;">
{Block:Posts}
<div class="post-info" data-postid="{PostID}">{LikeButton}</div>
{/Block:Posts}
</div>
When you load your posts with AJAX, you would also have to load the correct page of your Tumblr (with this code in the Theme).
You could then parse this information by matching the Post ID's to the posts you fetched with AJAX and insert that <ifame> code.
This is a really round-about solution but it should work.
Related
I'm working on a news publishing site that needs to load in stories from an RSS feed below the current news page. I've been using InfiniteAjaxScroll (http://infiniteajaxscroll.com/) to some success however, I've hit a brick wall. There is not way for me to dynamically change what story should load in next as you scroll down the page.
Does anyone know of any other plugins, tutorials, examples that replicate behavior like this. I've searched but come up with nothing that meets these requirements.
I'm trying to create something similar to what the Daily Beast has implemented on their site.
http://www.thedailybeast.com/articles/2014/11/05/inside-the-democrats-godawful-midterm-election-wipeout.html
How do they know what stories to load in?
Thanks!
If you're using the InfiniteAjaxScroll library, the "next story" is whatever link you define as the next URL which can be dynamic for each story you load.
Imagine your first story's HTML as something like this
<div class="stories">
<div class="story">
...
</div>
</div>
<div id="pagination">
next
</div>
Then in the storyC.html you have
...
<div id="pagination">
next
</div>
Assuming you're using some sort of dynamic backend, you would use some sort logic to grab a related story and just set that URL as the "next" URL.
I'm new to Grails and got some problem with the g:formRemote command..
I want a g:textArea box send a message to my controller and save this messages.
After that the page should be updated via the formRemote Ajax, so that the messages appear on the page.
But instead of updating the page, the formRemote call assumes the given url to be a real link and wants me to redirect to this (non-existing) .jsp site.
The Method I want to start is called in my controller tho
I tried many solutions offered in similar problems, but it seems this problem is different from theirs
Heres the code:
<div id="history">
<g:render template="posts" collection="${ messages }" var="message" />
</div>
<div class="postMessageForm">
<g:formRemote name="postChatMessage" url="[controller: 'meetingRoom',
action: 'postMessage']" update="history">
<div class="msg_box">
<g:textArea name="message" value="" style="width: 630px"/><br/>
</div>
<div style="float: right;">
<g:submitButton name="Send" style="width: 90px; height: 40px;"/>
</div>
</g:formRemote>
</div>
and this is the Action which is called in my MeetingRoomController:
def postMessage() {
if (params.message != "") {
def thisUser = lookUpUser()
def thisRoom = thisUser.joinedRoom
def chatPost = new ChatPost(
message: params.message,
author: thisUser
)
thisRoom.addToChatHistory(chatPost)
}
// def messages = currentChatHistory()
// render template: 'posts', collection: messages, var: 'message'
I saw this kind of approach in Jeff Browns Twitter tutorial.
Possible failures i am seeing:
the out-commented render template command has something to do with the Ajax (When I do not comment it the only thing that happens is that the template posts will be rendered on the redirected page
usage of both Ajax and jQuery (But i dont believe that can be the point because I just have used g: and groovy stuff and havent even imported a jQuery lib)
this could be easier with remoteFunction (I dont really know how to get the remoteFunction work in this case tho)
I hope this information is enough to let someone see what I am missing
When the submit button is clicked on your form, the data is sent to the method listed in the url parameter of the formRemote tag. Then you are inside that method, you get to the commented out render tag that outputs data back to the gsp page in the div mentioned in the update tag of the formRemote tag.
formRemote relies upon a javascript library to handle the ajax stuff as mentioned in the grails documentation:
7.7.1 Ajax Support
By default Grails ships with the jQuery library, but through the
Plugin system provides support for other frameworks such as Prototype,
Dojo:http://dojotoolkit.org/, Yahoo UI:http://developer.yahoo.com/yui/
and the Google Web Toolkit. This section covers Grails' support for
Ajax in general. To get started, add this line to the tag of
your page:
You can replace jQuery with any
other library supplied by a plugin you have installed. This works
because of Grails' support for adaptive tag libraries. Thanks to
Grails' plugin system there is support for a number of different Ajax
libraries including (but not limited to):
jQuery Prototype Dojo YUI MooTools
So remove what is in the history div, uncomment the two lines in your postMessage method, and include one of the referenced javascript libraries.
I'm using Alex Michael's fantastic javascript filtrr library
to allow me to manipulate images on an HTML page. The question I have is how do I do an ajax/jquery post of an image that has been filtered inline on the page? For instance:
<div>
<img id="myimage" />
</div>
<input type="button" onclick="filterImage();" />
Once the filtering has been done, how do I post the contents of the image with id "myimage" back to a server-side PHP script so the filtered image can be saved? The tutorials I've seen for doing ajax image POSTs have all used file uploaders, which isn't what I'm looking for. I want to post an image from the HTML DOM.
Thanks!
Since the library you are using uses the Canvas element, the solution here should apply:
Uploading 'canvas' image data to the server
I want to load a webpage in several parts, maybe using jquery ajax or just simple javascript ajax functions so the user can start interacting with the webpage withouth having to wait for the whole page to load. Just like gmail does.
How can I achieve such a thing?
Generally you need to dedicate some div containers for inserting dynamically loaded contents.
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
Then you can load other pages on startup.
$(function(){
$('#content').load('content.php');
$('#content').load('sidebar.php');
});
Of course this is only a start. You have to check for errors on loading and retry. Also using hash value you can dynamically load content & sidebar. etc..
Is there a visualforce component for links? I'd like a link () on my page which can trigger an ajax call to one of the functions in the controller and rerender an element on the page.
This is how I'm doing it right now, but I don't want it to be a button, I need a link:
There are two standard apex link components, an apex:outputLink and an apex:commandLink. Both render anchor tags in html. From what you are asking, it sounds like need the command link, but I've posted information about both of them here.
You can find out more about them in the Visualforce Developer's Guide.
The apex:outputLink should be used when you want to create a standard hyperlink:
This component is rendered in HTML as an anchor tag
with an href attribute. Like its HTML equivalent, the body of an
is the text or image that displays as the link. To
add query string parameters to a link, use nested
components.
<apex:outputLink value="https://www.salesforce.com"
id="theLink">www.salesforce.com</apex:outputLink>
The example above renders the following HTML:
<a id="theLink" name="theLink"
href="https://www.salesforce.com">www.salesforce.com</a>
The apex:commandLink is probably what you need.
... executes an action defined by a controller, and then either
refreshes the current page, or navigates to a different page based on
the PageReference variable that is returned by the action. An
apex:commandLink component must always be a child of an apex:form
component.
<apex:commandLink action="{!save}" value="Save" id="theCommandLink"/>
The example above renders the following HTML:
<a id="thePage:theForm:theCommandLink" href="#" onclick="generatedJs()">Save</a>