We Keep Coding

clearing ajax success message upon modal close

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

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

How to make $.get call during form submission?

I don't want to submit my form with AJAX, but I want to make a progress bar by making a couple of GET requests to the server during form submission, since the submission might take a while with multiple file uploads. I've found that in webkit browsers, I can't make GET requests while the form is submitting and I was seeing that submitting the form to an iframe would allow me to do it.
The markup looks like this:
<form action="/my-action" target="target-iframe">
...
</form>
<iframe name="target-iframe"></iframe>
And the JavaScript:
$(document).ready(function() {
$("form").on("submit", function() {
$.get("/other-action", function(data) {
// Use data returned here
});
});
});
I'm still not getting data back on the GET request--how can I get this to work?

$(document).ready(function() {
$("form").on("submit", function(e) { //add a parameter e - the event object
e.preventDefault(); //stop the form from submitting
$.get("/other-action", function(data) {
// Use data returned here
});
});
});
EDIT
Set a flag that won't allow the form to submit until you've received your response form your get request. Once you've received your response, set your flag to allow your form to submit and then resubmit it programmatically.
$(document).ready(function() {
var canISubmit = false;
$("form").on("submit", function(e) { //add a parameter e - the event object
var el = $(this);
if(!canISubmit) {
e.preventDefault();
$.get("/other-action", function(data) {
canISubmit = true;
el.submit();
});
}
});
});
The only way to be certain that your $.get request was completed is to make sure that the form doesn't submit and redirect the page until your $.get request completes.
EDIT #2
$(document).ready(function() {
$("form").on("submit", function(e) { //add a parameter e - the event object
e.preventDefault();
$.post("url",$(this).serialize())
.done(function(response,status,jqXHR) {
$.get("/other-action")
.done(function(response,status,jqXHR) {
//other stuff done
//refresh the page or do whatever....
})
.fail(function() {
//$.get failed
});
})
.fail(function() {
//$.post failed
});
});
});

Close dialog box from within AJAX loaded content

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

jQuery.ajax not working in IE7/8

Something in my script is breaking IE.
I'm looking on a collection of links with a class, and hijacking the URL's.
Clicking a link will animate the height and reveal a message. It also
does an ajax request to mark the message as read.
However, in IE it simply goes to the URL instead of staying on the page and processing the http request.
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
return false;
});
function toggle_message(m) {
var link = m.target;
var parent = $(link).parent().parent();
console.log(link.href);
$.ajaxSetup({
url: link.href,
dataType: 'json',
timeout: 63000,
type: 'GET',
cache: false
});
if($(parent).hasClass('unread')) {
$(parent).addClass('read').removeClass('unread');
$.ajax({
complete: function(r, textStatus) {
console.log(r.responseText)
}
});
}
if($(parent).find('.body_wrapper').hasClass('collapsed')) {
$(parent).find('.body_wrapper').addClass('expanded').removeClass('collapsed');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
} else {
$(parent).find('.body_wrapper').addClass('collapsed').removeClass('expanded');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
}
}
any ideas what's causing this issue?
http://support.cooper.krd-design.net/
tester: 12345 if you want to review the page
Thanks
Rich

Adding
e.preventDefault();
before toggle_message in the first function should work, although return false should as well.

I don't have access to IE right now but I think you could try preventing the default click event to fire in your click()-function like so:
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
e.preventDefault();
});
More on .preventDefault() here: http://api.jquery.com/event.preventDefault/