We Keep Coding

Colorbox loads only once - Uncaught TypeError: $.colorbox is not a function(…)

Ok, first thing would be to check if path to colorbox JS file ir correct and if reference the colorbox file is after the jquery file. They both are!
The real mystery comes from fact that colorbox works on first time but the the error appears. And the funniest is that it used to work but then suddenly didn`t.
Here is the function that calls for colorbox:
function loadJsonMap(map, data){
var markers_data = [];
$.each(data, function(key, val){
if (val.latitude != undefined && val.longitude != undefined) {
markers_data.push({
lat : val.latitude,
lng : val.longitude,
details : {
holder_id : val.holder_id
},
click : function(e){
if(e.details.holder_id !== undefined){
var url = baseurl + 'index.php/products/colorbox/' + e.details.holder_id;
$.colorbox({
open : true,
href : url,
iframe : false,
innerWidth : 400,
innerHeight : 400,
close : 'Aizvert'
});
}
}
});
}
});
map.addMarkers(markers_data);
}
This function is used to add marker on Gmap. Two days ago I could click how many markers I wanted and every time a new colorbox would show up but now I get to do that only once before getting error on $.colorbox({ line. I am 99% sure that I haven`t changed anything associated with this. Really do not know how to understand this error.
UPDATE:
The error seems to be caused by colorbox but affects jQuery. After first colorbox is opened every jQuery call is not a function. Now I get error on :
$(function() {
$('#contact-link').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this), 'contactpop');
} else {
$(this).addClass('selected');
$('.contactpop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Uncaught TypeError: $(...).slideFadeToggle is not a function(…)
but before clicking marker and opening colorbox I could call slideFadeToggle multiple times...

Jquery not responding inside AJAX form results display

I've just started to really work in jquery and AJAX and for the most part I've seem to have the hang of it but this one little bit of code is not working.
I have a page that displays a summary of articles. When you click on the article name a popup window displays and the article information is show along with a X icon in the upper right hand corner that is to close the article window.
I'm handling the form processing via AJAX and it works great. The window pops up, all the proper information is displayed. The issue I am running into is the Close button function.
When you click on the close button, nothing happens. The jquery I have for it doesn't seem to respond. If I just use pure jquery/css the window appears and the close button works. If I handle the form with HTML/PHP it displays the window and the close button works.
Only when I handle the call via AJAX does the close button not respond and I am at a loss why this is.
Here is the simple jquery code for the close button:
$('.newsClose').click(function(){
$('#newsWindow').hide();
});
This is the AJAX call:
$(document).ready(function() {
$('#agentNewsForm').submit(function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
data : $('#agentNewsForm').serialize(),
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$('#processing').show();
},
error : function() {
$('#processing').hide();
$('#ajaxFormError').show();
},
// success callback
success : function (response) {
$('#processing').hide();
$('#newsWindow').html(response).show();
},
complete : function() {
$('#processing').hide();
},
timeout : 3000,
});
return false;
});
});
I'm sure it's something very simple that I am missing. Any thoughts?

$(document.body).on('click', '.newsClose' ,function(){
$('#newsWindow').hide();
});
See this SO:
Jquery event handler not working on dynamic content

Your code to close the window is only firing on document load, and your close button is inside #newsWindow, you can resolve this in one of two ways ...
$('#newsWindow>.content').html(response).show(); and keep your close button outside of the .content area.
or you can use the on method which will bind your close click on all new dom added to the document.
$(body).on('click', '.newsClose', function(e){ e.preventDefault; $('#newsWindow').hide(); });

Try this:
(function($){
var $newsWindow = $('#newsWindow');
$('body').on('click','.newsClose',function(e){
e.preventDefault();
$newsWindow.hide();
});
$('body').on('submit','#agentNewsForm',function(e){
e.preventDefault();
var $el = $(this);
var $process = $('#processing');
var $error = $('#ajaxFormError');
var _data = $el.serialize();
$.ajax({
type : 'POST',
data : _data,
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$process.show();
},
error : function() {
$error.show();
},
success : function (response) {
$newsWindow.html(response).show();
},
complete : function() {
$process.hide();
}
});
});
})(jQuery);

qTip has no method 'qtip' for dynamic content

I have this interface in my system.
I assign class mailListBtn for all Successful-[] Failed-[] link. When then user click at Successful-[] Failed-[] it will call this js code
$(".mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_"); //Need to split because ID like MCBTN_13
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible"))
$("#C_"+actualId).hide("slow","swing");
$("img#LOADER_"+actualId).show();
var dataString ="action=getMailListByID"+
"&mailID="+actualId;
$.ajax({
type: "POST",
url: "include/get.php",
data: dataString,
cache: false,
async: true,
success: function(html)
{
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
if($("#C_"+actualId).is(":visible"))
$("#CC_"+actualId).show();
else
$("#CC_"+actualId).hide();
reQtip();
}
});
});
reQtip() code
function reQtip()
{
$("img[rel*='template/qTipUpdateContact.php?refID=']").each(function()
{
$(this).qtip({
content: {
text: '<img class="throbber" src="images/loader.gif" alt="Loading..." />',
ajax: {
url: $(this).attr('rel'),
once: false
},
title: {
text: 'UPDATE CONTACT INFO FOR NEWSSID - ' + $(this).attr('title'),
button: true
}
},position: {
at: 'middle left', // Position the tooltip above the link
my: 'right middle',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click mouseenter',
solo: true // Only show one tooltip at a time
},
hide: {
event: 'click'
},
style: {
classes: 'qtip-dark'
}
});
});
}
If you can see, after the content load successful, I call reQtip() function so that the content that have qTip is activate the qTip for each element. The content look like below:-
As you can see, mouse hover at the green button will popup the qTip like below:-
The problem is, for the first time when I click on Successful-[0] Failed-[4] the content display and the qTip function normally. Than I click on Successful-[4] Failed-[9] the content display but qTip error. The error from inspect code in google chrome is Uncaught TypeError: Object [object Object] has no method 'qtip' . For your info, I already include qTip js file inside <head> in my php page. Why the qTip only can run for the first content but error on the second content.
I try to detect if the qTip function exist or not. For that, I add this piece of code on top of my reQtip() function.
if($.fn.qtip)
alert("Function exist");
else
alert("Function not exist");
The result is for the first content it alert "Function exist" than I hover to the icon and the qTip displayed. Than I click another Successful-[] Failed-[] to retrieve another content, than I got alert "Function not exist". My question, is qTip remove their function after we use it?

Found solution for my problem in this post
The problem is with my qTip page. I have js script and include js file inside my qTip page. Remove this or place it inside initial page will solve the problem.
Thank you.

How to call AJAX function from a popup appeared using "Colorbox - a jQuery lightbox plugin"?

I'm using PHP,Smarty, jQuery, Colorbox jQuery plugin, etc. for my website. All the necessary files required have been included in index.tpl file, so I've not mentioned those files here. They are getting included and working fine.
From one smarty template file I'm calling the Colorbox popup. The code for it is as follows:
edit
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".inline_edit_transaction_details").colorbox({href:$(this).attr('href'),width:999, height:999});
});
</script>
{/literal}
The lightbox is also getting displayed properly. For your reference I'm attaching the screenshot here.
Now I want to call a jQuery AJAX function upon clicking on Update link as shown in the attached image. For testing purpose I put an alert message at the beginning of AJAX function but not able to call it. For your reference I'm putting the code from smarty template below.
The code from the Colorbox popup(Smarty template) is as follows:
<td><a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a></td>
The jQuery AJAX function is as below:
$(document).ready(function() {
//This function is use for edit transaction status
$(".edit_user_transaction_status").click(function() { alert("Hello");
$(".edit_user_transaction_status").bind('click', function(){
$.colorbox.close();
});
e.preventDefault();
//for confirmation that status change
var ans=confirm("Are you sure to change status?");
if(!ans) {
return false;
}
var post_url = $(this).attr('href');
var transaction_status_update = $('#transaction_status_update').val();
$.ajax({
type: "POST",
url: post_url+"&transaction_status_update="+transaction_status_update,
data:$('#transaction_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.login_error;
$(".ui-widget-content").dialog("close");
//This variables use for display title and success massage of transaction update
var dialog_title = data.title;
var dialog_message = data.success_massage;
//This get link where want to rerdirect
var redirect_link = data.href;
var $dialog = $("<div class='ui-state-success'></div>")
.html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 500,
height: 80,
close: function(){
document.location.href =redirect_link;
}
});
$dialog.dialog('open');
}
});
});
});
I tried a lot to make a call to this function but couldn't give a call. It's also not giving any errors when I checked in console of firebug. So I think no syntactic errors are there. Can anyone help me in calling this function? Thanks in advance.

$(".edit_user_transaction_status").click(function(e) {
e.preventDefault(); // apply in click event not outside
alert("Hello");
});
or
$(".edit_user_transaction_status").bind('click', function(e){
e.preventDefault(); // apply in click event not outside
$.colorbox.close();
});
reference e.preventDefault

Resizing FancyBox modal when new data dynamically added

I have a form on the following page:
http://mmicet.yazminmedia.com/qseries
(Click the "Keep me updated on the Q" button at the bottom.)
It's a form that uses frmValidator: http://www.javascript-coder.com/. It's basically the same form I'm using successfully on the contact page.
I read on the FancyBox API page that there is a resize function that would resize the modal when new data is added. However, the modal isn't resizing. Instead, my form is getting pushed down and the bottom portion is getting pushed down out of view. (The behavior can be duplicated by simply submitting the form without entering any information in it.)
These are the options I setup for the modal:
$("#qs_button").fancybox({
'titleShow' : false,
'scrolling' : 'no',
'autoDimensions' : false,
'autoScale' : false,
'width' : 600,
'height' : 870,
'showCloseButton': true,
'onClosed' : function() {
$("#login_error").hide();
}
});
I'm firing the resize function on submit of form:
$("#qseries_form").bind("submit", function() {
$.fancybox.resize();
$.ajax({
type : "POST",
cache : false,
url : "/qseries.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
Anyone have any ideas why the resize isn't working?
Thanks!

Just a guess, but shouldn't you resize the Fancybox after the data's been put there? Something like:
$("#qseries_form").bind("submit", function() {
$.ajax({
type : "POST",
cache : false,
url : "/qseries.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
// resize after data's updated...
$.fancybox.resize();
}
});
return false;
});
Hopefully I'm not completely off the mark here!

Just try with this,
Because this worked in one of my recent project where i have to increase/decrease window size on click of radio button.
$('#fancybox-content').css('height','253px');