Develop Reference

jquery tooltip() php ajax request not working

I got a html page #main that is fully loaded by a javascript function loadNe(). After the page gets fully loaded by the Ajax call, I want some tooltips to be shown when mouseovering some rows. Those tooltips makes Ajax requests to exhibit its content. The problem is:
The "open:" function inside tooltip() is probably never being executed because nothing gets printed in the console by the console.log() inside it. And also no network requests are sent to the tooltip's ajax URL. But still, the tooltip is working when I mouseover the elements, it shows me the title's tag content "Loading...".
What can be going wrong here?
function loadNe(ne){
$.ajax({
type: "GET",
url: "/NOKIA/fx-load.php?label=" + ne,
dataType: "text",
success: function (data){
var content = fillResult(data);
$("#main").html(content).hide();
$("#main").fadeIn("slow");
$(".sfp").tooltip({
track: true,
open: function (event, ui){
var sfp = $(this).text();
console.log("1-executing.."+sfp);
$.ajax({
type: "GET",
url: "/NOKIA/sfp-load.php?sfp="+sfp,
dataType: "json",
success: function(data){
console.log("2-executing.."+data["reach"]);
var html = "<tr><td>Alance: "+data["reach"]+"</td></tr>"+
"<tr><td>Tamanho de onda: "+data["wavelength"]+"</td></tr>"+
"<tr><td>Limiar Rx: "+data["rx_min"]+"</td></tr>";
$(".sfp").tooltip('option','content',html);
}
});
}
});
}
});
}

The problem was I was loading the bootstrap.min.js before the js-ui.min.js. The tooltip() function was executing the bootstrap library instead of the js-ui. So I inverted the order of loading as it is down here:
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js-ui/jquery-ui.min.js"></script>

JS, jQuery not working when I refresh part of page with Ajax

I have some JS files included in my page that are simple for displaying blocks on click ant etc..
On another part of page, I have a button. When I click it an ajax call is made that returns some values that I display on the page. To display it, I'm reloading part of page like this:
$(document).ready(function () {
$(document).on('click', '.add', function (e) {
$this = $(this);
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
}
}
});
});
This reloads part of page, displays values and etc..
However, after the ajax call is made, the JS stops working. When I click my buttons, nothing happens. No errors or anything.
I think it has to do with the ajax when I refresh part of twig and it messes up the previously loaded JS files. But what can I do in that situation? Somehow refresh the loaded JS files? How?

You have to attach event listener on button starting from the container which doesn't get reloaded by Ajax request, like this:
//#mainCont is a container that doesn't get reloaded by Ajax
$("#mainCont").on("click", ".yourBtn", function(){
//do something
});

As said #Nacho M, you need to reinit listener from the loaded element, so you hsould have something like this :
function init() {
$(document).on('click', '.yourclass', function (e) {
//your content
}
// add every button who needs to be reloaded.
}
Init them on loading page first :
$("document").ready(function() {
init();
})
And on success of Ajax call :
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
init();
}
}
});

JS script doesn't work when i click back on site

i create a nav on my site. Navigation works good but when i back on the main site all script from js file doesn't work. Script for my nav:
var default_content="";
$(document).ready(function(){
//Ajax navigate
checkURL();
$('footer a').click(function(){
checkURL(this.hash);
});
default_content = $('#login_box').html();
setInterval("checkURL()",250);
.........
Methods:
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
lasturl=hash;
if(hash=="")
$('#login_box').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url)
{
url=url.replace('#page','');
$.ajax({
type: "POST",
url: "include/help4meApi.php",
data: 'page='+url+'&tag=navigation',
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#login_box').html(msg);
}
}
});
}
Problem is when i back to the main site scripts doesn't work.

the issue comes from here $('#login_box').html(default_content);. When u calle the .html() the event binded within the element will be cleaned.
When you backspace, back to the main page, the event handler is already not there, so you have to register it again
//For show and hide register values
$("#registerInputsBtn").click(function(){
$(".register_information").hide(1000);
$(".register_values").show(1000);
$("#firstname").focus();
});
register again on the piece of code that you assign the content to #login_box. For example the quick fix:
if(hash==""){
$('#login_box').html(default_content);
$("#registerInputsBtn").click(function(){
$(".register_information").hide(1000);
$(".register_values").show(1000);
$("#firstname").focus();
});
}
but here the codes are not DRY :( rearrange the flow on how the page load and the register the event in the correct flow is recommended.

when I click on the div that div should get refreshed and refreshed data should be displayed

$(document).ready(function () {
var j = jQuery.noConflict();
j('.refresh').click(refreshDiv);
j('.refresh').css({
color: ""
});
function refreshDiv() {
j.ajax({
url: "refresh.php",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});
}
});
I have this code ,but I am confused how to display that div gets refreshed.Please provide me some code or links to refer.I am making site in which I want to update the score when I refresh the div using ajax.

In your ajax request specify dataType:'html' as shown :-
j.ajax({
url: "refresh.php",
dataType:"html",
cache: true,
success: function (html) {
j(".refresh").html(html);
}
});

You can user the different state of Ajax please refre Ajax Details Desc
Then put beforeSend() function put any loading gif img
Then on complete() hide or remove that image
and on success return the data to div.

Try putting your function in global scope and add the relevant datatype:
function refreshDiv() {
$.ajax({
url: "refresh.php",
datatype:"html",
cache: true,
success: function (html) {
$(".refresh").html(html);
}
});
}
$(document).ready(function () {
$('.refresh').click(refreshDiv);
$('.refresh').css({
color: ""
});
});
Another suggestion is try replacing $ with your j which you have used for jQuery.noConflict() utility.
A small demo could help you.

.ready not acknowledging AJAX content

I am loading content, mostly images, through this ajax call, and would like to fade the div in only when all of the images are completely loaded. For this reason, I thought that I should use .ready, so that all of the content was loaded before I use jquery to fade it in, but for some reason the images are not completely loaded when the div gets faded in, which makes it seem like it is not waiting for everything to load.
I am basically wanting to build a preload, for this AJAX content
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$(this).ready(function() {
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
Thank you for the help in advance. I am still a beginner.
example:

Edit:
Oh, now I see what's your problem!
When the success() function is fired, you gotta add a .load event to the images inside #content!
You gotta do something like this
function getPage() {
var data = 'page=' + encodeURIComponent(document.location.hash);
$('#loader').fadeIn('slow');
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: true,
success: function (html) {
$('#content').html(html);
$("#slider").easySlider();
$('#content img').load(function(){
$('#body').fadeIn('slow');
$('#loader').fadeOut('slow');
});
}
});
}