So, I’ve been digging back into this issue a bit, and further investigation reveals that the javascript which normally loads and gets appended after the safecracker form tag is not getting loaded during the AJAX request. The CSS resources for each relevant fieldtype is getting appended after the form.
I’m guessing this is jQuery issue, but I’m wondering if anyone else has any insight on how to make sure the fieldtype JS gets loaded and eval’d via the AJAX request, or manually loaded and eval’d afterward? I’ve tried a few things, but nothing seems to stick.
Here’s my script presently:
$( ".form-dialog-link" ).click(function(e) {
var thisUrl = $(this).attr('href');
$("#content").append('<div id="form-overlay"></div>');
$( "#form-overlay" ).dialog({
autoOpen: false,
dialogClass: "subform",
width: 500,
modal: true,
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$('#form-overlay').load(thisUrl+' #content', function() {
$(".safecracker fieldset label:first, .safecracker #url_title, .safecracker label[for='url_title'], .safecracker label[for='status'], .safecracker .checkbox").hide();
var loadingImage = "/images/interface/loading.gif";
var submitButton = "<input type='submit' value='submit' />";
$('.safecracker').submit(function(event) {
/* stop the form from submitting normally */
event.preventDefault();
$("#output").empty();
$("#output").removeClass();
/* replace the submit button with a loading image to prevent multiple clicks and indicate the form is being processed */
$(".safecracker input[type='submit']").replaceWith(loadingImage);
/* send the form data using post and check the results for any errors*/
$.ajax({
url: thisUrl,
type: "post",
data: $(this).serialize(),
/* If there was some kind of an AJAX error, display an appropriate message or take some other action of your choice */
error: function(jqXHR, textStatus, errorThrown) {
displayAjaxMessage("Sorry, there was an error submitting your form. Please contact CCR by phone for further assistance.");
},
/* parse the HTML returned by EE to see if they forgot to enter an email address or a message.
If so, the HTML will contain a specific error string we can match, and then we can display our own message */
success: function(data) {
if (data.match(/<title>Error<\/title>/)) {
//grab the error message
var error = $(data).find('ul li:first').text();
$("#output").empty();
$("#output").removeClass().addClass("error").html(error);
$("img.loading").replaceWith(submitButton);
} else {
/* clear any error messages still showing in the output area and prep with success message */
$("#output").empty().hide();
$("#output").removeClass().addClass("success").text('Thank you! We have received your submission.');
/* clear fields now that the form has been successfully completed */
$("img.loading").replaceWith(submitButton);
/* display our success message with enough time to read it and then clear output */
$("#output").fadeIn("slow").delay(4000).fadeOut("slow", function() {
$(this).removeClass().html('');
});
$('#form-overlay').dialog('close');
}
}
});
});
});
$('#form-overlay').dialog('open');
e.preventDefault();
});
What this does is, if I have a form which can be loaded normally at http://domain.com/template_group/template, when I need to load it in an overlay from another form, I click on a link with the above href, the click event prevents the redirection, sets that href as a var which gets passed to all the AJAX request url declarations, and the form loads really nicely in the overlay. ...except for the JS, which is problematic for a few fields.
Any help would be great!