I'm using w3.css and its modal functionality and I am trying to clear the message generated after a successful ajax call once the window is closed. However, when I close the window (by clicking outside the modal window), then opening the modal again, the text from the previous ajax call still is on the screen. Here is the code I have in place for the closing of the modal:
var modal_id = document.getElementById('edit-photo-modal');
window.onclick = function(event) {
if (event.target == modal_id) {
$('#edit-photo-form').find('input:text, select').val('');
$('.w3-row').find('.w3-twothird w3-text-white').html("");
$('.w3-row').find('.w3-threequarter w3-text-white').html("");
modal_id.style.display = 'none';
}
};
the two success messages classes can either be .w3-twothird w3-text-white or .w3-threequarter w3-text-white.
This is a screenshot of a successful edit.
but once I close the modal then reopen it, the success text remains in the modal window. I would like to have it cleared once the modal window loses focus and not have to reload the page in order for it to do so.
If it helps, here is the relevant ajax to this:
$('#save-bw-photo').on('click', function(e) {
e.preventDefault();
$.ajax({
url: "/members/profile/handle-photo-edit",
type: "POST",
dataType: "json",
data: {
bw_image: 1,
album_name: $('#album-name option:selected').val(),
photo: /[^/]*$/.exec($('#selected-photo img').attr('src'))[0],
colorspace: $('#colorspace option:selected').val(),
channel: $('#channel option:selected').val()
}
}).done(function(msg) {
$('#bw-message').attr('style', 'display: initial;');
$('#bw-msg').html(msg.success_bw);
}).fail(function(msg) {
$('#bw-message').attr('style', 'display: initial;');
$('#bw-msg').html(msg.fail_bw);
});
});
Any help would be appreciated
Thanks!
(If the information or question I provided/asked is unclear, please let me know and I will try to clarify it as best as I can)
Instead of:
var modal_id = document.getElementById('edit-photo-modal');
window.onclick = function(event) {
if (event.target == modal_id) {
$('#edit-photo-form').find('input:text, select').val('');
$('.w3-row').find('.w3-twothird w3-text-white').html("");
$('.w3-row').find('.w3-threequarter w3-text-white').html("");
modal_id.style.display = 'none';
}
};
Try
$(document).on('#edit-photo-modal','click',function(){
$('#edit-photo-form').find('input:text, select').val('');
$('.w3-row').find('.w3-text-white').html("");
$(this).hide();
});
Related
I'm submitting a file with ajax.
Until I get the answer from the request, I show a modal window, but if my users click on the modal before it get the answer, the AJAX request gets canceled. I'm looking for a way to prevent that.
I'm using https://github.com/malsup/form/ to post with ajax
Full code is here : http://jsfiddle.net/WC9xn/4/
Thanks
$('form').on('submit', function (e) {
// Show loading modal popup
$("#dialog-modal").dialog({
height: 140,
modal: true
});
$(".ui-dialog-titlebar").hide();
e.preventDefault();
// prevent native submit
$(this).ajaxSubmit({
url: '/unitary/import_ajax',
type: 'post',
dataType: 'json',
iframe: true,
success: function (data) {
$('#dialog-modal').hide();
if (data == 'error') {
alert('error, invalid file');
} else {
var event = jQuery.Event;
submitForm(event, data);
}
}
})
});
function submitForm(event, data) {
//Do some stuff
}
$('form').off('submit').on('submit', function (e) {
// Show loading modal popup
$("#dialog-modal").dialog({
height: 140,
modal: true
});
havent tried, but see if it works, just add the off('submit').
I tried everything without success...
Remember that I'm using ajaxSubmit() with iframe option on. (for compatibility with IE).
Apparently, clicking on the modal actually clicks on the iframe witch cause the POST ajax request to get canceled.
I decided to recreate a modal on my own without jquery. Here's what I'm using now
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="loading_box"></div><span id="loading_txt"><span id="loading_txt">Import...</span>');
$('form').on('submit', function(e) {
loading.appendTo('body');
// disable left click
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
$(this).ajaxSubmit({
[...]
I call content for modal dialog from ajax
$.ajax({
url: "/Clerk/PauseServiceDialog",
success: function (data) {
$("body").append(data);
$("#pauseServiceDialog").modal({ keyboard: false });
}
});
When I close modal I use this code
$(document).on('hidden.bs.modal', ".modal", function (e) {
this.remove();
});
In firebug I see html code is deleted. But if I again call dialog and use some event I get 2 event. How I understand modal dialog do not correct deleted from DOM.
I found answer how fix duplicate event.
$(document).on('hidden.bs.modal', ".modal", function (e) {
var name = "#" + $(this).find("button.btn-primary").attr("id");
$("body").off("click", name);
$(this).remove();
});
You can hide modal by code
$("#pauseServiceDialog").data('bs.modal').hide()
P.S. sorry, i didn't understand notation $(document).on('hidden.bs.modal' in general - you should delete modal element AND object which handle its events ( it stored at $("#pauseServiceDialog").data('bs.modal') )
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);
I have a jquery ui dialog that loads its content via ajax:
$('#register').click(function(e) {
var tag = $('<div></div>');
$.ajax({
url: 'signup.html',
success: function(data) {
tag.html(data).dialog({modal: true}).dialog('open');
}
});
e.preventDefault();
return false;
});
I have a second script within the content that is supposed to close the dialog when the submit button is pressed
$(function() {
$('form #submit').click(function(e) {
$(this).parents('.ui-dialog').dialog('close');
e.preventDefault();
return false;
});
});
When i click the submit button, i get the error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
What is it that i am missing to allow me to close the dialog from the content that has been loaded via ajax?
You have to call dialog('close') on the element where dialog('open') was called before. You're calling the function on$('.ui-dialog')instead of$('.ui-dialog ...')`.
You should define id or class for the tag element in your code:
var tag = $('<div id="signup-id"></div>');
Then find the correct element in click handler like this:
$(this).parents('.ui-dialog').children('#signup-id').dialog('close');
Note: You can find #signup-id in click handler directly like $(this).children('#signup-id') if you're sure that signup.html never contains element with signup-id id.
Define you tag dialog in html
<div id="tag_dialog" style="display:none">
</div>
then on document ready:
$(document).ready(function(){
$('#tag_dialog').dialog({
modal:true,
autoOpen:false,
//you could give some other options such as width, height .....
});
$('#register').click(function(e) {
$.ajax({
url: 'signup.html',
success: function(data) {
$('#tag_dialog').html(data).dialog('open');
}
});
e.preventDefault();
return false;
});
$('form #submit').click(function(e) {
$('#tag_dialog').dialog('close');
e.preventDefault();
return false;
});
});
I need some help here...
Anyone knows how to solve this?: http://jsfiddle.net/Q3BfC/5/
When I submit a form with target="_blank" by defaults opens a new tab. But if try to do it after an ajax request, the forms opens a popup window.
(function($) {
jQuery(document).ready(function() {
var launch = function(p_url) {
var form = $('<form />').hide();
form.attr({'action': p_url, 'target': '_blank'});
form.appendTo(document.body);
form.submit();
form.remove();
delete form;
};
$('#normal').on('click', function() {
launch('http://www.google.com');
});
$('#ajax').on('click', function() {
$.ajax({
type: 'POST',
url: '#',
traditional: true,
success: function() {
launch('http://www.google.com');
}
});
});
});
})(jQuery);
Thanks!
Its not trying to open it as a popup but its blocked by the popup blocker cause open something with target:_blank in a new tab is only allowed when it is the direct result of an user input, like click or keydown.
You will get the same result when you try to open it in a setTimeout:
setTimeout(function() {launch('http://www.google.com')}, 10);