Develop Reference

Inline tumblr 'post' script preventing external jQuery from triggering

I've implemented a tumblr post button following their docs, and the popup works great. However, I need to pass in an image URL that is dynamically created on the page, rather than hardcoding in an image url. I'm trying to do this with jQuery.
HOWEVER, the inline script required to launch the 'post' popup fires, and prevents my jQuery (being triggered by clicking the 'post' button) from firing. I tried moving the inline tumblr script to my js, which allowed my jQuery to fire, but not the tumblr popup.
Ideally, the inline script would fire AFTER my jQuery, since the jQuery is the bit that generates the image URL I need to pass in.
Is there a way to do this, maybe with onLoad or something?
My button, as generated by Tumblr is this (sorry I can't get it on multiple lines for some reason):
<a class='tumblr-share-button' data-color='blue' data-notes='right' data-posttype='photo' data-content='image URL will go here' href='https://embed.tumblr.com/share'></a> <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://assets.tumblr.com/share-button.js';ajs.parentNode.insertBefore(js,ajs);}}(document, 'script', 'tumblr-js');</script>
And my jQuery (that is not executing) is:
$('.tumblr-share-button').click(function(e){
var svg = $("#svg")[0];
svg.toDataURL("image/png", {
callback: function(img) {
var img = img.replace("data:image/png;base64,", "");
var imgurTitle = $("meta[property='og:title']").attr("content");
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {'Authorization': 'Client-ID ******'},
type: 'POST',
data: {'image': img, 'type': 'base64', 'title': imgurTitle},
success: function(result) {
imageURL = result.data.link;
$('.tumblr-share-button').data('data-content',imageURL);
},
error: function(){
console.log('error');
}
});
}
});
});
Any help would be tremendously appreciated!!!

Why the Ajax content of this jQuery plugin (Tooltipster) is shown only after mouse hover 2 times?

I can't find a solution for this plugin since I cannot find any working demo or documentation for external content via Ajax.
Basically I have a simple div with a mouse hover JS function:
<div onmouseover="myFunct(this,'.$comment['id'].');" >Hover Me</div>
And this is my JS function:
function myFunct(element, id){
$(element).tooltipster({
contentCloning: true,
interactive:true,
maxWidth:250,
contentAsHTML:true,
content: 'Loading...',
// 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
// we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
if ($origin.data('loaded') !== true) {
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+id+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
// to remember that the data has been loaded
$origin.html('loaded', true);
}
});
}
}
});
}
Why the tooltip is shown only at the 2nd mouse hover?
Here is a similar Eg. JSFiddle
UPDATE
Thanks to the support this has solved my issue:
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
Anyway this doesn't work on Ajax dynamic content, and I don't know why (I tried to insert it on Ajax page, no way)

I'd recommend a few things: first, separate your JS from your HTML (this is considered best practice), second, initialize Tooltipster on page load, and last, remove the wrapper function. Once the tooltip is initialized your code will trigger by default on hover.
Separate JS from HTML
<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>
Initalize Tooltipster on Document Ready
$(document).ready(function() {
$('.tooltip').tooltipster();
});
Trigger Tooltipster with Hover
$('.hover-me').tooltipster({
// all of your code from above
functionBefore: function(){
var commentId = $(this).attr('data-commentId');
}
});
Note:
The default trigger for Tooltipster is hover (as seen in the documentation), however, you could explicitly set it by passing in trigger: hover, which would make your code slightly more readable and as such maintainable.
Tooltipster Support Recommendation (as seen in the comments)
I add this because it reinforces my solution above and adds context for future devs...that, and it might be overlooked in the comments section.
You initialize your tooltip when the mouseover event has already been fired, so Tooltipster cannot "hear" this first event and open the tooltip. You'd better initialize your tooltips at page load and put your comment id in a data-id attribute that you'll retrieve in functionBefore when you prepare your ajax call.

Post preview - Passing data with AJAX and Fancybox

I'm trying to do a post preview, which will appears in a new Fancybox iframe. Since couple of weeks I'm looking for some help or best practices, but I can't find it.
My main problem is to pass the data from form (before updating database) to Fancybox window. My AJAX skills are very poor, so maybe my problem isn't so hard.
Please check the code:
$('.preview2').fancybox({
fitToView : false,
width : 905,
height : 505,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
ajax: {
type: "POST",
cache : false,
url: "preview.php",
data: $('#postp').serialize()
}
});
And a calling link:
<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>
I'm almost sure everything is fine with preview.php file, just posting the variables and printing it in right places.
Can someone check Fancybox / AJAX part?

As I mentioned in my comments, your preview button should submit the form via ajax to get the POST preview values (we'll use ajax instead of iframe) so :
<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>
Then you would need to bind the preview button to a manual on("click") method to submit the form via ajax firstly ....and then post the results in fancybox secondly like :
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault(); // avoids calling preview.php
$.ajax({
type: "POST",
cache: false,
url: this.href, // preview.php
data: $("#postp").serializeArray(), // all form fields
success: function (data) {
// on success, post (preview) returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
See DEMO (feel free to explore the source code)

I don't like the solution, so I will post my own investigation.
Why writing code with 1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href just to call fancybox on success, that already has all this functions inside?
If you decide to use ajax instead of iframe (like in accepted answer) you could simply add type property to fancybox() call, cause it's beening checked, and pass all other
$('.preview2').fancybox({
type: "ajax",
ajax: {
data: $('#postp').serialize()
// url: "someurl.php" not needed here, it's taken from href
// if you need it, e.g. you have a button, not a link
// use "href" property that overrides everything
// not attribute, cause it's invalid
}
// href: "url_to_add_or_override_existing_one",
// all other effects
// afterLoad: function () { // other cool stuff }
});
EDIT As #JFK pointed it's not enough, you have to get form data each time you click the link, so beforeLoad() needed instead of data. Finnaly:
$('.preview2').fancybox({
type: "ajax",
beforeLoad: function() {
this.ajax.data = $('#postp').serialize();
}
});
You can remove all data-* atrributes too
FIDDLE
KISS

I have tried a more interesting way with fancybox that works,
in the fancybox page
var myvar;
$(document).ready(function(){
myvar = parent.$("#formvariwant").val();
});

jquery slider effect on ajax generated divs

I have the following script in between the head tags on my page:
$.ajax({
type: "POST",
url: "my script that gets what I need",
context: document.body,
success: function(data){
//data is now the value that PHP echoed
phpsaid = data.split('|');
var size_ind = phpsaid.length/6;
var size_per = 6;
for (var i_one =0; i_one<size_ind; i_one++){
for(var i_two =0; i_two<1; i_two++){
if(i_one == 0 ){
var i_get = 0
}
else{
var i_get = i_one * 6;
}
$("#big_container").append("<div class ='neato'><div class ='c1'>"+phpsaid[i_get]+"</div><div class ='c2'>"+phpsaid[i_get+1]+"</div><div class ='c3'>"+phpsaid[i_get+2]+"</div><div class ='c4'>"+phpsaid[i_get+3]+"</div><div class ='c5'>"+phpsaid[i_get+4]+"</div></div>")
}
}
}
});
Then in the main body I have:
<div id ="big_container">
</div>
The ajax script above is generating the divs to go inside big_container. The client has specified that it be done strictly in that way (meaning generate all divs with ajax on the fly), so conceptual arguments of different ways to tackle it unfortunately won't help much here.
Here is my problem:
I also want to apply the following plugin to all elements of big_container. This of course works perfectly when I hard code the div elements into the page, but I cannot get it to work on the ajax generated divs within #big_container.
$(function(){
$('#big_container').bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
});
How do I get the plugin function to apply to the ajax generated div's once they have in fact been generated?

Insert your initialization code after $("#big_container").append("...");
It will look like
$("#big_container").append("<div class ='neato'>..and so on..");
}
} // the end of the 'for' loops
$("#big_container").bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
If you call ajax again on the page and add a new content to the existing one then it is better to write the call of the bxSlider as
$("#big_container .neato:last").bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
just after .append part

This is a common problem people face that elements generated by ajax (dynamically inserted in to dom) doesn't take action or notified by any of the listener or any plugin inside ready because they are not registered in the ready event. To solve this kind of problem I use a different approach like the following
$(document).ready(function(){
myReadyFunction();
});
function myReadyFunction()
{
$("#big_container .neato:last").bxSlider({...});
// All other codes that normally reside inside ready event.
}
After each ajax call, upon success (if required) simply call myReadyFunction(); and in your case you can place your $("#big_container").bxSlider({...}) inside the myReadyFunction(); and call the myReadyFunction(); after successful ajax call and initially call myReadyFunction(); inside ready event too.

How to resize Fancybox using ajax

I can't resize my fancybox, when I use ajax...
This is how my code looks like:
$(".button").click(function() {
var formData = $(this).closest('form').serializeArray();
formData.push({ name: this.name, value: this.value });
$.ajax({
type : "POST",
cache : false,
url : "<?php echo plugins_url(); ?>/kryssord-opplaster/opplasting/utfoerOppgave.php",
data : formData,
success : function(data) {
$.fancybox(data);
}
});
return false;
});
how do I resize the $.fancybox(data);?
I tried ".....$.fancybox(data, {'width': '50%', 'height': '75%'})..."
but that didn't work at all.. Thanks in advance!
Update:
Seems like I only had some errors in my HTML-code..
I had set <table><form></form></table> instead of <form><table></table></form>..
And somehow the way I've coded it now, if I set a stylesheet in the php-file (the url) it affects the page in the background as well.. So the best thing would be if I could get the ajax-page inside a iframe. However if I edit the fancybox-script to ..$.fancybox(data, {'type': 'iframe'}); i get a 403 error..
could someone help me modify the above code?

Try this, add this into html source <div id="successContainer"></div>
$("#successContainer").html(data);
$("#successContainer").fancybox({'width': '50%', 'height': '75%'});

Are you trying to resize it to a certain height and width, or just have it automatically resize to fit the content?
Try throwing this into the ajax success portion:
$.fancybox.resize();
Or try:
$.fancybox({'width': '50%', 'height': '75%'});
As for the update, I'm a little unclear of what you're trying to do, could you clarify? Why do you need the iframe?