Title: Custom Messagger with ValidateBox
Post by: eagleeye on April 06, 2016, 12:25:25 PM
Hi friends, i was searching some solution to create Custom Messager with two input box for change password, my code is it, but i don´t need some simple input box . I need some validatebox to check lenght, and content .(function ($) {
function createWindow(title, content, buttons) {
var win = $("<div class=\"messager-body\"></div>").appendTo("body");
win.append(content);
if (buttons) {
var tb = $("<div class=\"messager-button\"></div>").appendTo(win);
for (var btn in buttons) {
$("<a></a>").attr("href", "javascript:void(0)").text(btn).css("margin-left", 10).bind("click", eval(buttons[btn])).appendTo(tb).linkbutton();
}
}
win.window({
title: title,
noheader: (title ? false : true),
width: 350,
padding: 10,
height: "auto",
modal: true,
collapsible: false,
minimizable: false,
maximizable: false,
resizable: false,
onClose: function () {
setTimeout(function () {
win.window("destroy");
}, 100);
}
});
win.window("window").addClass("messager-window");
win.children("div.messager-button").children("a:first").focus();
return win;
}
;
$.extend($.messager, {
password: function (title, msg, fn) {
//var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"password\"/></div>";
/*
var content = "<div class=\"messager-icon messager-question\"></div>" +
"<div>" + msg + "</div>" + "<br/>" +
"<div style=\"clear:both;\"/>" +
"<div class=\"fitem\"><label style=\"width:130px;\">Contraseña Actual:</label><input style=\"width:150px\" type=\"password\" id=\"apassword\" name=\"apassword\" style=\"width:150px\" class=\"messager-pwd\"/></div>" +
"<div class=\"fitem\"><label style=\"width:130px;\">Nueva Contraseña:</label><input style=\"width:150px\" type=\"password\" id=\"npassword\" name=\"npassword\" style=\"width:150px\" class=\"messager-pwd1\"/></div>" +
"<div class=\"fitem\"><label style=\"width:130px;\">Repite Contraseña:</label><input style=\"width:150px\" type=\"password\" id=\"cnpassword\" name=\"cnpassword\" style=\"width:150px\" class=\"messager-pwd2\"/></div>" +
"</div>";
*/
var content = "<div class=\"messager-icon messager-question\"></div>" +
"<div>" + msg + "</div>" + "<br/>" +
"<div style=\"clear:both;\"/>" +
"<label>file:</label><input type=\"file\" name=\"upload\" id=\"upload\" class=\"easyui-validatebox\" validType=\"fileType['xls']\" required=\"true\"></input>" +
"<div class=\"fitem\"><label style=\"width:130px;\">ValidateBox:</label><input type=\"text\" class=\"easyui-validatebox textbox\" data-options=\"required:true,validType:'length[3,10]'\">" +
"<div class=\"fitem\"><label style=\"width:130px;\">Contraseña Actual:</label><input style=\"width:150px\" type=\"password\" id=\"apassword\" name=\"apassword\" style=\"width:150px\" class=\"messager-pwd validatebox\" /></div>" +
"<div class=\"fitem\"><label style=\"width:130px;\">Nueva Contraseña:</label><input style=\"width:150px\" type=\"password\" id=\"npassword\" name=\"npassword\" style=\"width:150px\" class=\"messager-pwd1 validatebox\" data-options=\"required:true,validType:'valminLength[5]'\"/></div>" +
"<div class=\"fitem\"><label style=\"width:130px;\">Repite Contraseña:</label><input style=\"width:150px\" type=\"password\" id=\"cnpassword\" name=\"cnpassword\" style=\"width:150px\" class=\"messager-pwd1 validatebox\" data-options=\"required:true,validType:\"equals['#npassword']\"\"/></div>" +
"</div>";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn($(".messager-pwd", win).val(),
$(".messager-pwd1", win).val(),
$(".messager-pwd2", win).val()
);
return false;
}
};
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = createWindow(title, content, buttons);
win.find("input.messager-pwd").focus();
return win;
},
login: function (title, msg, fn) {
var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>"
+ "<div class=\"righttext\">Login ID: <input class=\"messager-id \" type=\"text\"/></div>"
+ "<div class=\"righttext\">Password: <input class=\"messager-pass\" type=\"password\"/></div>";
var buttons = {};
buttons[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn($(".messager-id", win).val(), $(".messager-pass", win).val());
return false;
}
};
buttons[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = createWindow(title, content, buttons);
win.find("input.messager-id").focus();
return win;
}
});
})(jQuery);
// Funcion para abrir dialogo de cambio de contraseña
function openDialog() {
//$('#dlg-camPass').dialog('open');
var win_cambio = $.messager.password('AgendaNet', 'Cambio de Contraseña', function (r) {
if (r) {
value0 = r;
value1 = win_cambio.find("input.messager-pwd1").val();
value2 = win_cambio.find("input.messager-pwd2").val();
if (value1 == value2) {
$.ajax({
type: "POST", //el envio es por POST
url: "../control_usuarios/change_password.php", //php que recibe y procesa los datos
data: {
apassword: value0,
npassword: value1
}, //los datos de la forma: etiqueta1=valor1&etiqueta2=valor2
dataType: "json", //tipo de datos a manejar
async: true, //la peticion sera asincrona
success: function (result) {
if (result.success) { //si los datos fueron correctos, cambio de pagina
$.messager.alert('Info', 'Su contraseña ha sido cambiada correctamente.', 'info');
} else { //si hubo errores
$.messager.alert('Error', result.error, 'error');
//limpio los input's
$("#apassword").val("");
$("#npassword").val("");
$("#cnpassword").val("");
}
},
error: function (result) { //si hubo error en la ejecucion
alert("Ocurrio un error inesperado, por favor contacte al administrador. Disculpe las molestias.");
//alert("FAILED: "+result.status+' '+result.statusText); //estado del error (pruebas)
}
}); //ajax
} else {
$.messager.alert('AgendaNet','Los campos no son iguales!!','error');
}
}
});
|