Develop Reference

the tooltip in bootstrap doesn't work after ajax

I have a file named index.php, which in I include another file named file1.php (in index.php I include all necessary files for jQuery, js etc.).
In file1.php I have a table with buttons which each opens a modal. the information in the modal is from an ajax call for file2.php. in file2.php I create a table. In the table I have the cell :
<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>
and, well, the tooltip doesn't work.
but, when I copy this and get it to file1.php, bellow the table, the tooltip does work.
Can anyone help me fix the tooltip ?
Thx.

Use selector on exist element like body
$('body').tooltip({selector: '[data-toggle="tooltip"]'});

I think you need to initialize the tooltip on the newly arrived data, e.g.
$('[data-toggle="tooltip"]').tooltip();
Place this code to your AJAX success handler, after the DOM manipulation.

You will have to put the tooltip initialization in Ajax callback function:
$.ajax({
method: "POST",
url: "some.php"
}).done(function( msg ) {
$('[data-toggle="tooltip"]').tooltip();
});
-OR-
instead of putting the initialization code in every Ajax callback function
you can implement it globally using the ajaxComplete event:
/* initializate the tooltips after ajax requests, if not already done */
$( document ).ajaxComplete(function( event, request, settings ) {
$('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
});
This code will initialize the tooltip for every node which has the data-toggle="tooltip" attribute defined but do not have the attribute "data-original-title" (i.e tooltip not initialized).

I've tried everything and nothing worked for me.
So I took a closer look at tooltip when click* and found out that each time the shown.bs.tooltip is fired a aria-describedby property appears and its value changes every time.
So, my approach (and it works) is to change the content of this dynamic element.
I got this code:
$('body').on('shown.bs.tooltip', function(e) {
var $element = $(e.target);
var url = $element.data('url');
if (undefined === url || url.length === 0) {
return true;
}
var $describedByContent = $('#' + $element.attr('aria-describedby')).find('.tooltip-inner');
if ($element.attr('title').length > 1) {
$describedByContent.html($element.attr('title'));
return true;
}
$.ajax({
url: url,
method: 'GET',
beforeSend: function () {
$element.attr('title', 'Cargando... espere por favor.');
$describedByContent.html($element.attr('title'));
}
}).done(function (data) {
$element.attr('title', JSON.stringify(data));
$describedByContent.html($element.attr('title'));
});
return true;
});
In my case my tooltip has a data-url attribute to take the data for the title.
The original title is '-', and I don't want an ajax call every time I click* the element, just the first time.
To me it's not useful to make an ajax every time because I don't expect the data to change that fast.
The dynamic created element has an element with the class .tooltip-inner, so we just need to replace its content.
Hope this might help.
*click: I chose the click event because the default hover sometimes make the system turn crazy and the show.bs.tooltip was fired forever, switching its between the default and new value.

You can do this in one of these two ways:
you can write an ajaxComplete function so that every time after an ajax call completed it reinitialize the tooltip over and over again. This is useful when in most of your pages you have datatables and want to initialize the tooltip after every ajax datatable call:
$(document).ajaxComplete(function() {
$("[data-toggle=tooltip]").tooltip();
});
Or you can call tooltip function after ajax success callback:
function tool_tip() {
$('[data-toggle="tooltip"]').tooltip()
}
tool_tip(); // Call in document ready for elements already present
$.ajax({
success : function(data) {
tool_tip(); // Call function again for AJAX loaded content
}
})

I set up my tool tip by placement like so:
function setUpToolTipHelpers() {
$(".tip-top").tooltip({
placement: 'top'
});
$(".tip-right").tooltip({
placement: 'right'
});
$(".tip-bottom").tooltip({
placement: 'bottom'
});
$(".tip-left").tooltip({
placement: 'left'
});
}
initialize this with a document ready call:
$(document).ready(function () {
setUpToolTipHelpers();
});
This way I can determine the placement of the tool tip, and I only have to assign the tip with using a class and title:
<td class = "tip-top", title = "Some description">name</td>
Then I call, "setUpToolTipHelpers()" inside my success ajax function. Or you can call it on the complete function as well. This seems to work well for me.

run
$('#ding_me_tooltip').tooltip('dispose');
$('#ding_me_tooltip').tooltip();
after the ajax where #ding_me_tooltip is your selector

Send a dynamic parameter to a jQuery function from code behind

In code behind I have the following code that gets the [IDphoto] from an SQL database. Now I want to send the IDphoto as a parameter to a jQuery function onClick. How can I do that?
Code behind
sb.AppendFormat("<a onclick='popup()' href='#" + IDphoto + "'>");
jQuery
function popup() {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}
UPDATE
I've updated the codes based on TrueBlueAussie reply:
photos_sb.AppendFormat("<a href=\"#\" class=\"photo\" data-photo=\"" + IDphoto + "\">");
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Nothing is happening. The click doesn't fire the jQuery function!

A few words of advice:
Do not use inline onclick attribute handlers with jQuery. That adds unneeded complexity and separation of the event code from the event registration code.
Use double-quote on HTML attribute values. Most browser accept either, but double-quoting is safer for compatibility.
Also use data- attributes to provide meta-data (rather than bury it in the href). Make the href a plain bookmark link (#).
Use a common class on any photo links to allow simpler jQuery matching (and styling):
$(function(){...}); is a handy shortcut for $(document).ready(function(){...});
e.g
sb.AppendFormat("");
and add a jQuery click handler that looks for clicks on any .photo links:
$(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Here is a mockup of the above using some sample links:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/wqkxwz2j/

why not just send the IDphoto to same popup function from your Code-Behind:
sb.AppendFormat("<a onclick='popup("+IDphoto+")' href='#" + IDphoto + "'>");
jQuery
function popup(myVarID) {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}

Not fully understand what you want. But here is example:
Code behind:
sb.AppendFormat("<a onclick='popup("+IDphoto +")' href='#'>");
Javascript
function popup(IDphoto) {
console.log(IDphoto);
}

jQuery keyup event not executing immediately

I have following small jQuery script:
$("#content").on("keyup", "#ID1", function() {
$("#ID2").load("loadText", resizeResult());
});
function resizeResult() {
if($("#ID2").height() != $("#ID3").height()){
$("#ID3").animate({
height: $("#ID2").height()
}, 800);
}
}
My problem now is that the resize function will be only executed by the NEXT "keyup" event but I want it immediately when the "load" in ID2 is done.

Call resizeResult() in the end of keyupfunction
$("#content").on("keyup", "#ID1", function() {
..................
resizeResult();
});

call your load function in document.ready too..
$(function(){
$("#ID2").load("loadText", resizeResult()); //<-- call load function in document ready and in keyup function..
$("#content").on("keyup", "#ID1", function() {
$("#ID2").load("loadText", resizeResult());
})
.....
});
and please make sure your url in load is proper path... loadText doesnot seems to be a proper path

Everything looks well in your code. But you need to leave the brackets from the resizeResult function inside the event. Because you don´t want it to call immediately when the browser executes the script. It´s only needed when the event is fired. So you should change your code to this (and my also native common events, which recommend jQuery):
$("#content").keyup(function() {
$("#ID2").load("loadText", resizeResult);
});
function resizeResult() {
if($("#ID2").height() != $("#ID3").height()){
$("#ID3").animate({
height: $("#ID2").height()
}, 800);
}
}
For a safe execution it´s also better to wait until the html is fully loaded or until this html tags are loaded (javascript code after the ID3 container). The first method can be done by using $.document.ready from jQuery.

Initialize script

I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.

You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call

Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.

I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});

simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});

custom checkbox images for html returned via ajax

So I'm using the simpleImageCheck jQuery plugin to change checkboxes into images. This works fine for the simple pages I return from the server normally:
$(document).ready(function () {
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
}
However, on some of my pages there are divs that are loaded dynamically on a button click:
function GetData() {
$.get("/Ajax/Aapt", variables, function (data) {
$("#AaptTab").html(data);
});
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
}
The get request will return a partail HTML page. When this occurs the div is loaded fine but the checkboxes are not replaced with the images. I think I understand why it is happening, my problem is that I don't know what I should do to fix it....
Since the HTML is returned as a string should I just use a string replacement? Or is there a better way around this?
Also every checkbox I am displaying is disabled as they are just used to view data.

This happens because of '$.get' request takes time and works asynchronously.
Try this:
function GetData() {
$.get("/Ajax/Aapt", variables, function (data) {
$("#AaptTab").html(data);
$("input[type='checkbox']").simpleImageCheck({
image: './content/themes/base/images/fail.png',
imageChecked: './content/themes/base/images/success.png'
});
});
}