We Keep Coding

Triggering event after preventDefault() doesn't work as expected

$(document).on('click', '[data-toggle="if-exist"]', function (e, options) {
options = options || {};
if (options.fileExist) {
return true;
}
var target = e.currentTarget;
var fileId = $(this).data('file');
e.preventDefault();
$.ajax({
url: Routing.generate('checkFile', {file: fileId }),
type: 'HEAD',
statusCode: {
404: function () {
alert('File does not exist');
},
200: function () {
$(target).trigger('click', { 'fileExist': true });
}
}
});
});
When clicking the button the HEAD request is send and when I've got 200 response than the click event is triggered again but this time with fileExist option. Listener is called again (I checked this) but nothing happens, it's like e.preventDefault() would still working. Any ideas?
Solution
trigger() method will trigger jQuery event, but will not trigger default behaviour for a browser, which in my case is redirecting to another page. This code works:
$(document).on('click', '[data-toggle="if-exist"]', function (e) {
var target = this;
var fileId = $(this).data('file');
e.preventDefault();
$.ajax({
url: Routing.generate('checkFile', { file: fileId }),
type: 'HEAD',
statusCode: {
404: function () {
alert('File does not exist');
},
200: function () {
var event = document.createEvent('MouseEvents');
event.initEvent('click', false, false);
target.dispatchEvent(event);
}
}
});
});

use e.stopImmediatePropagation(); to stop multiple calls of ajax.

Close modal window and clean hash in the same function

I load content into a div via ajax. This changes the website hash to #WhateverYouClickedOn, that's fine. I want to clean the hash once the user clicks the x button that closes this modal window. How could i do that?
This is my code
Ajax call
function getPage() {
return window.location.hash.replace(/^#/, '');
}
function updatePage(page, html) {
var navItems = [
'products',
'about',
'storelocator',
'media',
'faq',
'contact'
];
$('.overlay').trigger('show');
// Remove the arrow from the previously selected item
if (navItems.indexOf(page) != -1) {
$(".w-container .w-nav-menu a").removeClass("active");
}
$("#" + page + "-link").addClass("active");
$('.content')
.hide()
.html(html)
.fadeIn();
}
function retrieveContent() {
$('.overlay').trigger('show');
var page = getPage();
if (!page) {
return;
}
$.ajax({
type: "POST",
url: "./load.php",
data: 'page='+page,
dataType: "html",
beforeSend: function() {
$('#canvasloader-container.wrapper').show();
},
complete: function() {
$('#canvasloader-container.wrapper').hide();
},
success: function(msg){
if (msg) {
updatePage(page, msg);
}
}
});
}
$(function() {
retrieveContent();
window.onhashchange = retrieveContent;
});
Overlay / Modal window
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!$(this).hasClass('shown')) return $(this).css('visibility', 'hidden');
});
overlay.on('show', function() {
$(this).css('visibility', 'visible');
$(this).addClass('shown');
return true;
});
overlay.on('hide', function() {
$(this).removeClass('shown');
$(".content").html("")
return true;
});
overlay.on('hide', function() {
$(".w-container .w-nav-menu a").removeClass('active'); // Remove the active class when overlay is off
$(".content").html("")
return true;
});
$('a[data-overlay-trigger=""]').on('click', function() {
overlay.trigger('show');
});
$('a[data-overlay-trigger]:not([data-overlay-trigger=""])').on('click', function() {
$('.overlay.' + $(this).attr('data-overlay-trigger')).trigger('show');
});
})
};
})(jQuery);

Jquery close popup on click

I use this jquery to show my popup,
//ResetPassword Popup display
$(document).ready(function () {
var passwordExpiredVal = $("#isPasswordExpired").html();
if (passwordExpiredVal == "True") {
$("#ResetPasswordModal").modal({
show: 'true'
});
};
});
I use this jquery to pass the new typed password to controller action ON CLICK, once the save button is clicked I want the popup to close
//Reset Password submit
$(document).ready(function () {
$("#submitSave").on("click", function () {
var confirmPassword = $("#txtLgnPasswordConfirmReset").val();
var passwordReset = {
UserName: $("#txtLgnUsername").val(),
Password: $("#hdnOldPassword").val(),
NewPassword: $("#txtLgnPasswordReset").val()
}
if (passwordReset.NewPassword != confirmPassword) {
notifyMessage.showNotifyMessage('error', 'The passwords entered should match', false);
$("#txtLgnPasswordReset").val("");
$("#txtLgnPasswordConfirmReset").val("");
}
else {
$.ajax({
type: "POST",
url: "/Account/PasswordReset",
data: passwordReset,
success: function () {
$("#ResetPasswordModal").modal({
show: 'false'
});
},
error: function () {
alert('failure');
}
});
}
});
});
My jquery function is not helping...
success: function () {
$("#ResetPasswordModal").modal({
show: 'false'
});
},
Any ideas??
Thanks in advance...

The code you are using is unnecessarily initializing the modal again on that element.
Use modal('hide') : Docs,
success: function () {
$('#ResetPasswordModal').modal('hide');
},
If you further wish to use this again, 'toggle' would be a better option.
$('#ResetPasswordModal').modal('toggle')

How to override the jQuery.ajax success function after it has been initialized?

A button click triggers an ajax request. When the user clicks the button a second time while the first request is still loading, i want to override the first request's success function with another one.
Basically I want to do this:
var ajaxRequest = null;
jQuery('#mybutton').click(function () {
if (ajaxRequest) {
ajaxRequest.success = function () {
};
}
ajaxRequest = jQuery.ajax({
url: '...',
success: function () {
console.debug('do something');
}
});
});
But the initial success handler is been called.
How to achieve an override?

You can try the following hack, I have tested it with asynch setTimeout (instead of asynch jQuery.ajax) and it works -
var mySuccessHander = function() {
console.debug('Initial function');
}
var test = jQuery.ajax({
url: '...',
success: function() {
mySuccessHander();
}
});
And when the button is clicked for the second time, execute following -
mySuccessHander = function() {
console.debug('Overridden function');
}

Nice question , this will work..
var isRequestDone = true;
jQuery('#mybutton').click(function () {
var requestParams = {
url: '....',
beforeSend: function () {
isRequestDone = false;
},
success: function () {
isRequestDone = true;
console.debug('do something');
},
error: function () {
isRequestDone = true;
}
}
if (!isRequestDone) {
requestParams.success = function () {
console.log('please wait for a while!');
};
}
jQuery.ajax(requestParams);
});
beforeSend will fire just before the request will go to server , so when request in on the server isRequestDone will be false and hence will change success handler . on success callback from the first request it will again back to original.

You can set the ajax arguments to a variable first so you can modify it later on.
var clicks = 0,
ajaxArgs = {
url: '...',
success: function () {
console.debug('do something');
}
};
$('#myButton').click(function() {
++clicks;
if (clicks > 1) {
// set the success function if clicked more than once
ajaxArgs.success = function () {
console.debug('Success function ' + clicks);
}
}
$.ajax(ajaxArgs);
});
If you want to modify the success function only when ajax is still loading you can do this:
var loading = false,
ajaxArgs = {
url: '...',
success: function () {
console.debug('do something');
}, complete: function () {
loading = false;
}
};
$('#myButton').click(function() {
if (loading) {
// set the success function if ajax is still loading
ajaxArgs.success = function () {
console.debug('Another Success function ');
}
} else {
loading = true;
$.ajax(ajaxArgs);
}
});

jQuery UI Dialog: Close when Click Outside

I have a jQuery UI Dialog. I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function(e) {
e.preventDefault();
$.ajax({
url: $('form.addEdit').attr('action'),
type: $('form.addEdit').attr('method'),
data: $('form.addEdit').serialize(),
open: function(){
$('.ui-widget-overlay').bind('click', function(){
$('div.deleteImageDialog').dialog('close');
})
},
success: function(html) { }
});
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});

Then you have to bind an event to the overlay.
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
// your code...
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('.overlay_sector').bind( 'click', function() {
$("div.deleteImageDialog").dialog('close');
$('.overlay_sector').unbind();
} )
});

I had a similar problem. Went with a simpler code solution based on this thread's answer:
Use jQuery to hide a DIV when the user clicks outside of it
$(document).mouseup(function (e)
{
var myDialog = $("#dialog-confirm");
var container = $(".ui-dialog");
if (myDialog.dialog( "isOpen" )===true)
{
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
myDialog.dialog( "close" );
}
}
});