jQWidgets Forums
jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Close image link
This topic contains 2 replies, has 2 voices, and was last updated by aleceuta 11 years, 3 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorClose image link Posts
-
Hi, I am new on this forum.
I need include a image link on a window, that close this windows, the windows genearates dynamical form grid to an iframe:
index page with grid:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Instituto Idiomas de Ceuta.</title> <link rel="stylesheet" href="lib/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="lib/jqwidgets/jqwidgets/styles/jqx.summer.css" type="text/css" /> <link rel="stylesheet" href="lib/miniJs-miniNotification-e8361e0/css/site.css" /> <script type="text/javascript" src="lib/jqwidgets/scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxwindowregistro").jqxWindow({ height: $(this).innerHeight()-100, width: 1025, maxHeight: $(this).innerHeight()-100, maxWidth: $(this).innerWidth()-100, resizable:false, draggable: false, isModal: true, theme: 'summer', cancelButton: $('#jqxbuttoncerrarregistro'), autoOpen: false }); }) $('#jqxbuttoncerrarregistro').click(function () { $("#jqxwindowregistro").jqxWindow('close') }); $(document).ready(function () { // prepare the data var theme = ""; // Possible values: 'string', 'date', 'number', 'float', 'int' and 'bool' var source = { datatype: "json", datafields: [ { name: 'Expediente_int_50_textbox_textbox_contains__left', type: 'int'}, { name: 'Idioma_string_100_list_list_equal__left', type: 'string'}, { name: 'Curso_string_100_list_list_equal__left', type: 'string'}, { name: 'Ciclo_string_100_list_list_equal__left', type: 'string'}, { name: 'Hora_string_75_list_list_equal__left', type: 'string'}, { name: 'Grupo_string_75_list_list_equal__left', type: 'string'}, { name: 'Fecha Ingreso_date_100_datetimeinput_date__dd-MM-yyyy_center', type: 'date'}, { name: 'Nombre_string_400_textbox_textbox_contains__left', type: 'string'}, ], url: 'data2.php?tabla=curso', filter: function() { // update the grid and send a request to the server. $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); }, cache: false }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { source: dataAdapter, width: '1000', theme: theme, autoheight: true, pageable: true, showfilterrow: true, filterable: true, sortable: true, ready: function(){ var localizationobj = {}; localizationobj.pagergotopagestring = "Ir a pagina:"; localizationobj.pagershowrowsstring = "Columnas a mostrar:"; localizationobj.pagerrangestring = " de "; localizationobj.pagerfirstbuttonstring = "Primero"; localizationobj.pagerlastbuttonstring = "Ultimo"; localizationobj.pagernextbuttonstring = "Siguiente"; localizationobj.pagerpreviousbuttonstring = "Previo"; localizationobj.sortascendingstring = "Orden Ascendente"; localizationobj.sortdescendingstring = "Orden Descendente"; localizationobj.sortremovestring = "Deshacer Orden"; localizationobj.filterstring = "Filtro"; localizationobj.filtershowrowstring = "Mostrar columnas que:"; localizationobj.filterorconditionstring = "O"; localizationobj.filterandconditionstring = "Y"; localizationobj.filterselectallstring = "(Seleccionear Todo)"; localizationobj.filterchoosestring = "Por favor Escoja:"; localizationobj.validationstring = "Valor no valido"; localizationobj.emptydatastring = "Ningun dato que mostrar"; localizationobj.filterselectstring = "Seleccionar Filtro"; localizationobj.loadtext = "Cargando..."; localizationobj.clearstring = "Limpiar"; localizationobj.todaystring = "Ahora"; localizationobj.firstDay = 1; localizationobj.percentsymbol = "%"; localizationobj.currencysymbol = "€"; localizationobj.currencysymbolposition = "Anterior"; localizationobj.decimalseparator = "."; localizationobj.thousandsseparator = ","; var days = { // full day names names: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"], // abbreviated day names namesAbbr: ["Domi", "Lun", "Mar", "Miér", "Juev", "Vier", "Sába"], // shortest day names namesShort: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"] }; localizationobj.days = days; var months = { // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar) names: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ""], // abbreviated month names namesAbbr: ["Ene", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic", ""] }; localizationobj.months = months; $('#jqxgrid').jqxGrid('localizestrings', localizationobj); }, columns: [ { text: 'Expediente', datafield: 'Expediente_int_50_textbox_textbox_contains__left', width: '50', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', cellsformat: '', cellalign: 'left'}, { text: 'Idioma', datafield: 'Idioma_string_100_list_list_equal__left', width: '100', columntype: 'list', filtertype: 'list', filtercondition: 'equal', cellsformat: '', cellalign: 'left'}, { text: 'Curso', datafield: 'Curso_string_100_list_list_equal__left', width: '100', columntype: 'list', filtertype: 'list', filtercondition: 'equal', cellsformat: '', cellalign: 'left'}, { text: 'Ciclo', datafield: 'Ciclo_string_100_list_list_equal__left', width: '100', columntype: 'list', filtertype: 'list', filtercondition: 'equal', cellsformat: '', cellalign: 'left'}, { text: 'Hora', datafield: 'Hora_string_75_list_list_equal__left', width: '75', columntype: 'list', filtertype: 'list', filtercondition: 'equal', cellsformat: '', cellalign: 'left'}, { text: 'Grupo', datafield: 'Grupo_string_75_list_list_equal__left', width: '75', columntype: 'list', filtertype: 'list', filtercondition: 'equal', cellsformat: '', cellalign: 'left'}, { text: 'Fecha Ingreso', datafield: 'Fecha Ingreso_date_100_datetimeinput_date__dd-MM-yyyy_center', width: '100', columntype: 'datetimeinput', filtertype: 'date', filtercondition: '', cellsformat: 'dd-MM-yyyy', cellalign: 'center'}, { text: 'Nombre', datafield: 'Nombre_string_400_textbox_textbox_contains__left', width: '400', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', cellsformat: '', cellalign: 'left'}, ] }); $("#jqxgrid").on("cellclick", function (event) { var column = event.args.column; var rowindex = event.args.rowindex; var columnindex = event.args.columnindex; var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', rowindex); $("#jqxwindowregistro").jqxWindow('open'); $("#jqxwindowregistro").jqxWindow('setContent', '<iframe frameborder="0" scrolling="no" src="registro3.php?id=' + dataRecord.Expediente_int_50_textbox_textbox_contains__left + '" width="100%" height="100%"></iframe>'); }); $("#jqxMenu").jqxMenu({ width: 1000, height: 30, theme: 'base' }); }); </script> </head> <body class='default'> <img src="imagenes/barra_principal_.png" width="1000" height="100"> <div id='jqxMenu'> <ul> <li><a href="#">Home</a></li> <li>Menú Alumnos <ul> <li><a href="#">Formulario Alumnos</a></li> <li><a href="#">Cursos</a></li> <li><a href="#">Creación de Cursos</a></li> <li><a href="#">Listados</a> <ul> <li><a href="#">Listado 1</a></li> <li><a href="#">Listado 2</a></li> </ul> </li> </ul> </li> <li>Menú Preinscripción <ul> <li><a href="#">Formulario Preinscripción</a></li> <li><a href="#">Cursos</a></li> <li><a href="#">Creación de Cursos</a></li> <li><a href="#">Listados</a> <ul> <li><a href="#">Listado 1</a></li> <li><a href="#">Listado 2</a></li> </ul> </li> </ul> </li> <li>Menú Histórico <ul> <li><a href="#">Formulario Histórico</a> </li> </ul> </li> <li><a href="#">Domiciliaciones Bancarias</a></li> <li><a href="#">Utilidades</a></li> <li><a href="#">Sobre</a></li> </ul> </div> <div align="right"> <table width="1000" border="0"> <tr> <td></td> <td width="350" align="right">Administrador</td> <td width="30"><img src="imagenes/user1.png" /></td> <td width="70"><a href="#"><pre>X Logout</pre></a></td> </tr> </table> </div> <div id="jqxgrid"></div> <div id='jqxwindowregistro'><div>Detalle Registro</div><div id='content'></div></div> </div> </body> </html>and the html result of registro4.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Instituto Idiomas de Ceuta.</title> </head> <link rel="stylesheet" href="lib/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="lib/jqwidgets/scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="lib/jqwidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { var ReglaTelefono = function (input, commit) { var filter = /^\(\d{3}\) (\d){2} (\d){2} (\d){2}$/ if (filter.test(input.val())) { return true; } else if (input.val = '(___) __ __ __') { return true; } else { return false; } }; var ReglaNIF = function (input, commit) { nie=false; abc = input.val(); if (abc.substring(0,1) =='X') //en caso de nie validar? { abc=abc.substring(1,9); nie=true; } if (abc.substring(0,1) =='Y') { abc="1"+abc.substring(1,9); nie=true; } dni=abc.substring(0,abc.length-1); let=abc.charAt(abc.length-1); if (!isNaN(let)) { if (nie==true) { //alert('Falta la letra final del NIE (Numero Identificación Extranjero)'); } else { //alert('Falta la letra del NIF'); } return (false); } else { cadena="TRWAGMYFPDXBNJZSQVHLCKET"; posicion = dni % 23; letra = cadena.substring(posicion,posicion+1) if (letra!=let.toUpperCase()) { if (nie==true) { //alert('NIE (Numero Identificación Extranjero) no válido'); } else { //alert("NIF no válido"); } return (false); } } //alert("Nif válido"); return (true); }; $("#register").jqxExpander({ toggleMode: 'none', width: '1000px', showArrow: false, theme: 'base' }); $("#sendButton").click(function () { var validationResult = function (isValid) { if (isValid) { $("#Form").submit(); } } $('#Form').jqxValidator('validate', validationResult); }); $("#TelfInput").jqxMaskedInput({ mask: '(###) ## ## ##', width: 150, height: 22, theme: 'base' }); $("#Telf2Input").jqxMaskedInput({ mask: '(###) ## ## ##', width: 150, height: 22, theme: 'base' }); $('#DomicilioInput').jqxInput({ width: 450, height: 44, theme: 'base' }); $('#dniInput').jqxInput({ width: 150, height: 22, theme: 'base' }); $('#CodPostalInput').jqxInput({ width: 150, height: 22, theme: 'base' }); $('#CiudadInput').jqxInput({ width: 150, height: 22, theme: 'base' }); $('#ObservacionesInput').jqxInput({ width: 450, height: 44, theme: 'base' }); $('#emailInput').jqxInput({ width: 150, height: 22, theme: 'base' }); $('.text-input').jqxInput({ theme: 'base' }); var date = new Date(); date.setFullYear(1987, 1, 10); $('#FechaNacInput').jqxDateTimeInput({ theme: 'base', width: 150, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) }); // initialize validator. $('#Form').jqxValidator({ rules: [ { input: '#NombreInput', message: 'Nombre Obligatorio!', action: 'keyup, blur', rule: 'required' }, { input: '#NombreInput', message: 'Nombre entre 3 y 15 Caracteres!', action: 'keyup, blur', rule: 'length=3,15' }, { input: '#ApellidosInput', message: 'Apellidos Obligatorio!', action: 'keyup, blur', rule: 'required' }, { input: '#ApellidosInput', message: 'Apellidos entre 3 y 25 Caracteres!', action: 'keyup, blur', rule: 'length=3,25' }, { input: '#DomicilioInput', message: 'Domicilio Obligatorio!', action: 'keyup, blur', rule: 'required' }, { input: '#DomicilioInput', message: 'Domicilio entre 3 y 30 Caracteres!', action: 'keyup, blur', rule: 'length=3,80' }, { input: '#dniInput', message: 'NIF Obligatorio!', action: 'keyup, blur', rule: 'required' }, { input: '#dniInput', message: 'NIF Invalido!', action: 'keyup, valuechanged, blur', rule: ReglaNIF }, { input: '#TelfInput', message: 'Num. Telefono no Valido!', action: 'valuechanged, blur', rule: ReglaTelefono }, { input: '#Telf2Input', message: 'Num. Telefono no Valido!', action: 'valuechanged, blur', rule: ReglaTelefono }, { input: '#FechaNacInput', message: 'Fecha Nacimiento Obligatorio!', action: 'keyup, blur', rule: function (input, commit) { if ($('#FechaNacInput').jqxDateTimeInput('value') !== null) { return true; } else { return false; } } }, { input: '#FechaNacInput', message: 'Fecha Nacimiento entre 1/1/1900 y 1/1/2050.', action: 'valuechanged', rule: function (input, commit) { var date = $('#FechaNacInput').jqxDateTimeInput('value'); if(date !== null){ var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2050; }; return result; } }, { input: '#CodPostalInput', message: 'Solo Numeros!', action: 'keyup, blur', rule: 'number' }, { input: '#CodPostalInput', message: 'Código Postal 5 Caracteres!', action: 'keyup, blur', rule: 'length=5,5' }, { input: '#CiudadInput', message: 'Ciudad Obligatorio!', action: 'keyup, blur', rule: 'required' }, { input: '#CiudadInput', message: 'Ciudad entre 3 y 20 Caracteres!', action: 'keyup, blur', rule: 'length=3,20' }, { input: '#emailInput', message: 'e-mail no valido!', action: 'keyup', rule: 'email' }, { input: '#ObservacionesInput', message: 'Observaciones entre 3 y 800 Caracteres!', action: 'keyup, blur', rule: 'maxLength=800' }], theme: 'base' }); }); </script> <style type="text/css"> .text-input { height: 22px; width: 450px; } .register-table { margin-top: 10px; margin-bottom: 10px; } .register-table td, .register-table tr { margin: 0px; padding: 2px; border-spacing: 0px; border-collapse: collapse; font-family: Verdana; font-size: 12px; } h3 { display: inline-block; margin: 0px; } </style> <body class='default'> <div id="register"> <div><h3>Registro --> </h3></div> <div> <form action="/registro3.php?id=5" method="post" name="form1" id="Form"> <div align="right" style="background-image:url(imagenes/content-bg.png); border-bottom-style:groove"> <table border="0"> <tr> <td align="center" width="100"><a href="#"><img src="imagenes/iconos_barra_registro/Imprimir.png" width="32" height="32" /><br>Imprimir</a></td> <td align="center" width="100"><a href="javascript:document.getElementById('MM_update').value='form1_reset'; document.getElementById('Form').submit();"><img src="imagenes/iconos_barra_registro/Deshacer.png" width="32" height="32" /><br>Deshacer Registro</a></td> <td align="center" width="100"><a href="#"><img src="imagenes/iconos_barra_registro/Aplicar.png" width="32" height="32" /><br>Aplicar Cambios</a></td> <td align="center" width="100"><a href="#" id="sendButton"><img src="imagenes/iconos_barra_registro/Guardar.png" width="32" height="32" /><br>Guardar Cambios</a></td> <td align="center" width="100"><a href="#" id="jqxbuttoncerrarregistro"><img src="imagenes/iconos_barra_registro/Cerrar.png" width="32" height="32" /><br>Cerrar Formulario</a></td> </tr> </table> </div> <table align="center" class="register-table"> <tr valign="baseline"> <td nowrap="nowrap" align="right">Expediente:</td> <td>5</td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Nombre:</td> <td><input type="text" name="NOMBRE" id="NombreInput" class="text-input" value="DANIEL" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Apellidos:</td> <td><input type="text" name="APELLIDOS" id="ApellidosInput" class="text-input" value="" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Domicilio:</td> <td><textarea name="DOMICILIO" cols="30" rows="3" id="DomicilioInput" class="text-input" ></textarea></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">NIF:</td> <td><input type="text" name="DNI" id="dniInput" class="text-input" value="0" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Telefono:</td> <td><input type="text" name="TELEFONO" id="TelfInput" class="text-input" value="507399" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Telefono 2:</td> <td><input type="text" name="TELEFONO2" id="Telf2Input" class="text-input" value="" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">E-mail:</td> <td><input type="text" name="EMAIL" id="emailInput" class="text-input" value="" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Fecha de Nacimiento:</td> <td><div id="FechaNacInput"></div></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Código Postal:</td> <td><input type="text" name="CODIGOPOSTAL" id="CodPostalInput" class="text-input" value="51001" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Ciudad:</td> <td><input type="text" name="CIUDAD" id="CiudadInput" class="text-input" value="CEUTA" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Observaciones:</td> <td><textarea name="OBSERVACIONES" cols="30" rows="3" id="ObservacionesInput" class="text-input" ></textarea></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right"> </td> <td></td> </tr> </table> <input type="hidden" id="MM_update" name="MM_update" value="form1" /> <input type="hidden" name="EXPEDIENTE" value="5" /> </form> </div> </div> </body> </html>I want to close window in the link
<a href="#" id="jqxbuttoncerrarregistro"><img src="imagenes/iconos_barra_registro/Cerrar.png" width="32" height="32" /><br>Cerrar Formulario</a>Hello aleceuta,
Correct me if I misunderstood: you would like to open a window, containing an iframe in its content section. In the iframe there is a link, which you would like to click to close the window.
If that is correct, I am afraid it is not possible to do so, because the link and the window are on different pages and jQuery selections from one page to another would not work (you cannot have
cancelButton: $('#jqxbuttoncerrarregistro'), because the link is in a different page).Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I’m sorry, that’s just what I want
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.