Develop Reference

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.

Owl crousal slider not working when loading data via ajax

I am working on some wordpress project and my owl content will load via ajax. Now, what happens, when i load content via ajax, it loads content but not show is slider. Here is javascript code that i have already done:
function runAjax(objects){
var $response;
$.ajax({
url:wpAjaxUrl,
async:false,
cache:false,
type:"POST",
//data:{'action':objects.action,'product_id':objects.product_id},
data:objects,
dataType:"json",
beforeSend:function(){
$(".loader_div").show();
},
success:function(response){
$response=response;
//console.log($response.subcategory_products);
},
complete:function(response){
if(objects.action=='get_product_images'){
// var owl1=$("#owl-related-accessories");
// owl1.data('owlCarousel').reinit();
$.getScript("http://localhost/inox/wp-content/themes/inox/js/jquery.min.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel-related-accessories.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/js/owl.js");
}
$(".loader_div").hide();
}
});
return $response;
}
There are so many ajax request so that i have created a general function for requesting ajax.I hope you understand well. Here you can see that i have reload all owl's javascript code.In the following code i have get ajax response and append in owl crousal div.
$("#owl-related-accessories").html($ajaxRes.relatedHtmlData);

You something ommit, it is not only need to download script $.getScript( also is need to run it to take effects on new created elements with JS. See all calls of functions in your html page (<script> with $( document ).ready(function() </script> and without it but is functions of carousel) and after run AJAXA call it all in Browser JS console and see if it have effect. Also see in your browser js consle if no erros after you run Ajax, because error stop js script run in place where error ocur

During ajax return success: Define owl carousel there. Means after returning ajax success, define owl carousel there.
success: function(data) {
//Return ajax success response here
jQuery('#cross_container').html(data);
//run owl Carousel here
jQuery('.cross-sell-box').owlCarousel({
items: 3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true
});

jquery ajax cache false not work

I am using jquery ajax get method.
$.ajax({
url : 'url',
type : 'get',
cache : false,
data : {'timestamp' : '<?php echo time();?>'},
beforeSend : function()
{
},
success :function()
{
}
});
ajax cache:flase is not seem not work.I don't know what is wrong.
when a visitor click an image, will be appear image thumbnails lists.
and when each thumbnails click ,will be appear big image,But it not work.
My english is bad.please check website url.Someone please help me.
Website Link

Placing this at the top of my ajax.js worked for me
$.ajaxSetup( { cache : false } )

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?

fancybox ajax post to iframe

is it possible using fancybox to post a var to the iframe when opens?
I currently have:
function fancyBoxLoad(element) {
var elementToEdit = $("#" + $(element).attr("class"));
var content = encodeURIComponent($(elementToEdit).outerHTML());
$.fancybox(
{ 'href': 'loadEditor.php' },
{
frameWidth: 750,
frameHeight: 430,
overlayShow: true,
ajax: {
type: "POST",
data: 'content=' + content
},
type: 'iframe'
}
);
}
It does seem that if I take away type: 'iframe' it will post data but it doesn't appear to be in the iframe and if I take away ajax: { type: "POST", data: 'content=' + content } instead it will open in an iframe but not post the data (the example above does the same)
So my question being can it be done?

If you're simply trying to put content in a iframe, why don't you use fancybox to create the iframe, and once you know it's been created, then access it via the reference that fancybox returns to you and set your content that way. I'm not sure you want to send the content to the server and back. Just wait for the iframe to load, then on ready, query an element within it and set the content.

Looking at the source for Fancybox v1.3.1 they are in fact mutually exclusive. If you don't feel comfortable diving into the source code and editing the plugin, you might try using GET variables in your HREF as a work around. It should effectively work like a post as it is an AJAX call, just make sure the backend can receive the GET variables.