Develop Reference

Make all JavaScript work as normal on ajax content

I am working on a normal bootstrap theme which contains js slider, popup, text-rotation, masonry boxes etc..
The theme contains all relevant js library and main.js
All of these will load new content via ajax on user specified actions.
Here is the js/ajax for text-rotation:
In the example below i have to call the "$('.text-rotation').owlCarousel" in order to make the text-rotation to work properly.
function getCon(type,id)
{
var postData = { id: id, type: type}
$.ajax({
url : 'getcontent.php',
type : 'post',
data : postData,
success : function( resp ) {
var cont = $('#cont', resp).html();
$('#conta').after(cont);
$('.text-rotation').owlCarousel({
loop: true,
dots: false,
nav: false,
margin: 10,
items: 1,
autoplay: true,
autoplayHoverPause: false,
autoplayTimeout: 3800,
animateOut: 'zoomOut',
animateIn: 'zoomIn'
});
}
});
}
When not calling "$('.text-rotation').owlCarousel" it simply displays the text in list format.
In order to make the all the ajax load content work properly on all section i.e the slider, popup, etc.. i'll have to find the relevant theme functions and code them all on the respective ajax functions.
Is there any predefined js code which i may call on ajaxComplete so tha all ajax content works normal as it works on page load ??
I tried to call the main.js from "getScript" function inside the ajax success but not working..

The short answer is: no.
jQuery code acts on the DOM that exists when the code is run; if you add to the DOM later on there isn't any general-purpose way for jQuery code to go back and act on the new elements as though they had been there in the first place.
Your options are
rewrite your code to not depend on event bindings / manipulation of the AJAX-based content -- instead use delegated event bindings on elements that are always present
defer your main code init until after all AJAX calls have completed, so the DOM is already in place when you add your bindings
Write specific code to add necessary event bindings / modify newly added DOM chunks individually, as they're loaded

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.

Best method of using jquery load and re-loading a script at the same time

I have a table that uses jquery's .load function to reload all of the data in the table after something is moved.
The issue is that when the table loads, the external javascript files on the page aren't being used in the table any longer.
To resolve this issue myself, i've started using jquery's .getScript. This works (sometimes), but it's not working well. I think the script is taking a long time to load whereas the table instantly loads, resulting in the scripts messing up sometimes.
I've also tried using a function after the getScript which still seems to not work properly.
This is what i'm using currently
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$.getScript("./menu-admin.js");
$("#sortable").load("./menu-manager.php #menu-table");
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});
});
Specifically, we're looking at the "success" of the update of .sortable. Is there any better solutions to this?
My ultimate goal would be to have the script fully loaded before the table starts to load. And again, i've already tried using a function of getScript, this didn't seem to work.
I appreciate any advice, tips, or solutions provided.

Try using get() only with a callback as such:
$.get('http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js', function(response){
// Start table
});

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.