Resizing FancyBox modal when new data dynamically added - javascript

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');

Related

TypeError: oTable.fnReloadAjax is not a function - DataTables

i thought i will have no more problems with dataTables as its working now even the refresh.
Turns out some time it works in some places, but in some places it just give this stupid error.
TypeError: oTable.fnReloadAjax is not a function
Well i have a functon which adds new data in table, after success i want datatable to refresh.
it did work on other view but now As i have created this view, it is not working.
Im using Ignited Datatables.
i have a common.js file includes the datatables script. this script is working fine.
function commonDataTables(selector,url,aoColumns){
var responsiveHelper;
var breakpointDefinition = {
tablet: 1024,
phone : 480
};
oTable = selector.dataTable({
sPaginationType: 'bootstrap',
oLanguage : {
sLengthMenu: '_MENU_ records per page'
},
"autoWidth" : false,
"aoColumns":aoColumns,
"bServerSide":true,
"bProcessing":true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": url,
"iDisplayLength": 25,
"aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
'fnServerData' : function(sSource, aoData, fnCallback){
$.ajax ({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}); //end of ajax
},
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
responsiveHelper.createExpandIcon(nRow);
return nRow;
},
fnPreDrawCallback: function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(selector, breakpointDefinition);
}
},
fnDrawCallback : function (oSettings) {
// Respond to windows resize.
responsiveHelper.respond();
}
});
}
Then in my Codeigniter View file.
oTable = '';
//Data Tables Script Here.
var selector = $('#ManageTabs');
var url = "{{base_url()}}admin/configurations/listTabs_DT/";
var aoColumns = [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Tab Name */ null,
/* Tab Order */ null,
/* Tab Desc */ null,
/* Actions */ null
];
commonDataTables(selector,url,aoColumns);
//End Of dataTables Script..
i am using oTable as global variable so defined the oTable outside the document.ready function
var oTable;
i know its a bad practice to use global variable but i wanted to find a work around to make the datatable refresh all the data.
Well this global variable Method did worked out for 1 view but in this next view i get the error which i told you already.
Here, below is the code of the button where in success it should have performed its duty but instead it gave error..
$('#createTabBtn').on('click', function(e){
//e.stopImmediatePropagation();
e.preventDefault();
var selector = $('#createTabModelForm');
HRS.formValidation(selector);
if(selector.valid()){
var formData = {
TabName : $("#cTabName").val(),
TabOrder : $("#cTabOrder").val(),
TabDesc : $("#cTabDesc").val()
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewTab/",
dataType:"json",
data: formData,
success: function(output){
if (output == true){
oTable.fnReloadAjax();
}
}
});
//Do Stuff After pressing the Create Button.
// Close the Modal
$('#addNewTabModal_ManageTabs').modal('hide');
// Reset All the TextBoxes and CheckBoxes
$("#createTabModelForm")[0].reset();
// Reset/Empty All the Select2 Dropdowns
//jQuery('.select2-offscreen').select2('val', '');
}
else{
//The Else Portion if you want Something else to Happen if not validated Form
}
});
Please can anyone know the best way to refresh the dataTables..
OMG, i forgot to add the fnReloadAjax.js file. i added that in first view but forgot to add in this view..
so anyone if face any problem like this, just see if the js file is attached.
being careless cost me my time but eventually problem solved.
But still there is a issue of Global Variable i mean i use global variable to refresh the grid.
if anyone has better option to use this fnreloadajax function. plz share.

Putting 'document' vs 'the selector itself' in jQuery?

Guys I have 2 questions which is i think related in some ways I guess. First:
What is the difference between these two:
$(document).on('click','#someselector', function() {
//do something
});
vs this
$('#selector')on('click', function(){
/do something
});
Sometimes both works, sometimes it doesn't.
Number 2 question:
I created a jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
So as you can see, the id is passed to the function, many will call this dialog and pass a unique id to it. The id will then be assigned only to the Ok button.
So when i call this function to load a unique dialog:
add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");
When i press ok with this code:
$(document).on('click','#my-unique-dialog-id', function () {
//Do some ajax call here
});
I get this JS error: TypeError: s is undefined
But the ajax is successful. I just want to know what that error is.
So when I say it is related to the first question is because when i replace the click code with this:
$('#my-unique-dialog-id').on('click', function () {
//Do some ajax call here
});
It doesn't work anymore.
Thanks
$(document).on('click', 'someselector', function() ...);
is delegation syntax. It allows you to bind a handler to elements that may not exist at the time that you execute the code. See:
Event binding on dynamically created elements?
$('someselector').on('click', function() ...);
only binds the handler to the element(s) matching the selector at the time you execute this code.
I marked the first answer correct because I know I did not put enough info on how to debug the second question, but In case someone might encounter the same error i had, I found out why. So when you initialize your jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
Make sure to include the click event of the buttons like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok',
click : function () {
//include the click event, even if you have nothing to put here.
}
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}

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);

jquery ui dialog cancel for ajax request

Im trying to send multiple pieces of information via a form submit. On this submit I would like to return false (cancel page request as it has been ajax) and close the form. Unfortunately close seems to also do return, true i assume.
So that the post request doesn't fail. This leaves the dialog still on the screen.
And if I call $("#dialog-form").dialog("close"); then return false does not run and the page changes.
If anyone knows how to fix this or if im doing something wrong it would be very helpful:
javascript:
$('#modifyConsoleForm').submit(function(evt) {
$.ajax({
type : 'POST',
url : jQuery("#modifyConsoleForm").attr("action"),
data : jQuery(this).serialize(),
dataType : "json",
success : function(data) {
hideError();
},
error : function(data) {
setError('modify of console failed');
}
});
$("#dialog-form").dialog("close");
return false;
});
and my dialog initialisation:
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
I have also tried always returning false in the dialogs close but it didnt seem to work.
Am I missing something?
Try using event.preventDefault() to stop the page changing
eg:
$('#modifyConsoleForm').submit(function(evt) {
evt.preventDefault();
$.ajax({
type : 'POST',
url : jQuery("#modifyConsoleForm").attr("action"),
data : jQuery(this).serialize(),
dataType : "json",
success : function(data) {
hideError();
},
error : function(data) {
setError('modify of console failed');
}
});
$("#dialog-form").dialog("close");
return false;
});
Closing the dialog and returning true/false should be done when the ajax request has been finished, in the success and error functions.
It is also wise that you put an activity indicator while you run ajax requests and hide/remove it once you got the response from the server, this way users know that there is a process going on.

Fancybox error : t is undefined

function Share(url,a) { var url; var a; $.fancybox(
{ 'href': 'add.php' },
{
frameWidth: 750,
frameHeight: 430,
overlayShow: true,
ajax: {
type: "POST",
data: 'url='+url+'&a='+a
}
}
);}
fancybox is working only first page , another pages with not work
i using 1.3.4 version and calling Share function is :
<div class="Share"><a onclick="Share('<?=$url?>','<?=$a?>');return false;"href="#"><img src="play.gif" border="0"></img></a></div>
i use a fancybox for search results,next page function is here :
function page(p) {var serialized = $('form#searc').serialize(); $('#p').html('<img src="spinner.gif" border="0">');$.ajax({type:'POST',url:'search.php',data:serialized+'&p='+p,success: function(pg) {$('.Results').html(pg);}});}
calling from
<div class="nxt"><a onclick="page('<?=$p+1;?>');return false;"href="#" >next</a></div>
I was facing same problem in fancybox where second click was not working for light box. I was getting error :-
TypeError: t is undefined
What i try is:-
please set fancybox type as iframe and set its height & width accordingly.. it works for me.
jQuery.fancybox({
'href' :URL,
'type':'iframe'
});
I hope this will help you!
this error show when fancybox call before its file load,
you can call fancybox after page load:
$(window).bind("load", function() { //call fancybox here });

Categories