We Keep Coding

Function cannot be called in $(document).ready(function() {

The questionis more of a debuggin/syntax error rather approach .
I have a function(modal confirmation) defined in an external js file which returns a value as such :
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}
Now when I try to call the function inside the $(document).ready(function() {; I get an Uncaught Reference Error.
All the necessary files have been included in calling script. I would like to understand why is this and how i can solve the issue?

Except for the missing curly-brace at the end, and assuming your "necessary files" include jquery-ui, there doesn't seem to be anything wrong with your function. See this jsfiddle, which does not generate any error.
Perhaps the problem is elsewhere in your code? It may help if you can post a Minimal, Complete, and Verifiable example.
References:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css" />
Script:
$(document).ready(function() {
confirmation("What's all this, then?");
});
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}

Function not firing correctly

currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

How to make FancyBox auto start on page load and auto hide after 15 seconds?

I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!

I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE

You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds

javascript button stops working after close

I have a button that opens a dialog and when I close the dialog it stops working. When I save on the dialog screen it continues to work fine.
This is the button that opens the dialog:
<button class="actionbutton" type="button" onclick="addLitigant();">Add Litigant To Case(s)</button>
The code it calls:
function addLitigant(){
console.log("Calling addLitigant()");
editDialog.extendedDialog('loadUrl','CRFilingLitigantDialog.do?action=addLitigant', 'Add Litigant');
}
The close code on the dialog screen:
param['buttons'].push(
{
id: "closeButton",
text: "(C)lose",
accessKey: "c",
click: function () {
jQuery(this).extendedDialog('close');
jQuery(this).html('');
}
}
);
The save button code:
function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
We are using jquery 1.6.2. I have tried adding console.log statements to the addLitigant() function but when I come back from the close it doesn't call anything in the console. If I refresh the page it does begin to work again until we close from the dialog.
This is the immediate function that is on the page that opens the dialog
jQuery(function(){
console.log("function");
verificationDialog = jQuery('<div id="verificationDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:800,
title: "Compare Eflex and Icis"
});
compareDialog = jQuery('<div id="comparisonDialog"></div>').clerkReviewDialogTemplate({
height:400,
width:500,
title: "Imported Person"
});
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
console.log("clicking Save");
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});
jQuery('.saveOnChange').bind('change', function(){
updateLitigants();
});
jQuery('.pin').icisAutocomplete({
mustMatch: true,
source: function(request, response){
getQuickAccess(request, response);
},
change: function(event, ui){
updateLitigants();
}}).each(function(index){
var data = jQuery(this).data('staging-json');
jQuery(this).bind('keydown', function(event){
return f5_handler({
event: event,
onf5key: function(){
var popup = people_popup({elem: this, event: event, data: data, success: function(data){
if(data['pin'] != 'null'){
jQuery(event.currentTarget).val(data['pin']);
}
if(data['masterPin'] != 'null'){
jQuery('#'+jQuery(event.currentTarget).attr('masterPinField')).val(data['masterPin']);
}
compareDialog.extendedDialog('close');
updateLitigants();
}});
compareImportedLitigant(data['id'], popup);
}
});
});
});
});
Thanks,
Tom

looks like a post back issue that makes you lose you bind events - this is the only thing that could cause losing button event - try to replace your immediate function with
function pageLoad() {}
see this $(document).ready() and pageLoad() are not the same!
might help

I compared this code to an older version. I noticed that it worked in an older version and I compared the two. The older version had a change in the edit dialog code, I added the close code to it and it now works.
editDialog = jQuery('<div id="editDialog"></div>').clerkReviewDialogTemplate({
height:600,
width:700,
title: "Edit Litigant",
close: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy').remove();
},
buttons: [
{
id: "save",
text: "S(a)ve",
accessKey: "a",
click: function () {
jQuery('#toAssign option').each(function(){
jQuery(this).attr('selected',true);
});
jQuery('#toUnassign option').each(function(){
jQuery(this).attr('selected',true);
});
editDialog.extendedDialog('postUrl', {url: 'CRFilingLitigantDialog.do?action=updateLitigant', formId: '#crFilingLitigantDialogForm', success: function(){
litigantTabGet('CRFilingLitigantDetail.do', null);
editDialog.extendedDialog ('destroy');
}});
}
}
]
});

jQueryUI Dialog with Ajax Form Won't Close with $(this).dialog("close");

I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});

It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.

this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},