I have an image preview plugin. It works perfectly with images that are already in the page.
like:
<a href='ImgHandler.ashx?Id=5' class='preview' title='Landscape'>
<img height='18' width='18' class='ImgInCell' src='ImgHandler.ashx?Id=5' alt='Landscape' /></a>
But When i load the same type of code through Ajax on a DIV layer the image hover preview is not working.
<a id="LinkPic" class="preview" title="Land Scape" href="ImgHandler.ashx?Id=5">
<img id="ImgPic" style="height:50px;width:50px;" src="ImgHandler.ashx?Id=5" alt="Land Scape">
</a>
Then i used firebug and copied the source after the load of AJAX; created a html page; then on loading it, I see the image hover on the AJAX Image is working Fine.
The Jquery code for The image preview is called by following.
$(document).ready(function () {
imagePreview();
});
I think it is not working due to the document.ready . How do i make the image preview work on AJAX data(Image)??
Calling the imagePreview(); after the AJAX call didnt help.
i found no other way than to insert the jquery code into the AJAX called document (partial view) with change in class like imgpreview2, and now its working fine.
Related
I am using ReactJS to render a like/unlike component for an object in a django project. I have a list page where I have a list of objects and for each object I render a LikeUnlike component as follows:
<div class="object">
<span id="likes-service-{{service.pk}}"></span>
<script type="text/jsx">
React.render(<LikeUnlike object_id="{{service.pk}}" app_label="providers" model_name="providerservice" like_count="{{service.like_count}}" liked="{% user_has_liked 'providers' 'providerservice' service.pk request.user.pk %}" />, document.getElementById("likes-service-{{service.pk}}"));
</script>
</div>
On the very first page every thing works. The component renders and works as expected. The issue comes in when I scroll down and the second page is loaded via ajax (as I am using django-endless-pagination). For any pages loaded via ajax, the component is not rendered and all I see is a blank <span id="likes-service-{{service.pk}}"></span> element.
I have tried logging document.getElementById("likes-service-{{service.pk}}") and few other things and seems like the element, React library etc. are available.
I can't figure out why the component is not rendered when the page is loaded via ajax. Any Ideas ?
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.
I'm using Foundation 5 & WordPress.
I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.
I have two divs at the bottom of my page:
<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>
I launch the first modal with content from another page (so far so good):
<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">
First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):
<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">
Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.
Any idea what I'm doing wrong?
You need to call the second modal using javascript on ajax returned modal page.
Try this:
Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):
<div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>
Then set event handler for links inside your current modal:
$('a.linksinsideyourmodal').click(function(e) {
$('#modal-anotherPage').foundation('reveal', 'open', {
url: $(this).attr('href')
});
return false;
});
Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.
Your problem might be that
<?php the_permalink(); ?>
returns an address with "http://".
Reveal wont use that address correctly. Reveal will only use ajax with relative URLs, not absolute ones, and it will only work when referencing files on the same server.
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've got a gallery of images, and I'd like users to be able to share those images to their social network.
When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.
However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.
Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?
I have found a solution to this problem now, although it is more of a hack then anything else.
The basic principle is that you need to reinitialise the widget every time you load it back in.
The simple premise is that you include a ?domready=1 when loading the javascript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
Then when you complete loading your ajax, you need to run,
window.addthis.ost = 0;
window.addthis.ready();
Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </aside>
$('.content').ajaxComplete(function(event, request, settings){
// We need to reinitialise the addthis box every time we ajax a lightbox in
// Apologies for using regex to read html when javascript can parse html!
// http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
if(request.responseText.match(/gallery-lightbox/i)){
window.addthis.ost = 0;
window.addthis.ready();
}
});
Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.
This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->