Posts Tagged ‘ AJAX ’

Modal Pop Up Ajax – Forzar Evento Click


Si tenemos un modal popup extender con ajax, y queremos que los botones de Aceptar y Cancelar típicos del formulario actúen tanto para ocultar y validad el contenido del modal pop up, deberemos agregar el siguiente código:

–>Funciones javascript:
function fnClickOK(sender, e)
{ __doPostBack(sender,e); }
//Muestra el modalpopup
function ShowModalPopup()
{
var modal = $find(‘ctl00_ContentPlaceHolder1_mdlPopup’);
modal.show();
}

//Oculta el modalpopup
function HideModalPopup()
{
var modal = $find(‘ctl00_ContentPlaceHolder1_mdlPopup’);
modal.hide();
}

–> Configuracion modal pop up

<cc1:ModalPopupExtender ID=”ModalPopUP” runat=”server” PopupControlID=”mdlPopup” TargetControlID=”mdlPopup” BackgroundCssClass=”modalBackground” CancelControlID=”btnCancelar” OnCancelScript=”HideModalPopup()”> </cc1:ModalPopupExtender>

(Usamos los scripts de javascript para ocultar el popup, también podemos agregar OKControlID con el btnAceptar).

–> Código .NET Page_Load:
btnAceptar.OnClientClick = String.Format(“fnClickOK(‘{0}’,'{1}’)”, btnAceptar.UniqueID, “”);
btnCancelar.OnClientClick = String.Format(“fnClickOK(‘{0}’,'{1}’)”, btnCancelar.UniqueID, “”);

(Con este código forzamos a que haga el código que tenemos en los botones btnAceptar y btnCancelar en el interior del popup)

Modelpopup AJAX problema visualización ActiveX


Después de mirar en unos cuantos foros sin hallar una solución, (el problema es que donde se visualiza el activex no se visualiza el modelpopup con lo cual no tapa toda la página) y ver cosas que no funcionaban  (z-index con el CSS) o me complicaban la vida (iframe conteniendo el control Activex), la solución la tenía delante de mis narices con javascript y una simple tabla que contiene el ActiveX.

Tenía dos eventos en javascript que me interceptaban cuando cargaba la página para mostrar el modal popup y una función para mostrar o no la tabla que contiene el activex

<script type=”text/javascript” language=”Javascript”>

//Código para el modelpopup
// CAPTURA EVENTOS
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

//cuando carga la pagina hace el evento

function beginRequest(sender, args)
{
$find(‘ModalProgress’).show();       //Mostramos el modalpopup
mostrarOcultarTablas(‘idTabla’,’none’);
}

//Cuando acaba el evento de carga
function endRequest(sender, args)
{
// TODO EVENTO QUE INICE POSTBACK MUESTRA PROGRESO
$find(‘ModalProgress’).hide();
mostrarOcultarTablas(‘idTabla’,’block’);
}

function mostrarOcultarTablas(id,display)
{
var elem = document.getElementById(id);
elem.style.display = display;
}

</script>

El Css del modelpopup y código vale cualquiera que encontréis por ahí…