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>

Error with jQuery load function in Chrome

I have this problem, when I load /index.php?route=quickcheckout/checkout with jQuery function load it's load perfectly in FF in IE and sometimes even in Chrome.
But sometimes in Chrome it doesn't load content from /index.php?route=quickcheckout/checkout but load the page you are on in div with id blagajna.
Here is my code for this:
<script type="text/javascript">
$(".img-thumbnail").click(function () {
$(this).prev('input:radio').prop('checked', true);
});
$('form').on('click', '.img-thumbnail', function() {
var url = "/index.php?route=checkout/cart/add";
$.ajax({
type: "POST",
url: url,
data: $("#oko").serialize(),
async: false,
success: function(data)
{
$('input:radio').prop('checked', false);
$(".izbira").hide();
$(".dodano").show().delay(1500).fadeOut();
$("#blagajna").load( "/index.php?route=quickcheckout/checkout" );
}
});
return false;
});
</script>
and this is URL: http://trgagate.si/index.php?route=product/product&product_id=50#narocilo
Problem appears only in Chrome when you click on some bottle in order form.
Thanks for help.

The error appears to be generated in a file that is returning some script
<script type="text/javascript"><!--
$('.colorbox').colorbox({
width: 640,
height: 480
});
//--></script>
colorbox is calling the live() function which may be deprecated. If you have access to the jquery.colorbox-min.js file just do a find+replace and change all references of "live" to "on"

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.

How to slow page loading inside to div?

I am using jquery to fadein div which i animate to get bigger and then i load php file in it using ajax. Problem is that ajax loads php file before div is visible and animated big enough. Therefore php page shows onscreen and after that div loads under it. How can i slow down php page loading or make it visible after div is visible? Toppi and links are variables. Toppi contains position of div and links php page name.
Here is the code i use:
$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
I have tried
$("#riv1").delay(2000).html(html);
but this does not help.

Try to put the ajax code in a callback function of fadeIn():
$("#riv1").css("top", + toppi);
$("#riv1").fadeIn("slow",function(){
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
});
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);
the ajax function will be called only when the fadeIn has been finished.

$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500,function(){
//calling ajax after animation completed
if (links != '') {
$.ajax({
async:false,
url: links,
cache: false
}).done(function( html ) {
$("#riv1").html(html);
});
}
});
try making a ajax call once the final animation is completed
Happy Coding :)

You can show the loading image before jquery ajax request by using the function
beforeSend and can hide the loading image on success like below
$.ajax({
beforeSend:function(){
//you logic to add the loading image inside the div
}
async:false,
url: links,
cache: false
}).done(function( html ) {
//Hide the images or replace the div with new content
$("#riv1").html(html);
});

How To Call Function on page Loading

I'm Using Web service using AJAX Call In My HTML Page . Web Service Returning Data Nearly 30 to 40 second's .
During This Loading Time I Need to Use Some Loading Gif Images After Data Completely Received Form Web Service The Loading Image Must Be Hide.
I'm Using Only HTML,JAVASCRIPT,CSS,J Query.
Any Idea Or Samples Needed.
I'm Using Following Code
$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
In The Above Code My Problem Is On Page Load Gif Image Show But It's Not Hide Only Gif Image Only Showing.

Put a hidden image on your page and as soon as your ajax call is made, make that image visible
$('#image').show();
$.ajax({
complete: function(){
$('#image').hide();
}
});
and hide that image again on Complete of Ajax call.

Use your ajax request callback (on success/failure) instead of page load.

When sending the request just show a gif animation by setting the Display to block
then when you have the data set the display to none
or use jquery
function showHourGlass()
{
$("#gifimage").show();
}
function hideHourGlass()
{
$("#gifimage").hide();
}

You ask for ideas, I have one sample -
http://www.myntra.com/shoes
load scroll down fastly this is the ajax jquery request which is exact output which you have mentioned in your question
Check source code
Jquery Ajax loading image while getting the data
This what the html looks like:
<button id="save">Load User</button>
<div id="loading"></div>
and the javascript:
$('#save').click(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 2000);
}
});
});
I hope this will help you.