I've got a modal dialog that pops up and requests users to change their passwords after a certain condition has been met.
This works perfectly, however, when the request is completed, it returns the whole page including the template.
I run the script in my default layout (APP/View/Layout/default.ctp
) because it needs to be on every page, since a user is logged in and then redirected to the requested page.
I want to know, how do I show only the content of the requested page, and not the template?
Here is my jquery script:
//In the default layout
$(document).ready(function(e) {
var $dialog = $("#view_dialog").dialog(
{
autoOpen: false,
closeOnEscape: false,
closeText: 'hide',
draggable: false,
modal: true,
resizable: false,
hide:"fade",
title: 'Password Change Required',
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Change Now": function() {
if($('#password').val() != "" && $('#confirm').val() != "") {
if($('#password').val() == $('#confirm').val()) {
$.ajax({
type: 'GET',
url: 'pages/password_change',
data: { password:$('#password').val(), usern : $('#usern').val() },
success: function(data) {
if(data.indexOf("SUCCESS") != -1) {
data = data.replace("SUCCESS", "");
$('#passAlert').removeClass('ui-state-error').addClass('ui-state-highlight').html(data).show('fast');
setTimeout(function() { $(this).dialog('close'); },1000);
} else {
data = data.replace("FAIL", "");
$('#passAlert').html(data).show('fast');
}
},
error: function(xhr,ajaxOptions,thrownError) {
data = data.replace("FAIL", xhr.status + ' - ' + thrownError);
$('#passAlert').html(data).show('fast');
}
});
} else {
$('#passAlert').html("Password doesn't match.").show('fast');
}
} else
$('#passAlert').html("Please complete all boxes.").show('fast');
}
}
});
if(<?php echo $showPopup ?>) {
$dialog.dialog("open");
}
At the moment I'm just echoing a single sentence to check the response.