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>

Cached Dynamically loaded JS callback not working on 304

When using $.getScrtip it does not cache your dynamically loaded js, so i have this custom one.
jQuery.loadScript = function (url, callback) {
var load = true;
//check all existing script tags in the page for the url
jQuery('script[type="text/javascript"]')
.each(function () {
return load = (url != $(this).attr('src'));
});
console.log('load is ' + load);
if (load) {
//didn't find it in the page, so load it
jQuery.ajax({
type: 'GET',
url: url,
dataType: 'script',
cache: true,
ifModified: true,
success: callback
});
} else {
//already loaded so just call the callback
if (jQuery.isFunction(callback)) {
callback.call(this);
};
};
};
it works on caching part, however it does not work when i am refreshing the page using f5 and 304 is received on next attempt to dynamically load js. i get function undefined for a function defined inside the loaded js. here is how i call this (this same code perfectly with $.getScript if replaced $.loadScript)
function getvm() {
return $.getScript("Scripts/ViewModel/cachedvm-1.0.0.js")
}
function functionthatinvokesjsload() {
$.when($.get(myUrl), getvm())
.done(function(a1, a2) {
initializeVm();
});
}
Error i am getting is initializeVm() is not defined when i get 304 on js load. it works the first time. but if i later manually do it in browser debug window it does find that function. it seems to be i am trying to invoke the js before its loaded to DOM but not sure why that is happening.

i had to use
jQuery.loadScriptNoCallBack = function (url) {
return $.ajax({
type: 'GET',
url: url,
dataType: 'script',
cache: true,
ifModified: true
});
};

Loading JavaScript into AJAX loaded content

I am a newbie with AJAX and JavaScript and not sure how to make it work.
Here is the website:
When portfolio images are clicked, the details are loaded via AJAX. I would like to be able to do a slideshow for the work that has more than one full-sized image. However, because the content is loaded using AJAX, Flexslider's JavaScript doesn't work.
Here is the code that loads the content:
// ----------- PROJECT WINDOW SHOW/HIDE ----------- //
var $actual= null;
$(".ch-grid").click(function() {
$.scrollTo( $('#project-show'), 800, {offset:-130});
obre($(this).attr('id'));
$actual=$(this);
// alert($('.project-content').position().top)
// $('html, body').animate({scrollTop:($('.project-content').position().top)+165}, 1000);
});
$(".portfolio-btn").click(function() {
obert=false;
});
function obre(quin){
$.ajax({
//type: "POST",
//data: { id: $(this).attr('cid')},
url: quin,
success: function(data) {
$('.project-content').html(data);
}
});
}
And here are the scripts that need to be loaded:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-plugins.js?ver=2.0"></script>
<script type="text/javascript" src="http://www.4ndesign.com/wp-content/themes/4ndesign/js/metronomy-custom.js?ver=2.2"></script>

You need to do your init of flexslider after the content is loaded via ajax.
Just add it into the success part of your ajax request.
$.ajax({
..
success: function(data) {
$('#slider').flexslider(); // or what ever :)
}
});

jQuery click doesn't work on chrome

Here is the jQuery code which works on Firefox and IE but not on Chrome.
I placed the alert() to debug and it doesnt works on chrome or safari. Any ideas?
The bxslider jquery works but not the $(".locationoption").click(function() .
Here is the code :
$(document).ready(function(){
$(".locationoption").click(function() {
var datastring = "location="+$("#locationselection").val()+"&language="+"<?php echo $language; ?>";
alert(datastring);
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: datastring,
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});
$('#leftsidebarbanners').bxSlider({
controls:true,
nextText:" Next →",
prevText:"← Previous |",
});
});

I guess you should not use the clicking on an "option" element because it is not really a DOM element I guess. It's completely drawn by the browser and as you noticed it can act different depending on the browser.
But use the change event of the select: "#locationselection". And maybe use the following syntax to fill the data:
$("#locationselection").change(function() {
$.ajax({
type: "POST",
url: "includes/ajaxlocationsearch.php",
data: {
location: $(this).val(),
language: "<?php echo $language; ?>"
},
cache: true,
success: function (data) {
$("#hotelselection").html(data);
}
});
});

You can try using the JQuery Delegate.
Link to JQuery documentation
Had a problem with dynamicly loaded content on my site aswell and delegate worked perfectly for me.
$("id of class of outer element").delegate( "id/class/element of content that is to be clicked", "click", function() {
//do your stuff
);

optimizing colorbox and adding extra jquery

I have two problems
I am trying to open a jQuery colorbox and it is very slow. The reason is I am trying to get html content from a different page (I cannot use iframe because I just need a part of this page). The following code works but it takes time after the button is clicked:
$(document).ready(function() {
$(".cart-link a").click(function(event) {
$(this).colorbox.close();
});
$(".rest-menuitem a").click(function(event) {
event.preventDefault();
var result = null;
var sURL = $(this).attr("href");
$.colorbox({
html: function() {
$.ajax({
url: sURL,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return $(result).find('.product');
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
});
});
I want to know if there is a alternative way to do it. I dont mind if the colorbox popup and then takes time to load the content. The above version can be fount at this url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products).
I am also trying to close the colorbox when a user clicks on add to cart. But some reason it is not triggered. $(".cart-link a").click is not triggered when I click on add to cart. Is there a special way to add jquery to colorbox content?

Try this instead:
$(".rest-menuitem a").colorbox({
href: function(){
return $(this).attr('href') + ' .products';
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.

For your question 2 can you try this ?
$(document).ready(function() {
$(".cart-link a").live('click',function(event) {
$(this).colorbox.close();
});
});
For your question 1..it will be slow since you are fetching it from different page.Use a different logic for that
For your question no 1
$('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
$.ajax({
url :'Your url',
data : {}, //data to send if any
type : "POST" //or get
success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
$('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
}
});
}});