Develop Reference

disable <a> tag for a period of time

To simplify my problem, I made a jsfiddle
When I click on "Click me" it displays a box, but when i click on it twice
at the same time, it displays two boxes at the same time, and for my case it should not be possible. The second box should be able to be displayed only if the first box is completly displayed and the user click again on 'Click me'.
How can I achieve that ?
$('#clickme').click(function() {
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
});
#clickme {
cursor: pointer
}
.newDiv {
height: 40px;
width: 40px;
background-color: red;
margin: 5px;
display: none;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a id="clickme">Click me</a>
<div id="container"></div>

A simple solution is to use a flag, to check the state whether action can be performed.
Here complete callback of .show() is used to reset the flag once effect is complete.
var disable = false;
$('#clickme').click(function() {
var elem = $(this);
if (disable == false) {
disable = !disable;
elem.toggleClass('none', disable);
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000, function() {
disable = !disable;
elem.toggleClass('none', disable);
});
}
});
#clickme {
cursor: pointer
}
#clickme.none {
cursor: none
}
.newDiv {
height: 40px;
width: 40px;
background-color: red;
margin: 5px;
display: none;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a id="clickme">Click me</a>
<div id="container"></div>

I think the cleanest solution is to bind and unbind your click handler. No need to use a flag or a timeout.
function clickHandler() {
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
// Unbind click handler until animation is completed
$("#clickme").off("click", clickHandler);
// Begin animation
$div.show('clip', 3000, function() {
// Animation completed. Bind click handler.
$("#clickme").on("click", clickHandler);
});
}
// Initial bind of click handler
$("#clickme").on("click", clickHandler);
Here's a working fiddle.

You can disable the button for the time when the box is being drawn. Like this:
$('#clickme').click(function() {
disabling the button for 3000 sec as the box takes 3000 sec to get rendered.
setTimeout(function(){
$(this).attr('disabled','disable');
},3000);
$(this).removeAttr('disabled');
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
});

So you need to stop execution if the box is still being animated.
I am using the complete argument of jQuery.show method.
var inAnimation = false;
$('#clickme').click(function() {
if(inAnimation)
return;
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
inAnimation = true;
$div.show('clip', 3000, function() {inAnimation = false;});
});

i always use callback after end of animation:
let open = true;
$('#clickme').click(function(){
if ( open ) {
open = false;
$div = $('<div>',{"class" : "newDiv"});
$('#container').append($div);
$div.show('clip',3000, function(){
open = true;
});
}
});
fiddle

If you want a simple solution for your problem you can place an if statement before the assignment of the $div variable:
$('#clickme').click(function() {
if($('.newDiv').length == 0){
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
}
});
$('.newDiv').click(function() {
$('.newDiv').destroy();
}

jQuery script not working on html appended from another page

I've already referred to these answers but that doesn't solve:
jQuery on button click not working after append
Jquery click event not working after append method
I want to load the html for click button on page load like this:(this shows the html with css correctly, but the script is not working)
$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
}, "html" );
But if I load the html i n this way the script works:
$('body').append('<div id="ckit" class="layout-compact is-hiddenx"\
data-ckit-compact style=""><a href="javascript:void(0);"\
class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o">\
</i></a></div><div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>\
<iframe src="/plugins/system/conver/conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" \
name="ckit-full-view" scrolling="no" frameborder="0"allowtransparency="true" \
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; \
margin: 0px; float: none; background: none;"></iframe></div>');
SCRIPT:
var toggleCkitOn = $('[data-ckit-toggle-on]');
toggleCkitOn.on('click', function(e) {
$(ckitFull).removeClass("is-hidden");
$(ckitCompact).addClass("is-hidden");
$('body').addClass("disable-scrolling");
$("html").css({"height": "100%", "overflow": "hidden"});
$("body").css({"position": "relative"});
e.preventDefault();
});
HTML
<div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style="">
</i>
</div>
<div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>
<iframe src="conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" name="ckit-full-view" scrolling="no" frameborder="0" allowtransparency="true" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0px; float: none; background: none;"></iframe>
</div>
I tried to avoid the delegation but doesn't help,
$('body').on('click',toggleCkitOn, function(e) {...});
Tried with other promises to check if ajax functions correctly, and I get all the below get executed without error:
1) success
2) second success
3) finished
var jqxhr = $.get( "/plugins/system/conversekit/conversekit/test.php", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
Working answer (but i want the variables to be global scope, declaring them outside this function makes the click the doesn't work):
$("body").on("click", ".btn-toggle-ckit", function(e) {
var toggleCkitOn = $('[data-ckit-toggle-on]');
var ckitFull = $('[data-ckit-full]');
var ckitCompact = $('[data-ckit-compact]');
var ckitIframe = $('[data-ckit-iframe]');
$(ckitFull).removeClass("is-hidden");
$(ckitCompact).addClass("is-hidden");
$('body').addClass("disable-scrolling");
$("html").css({"height": "100%", "overflow": "hidden"});
$("body").css({"position": "relative"});
e.preventDefault();
} );

function ckitDelegate() {
var toggleCkitOn = $('[data-ckit-toggle-on]');
toggleCkitOn.on('click', function(e) {
$(ckitFull).removeClass("is-hidden");
$(ckitCompact).addClass("is-hidden");
$('body').addClass("disable-scrolling");
$("html").css({"height": "100%", "overflow": "hidden"});
$("body").css({"position": "relative"});
e.preventDefault();
});
};
$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
ckitDelegate();
}, "html").fail(function() {
alert( "error" );
});
This my last opinion, i will give-up if it not working too:
$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
setTimeout(function(){ ckitDelegate(); }, 500);
}, "html");

please try this. Add click event in one function and call that function on DOM load and after the append operation. Like this:
function Init(){
toggleCkitOn.on('click', function(e) {});
}
$(document).ready(function(){
Init();
});
$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
Init();
}, "html" );
Just make sure you have defined the Init() before calling them

Your issue was that the iframe was hiding $('[data-ckit-toggle-on]') and therefore preventing any click events - i.e. the click events weren't firing because you were clicking the iframe, not the a href.
If you remove the iframe (temporarily - solve one issue at a time), then try again, it should at least fire the click event.
Right click on your $('[data-ckit-toggle-on]') element in the DOM then click "Inspect element" to see if it is visible or not.
EDIT
Try this:
$.get("plugins/system/conversekit/conver/test.php",
function(data) { $('body').append(data); },
"html").then(function(data) {
var toggleCkitOn = $('[data-ckit-toggle-on]');
var ckitFull = $('[data-ckit-full]');
var ckitCompact = $('[data-ckit-compact]');
var ckitIframe = $('[data-ckit-iframe]');
$("body").on("click", ".btn-toggle-ckit", function(e) {
alert("hi");
$(ckitFull).removeClass("is-hidden");
$(ckitCompact).addClass("is-hidden");
$('body').addClass("disable-scrolling");
$("html").css({"height": "100%", "overflow": "hidden"});
$("body").css({"position": "relative"});
e.preventDefault();
});
});
If you're still having trouble clicking the a href, try adding a css margin-top to the iframe to where it isn't covering the a href. Let me know.

If your html create dynamic that time you should bind click method.
Write this code after appending your html.
Example :-
$('#buttonOuter').append('<input type="button" id="myid"/>');
$("#myid").unbind();
if($("#myid").length > 0 && $._data( $("#myid")[0], "events" )==undefined){
$('#myid').bind('click',function(){
// write your code
});
}
I think it's working for you

Jquery Modal Doesnt Work On Second Click on content delivered via Ajax

I am loading some html into a div from an ajax call. With in this html content, when clicked opens a jquery modal.
On the first click the modal opens as it should, but on subsequent clicks the modal will not open and get this error in the console:
Uncaught TypeError: $(...).dialog is not a function
Here is the html that is generated via the ajax call which when clicked will open the modal:
<div class="edit" rel="630000311">630000311</div>
Here is the CSS as it relates to the edit class:
.edit {
cursor: pointer;
color: blue;
font-size: 16px;
padding-left:5px;
text-decoration: underline;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=50);
}
here is my jquery
$(document).ready(function(){
$('body').on('click','.edit', function(){
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$("#viewDialog").dialog({
width: 1140,
modal: true,
position: { my: 'top', at: 'top+150' },
});
var partID = $(this).attr('rel');
$.ajax({
async: false,
type: 'GET',
url: "parthistory.php",
data: {
"partID" : partID
},
success: function (data) {
$("#viewDialog").html(data);
}
});
});
});
I have tried adding $(document).trigger('ready'); into the success, but this does not help
Note Here is the jquery I am loading:
code.jquery.com/jquery-1.11.1.min.js"
code.jquery.com/ui/1.11.1/jquery-ui.min.js"
code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"

Try this:
$(document).ready(function(){
$("#viewDialog").dialog({
width: 1140,
modal: true,
autoOpen: false,
position: { my: 'top', at: 'top+150' }
});
$('body').on('click','.edit', function(){
$("#viewDialog").dialog('open');
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
var partID = $(this).attr('rel');
$.ajax({
async: false,
type: 'GET',
url: "parthistory.php",
data: { "partID" : partID },
success: function (data) {
$("#viewDialog").html(data);
}
});
});
});
It is a common mistake to instantiate the dialog inside of an event such as a click, and then as a result, the dialog will work the first time due to an autoOpen property being true by default. On the next click, the attempt to instantiate the dialog will be ignored, and the dialog will not open.
The fix: Instantiate your dialog outside of the on click, set autoOpen to false, and open it inside of the desired event instead.
This stack overflow question has a great answer that explains this more in-depth.
Also, you can remove the comma after you set your position value in your dialog since it is the last property that you are setting.
Sidenote:
Check your versions of jQuery that you are importing. Odd problems similar to this can arise when multiple versions or out-dated versions of jQuery are imported.

JQuery fade in while sliding down?

The script below does not fire the slideDown and fadeTo at the same time. It does not fade in until the slide down finishes.
<script>
$( document ).ready(function() {
var obj = $("#example");
obj.slideDown(450);
obj.fadeTo(450,1);
});
</script>
How can I simultaneously slide the object down while also fading it in?
Also, the object is just a normal div.

When you use slideDown and fadeTo, both of these calls are added to a queue(fx queue) and is executed one after another.
You can use .animate() to animate a set of css properties
$(document).ready(function () {
var obj = $("#example");
obj.animate({
opacity: 1,
height: 'show'
}, 450);
});
$(document).ready(function() {
var obj = $("#example");
obj.animate({
opacity: 1,
height: 'show'
}, 450);
});
#example {
display: none;
opacity: 0;
white-space: pre-line;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="example">
$(document).ready(function () {
var obj = $("#example");
obj.slideDown(450);
obj.fadeTo(450, 1);
});
</div>

obj.slideDown({duration: 450, queue: false});
obj.stop().fadeTo(1000, 1);
Don't queue fadeTo(), fadeIn()/fadeOut()

How to shadow everything and disable all other jQuery functions on ajax call

I have this ajax function:
function callpage() {
$('#formcontent').empty().html('<p class="vent">Pleace wait</p>');
var form = $('form#sog');
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(msg) {
$('#formcontent').css("border", "none").html(msg);
}
});
}
When it is called I want to shadow everthing else, then the formcontent div and all other jquery functions should be disabled until the ajax call has succeeded.
Update:
My toggle function that should be disabled when callpage is called until it is succeeded:
$('#search').hover(
function () {
$('#search').animate({width: '400px'}, 500, function() {});
},
function () {
$('#search').animate({width: '200px'}, 500);
callpage();
}
);

You could call an overlay when the AJAX call start with AJAXStart and then hide it with ajaxComplete
$(document).ajaxStart(function(){
$("#overlay").show();
});
$(document).ajaxComplete(function(){
$("#overlay").hide();
});
Or you can put everything in the call:
$.ajax({
type: form.attr('method'),
beforeSend: function(){$("#overlay").show();},
complete: function(){$("#overlay").hide();},
url: form.attr('action'),
data: form.serialize(),
success:function(msg){$('#formcontent').css("border", "none").html(msg);}
});
EDIT i take the overlay from the other answer
#modal-overlay {
position: fixed;
z-index: 10;
background: black;
display: block;
opacity: .75;
filter: alpha(opacity=75);
width: 100%;
height: 100%;
}
For your function you could add some extra logic and check if the overlay is visible or not
$('#search').hover(
function () {
var overlayDisplayed = $("#overlay").is(":visible");
if(!overlayDisplayed){
$('#search').animate({width: '400px'}, 500, function() { });
}
},
function () {
var overlayDisplayed = $("#overlay").is(":visible");
if(!overlayDisplayed){
$('#search').animate({width: '200px'}, 500);
callpage();
}
}
);

People usually code an overlay div with the CSS like:
#modal-overlay {
position: fixed;
z-index: 10;
background: black;
display: block;
opacity: .75;
filter: alpha(opacity=75);
width: 100%;
height: 100%;
}
So, when it's loading you just call $("#modal-overlay").show() (or $("#modal-overlay").fadeIn()) and when it finishes loading you just call $("#modal-overlay").hide() (or $("#modal-overlay").fadeOut()).
This div goes over all the rest of the elements so you don't need to disable all the other jQuery functions.

To disable other functionality call ajax with this parameter:
async : false // (default: true)
// http://api.jquery.com/jQuery.ajax/
To shadow you can create a semi-transparent div on the top (I won't describe the process) with width and height of the browser window on beforeSend and remove it on success, error or complete (depends of what method will you use).

This is the complete solution which I am using: (As I posted in https://stackoverflow.com/a/43490514/1726296)
Following are the sections:
CSS for overlay. "fixed" is used to cover whole page content, not just screen height and widths. You can use background color or gif
Attaches to "beforeSend" event of jQuery Ajax call. Creates the overlay on demand and shows it.
Upon completion of request, it removes the overlay from DOM
CSS:
.request-overlay {
z-index: 9999;
position: fixed; /*Important to cover the screen in case of scolling content*/
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}
JavaScript:
$.ajax({
url: '/*your url*/',
beforeSend: function () {
$('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
$("#requestOverlay").show();/*Show overlay*/
},
success: function (data) {
/*actions on success*/
},
error: function (jqXhr, textStatus, errorThrown) {
/*actions on error*/
complete: function () {
$("#requestOverlay").remove();/*Remove overlay*/
}
});
About "disable all other jquery functions on ajax call" in your question ? What do you mean ? Even though Ajax calls as async in nature, usually, calls are implemented in sync by developer. There are rare cases where there will be parallel Ajax calls happening simultaneously in a page. In that case, its up to the developer to have appropriate techniques.