Validacion de un formulario dentro de un Modal con Jquary, Ajax y Php

Deseo que mi Formulario que se encuentra dentro de mi Modal fuincione, pero no lo eh logrado, no se ejecuta ninguna de las opciones. deseo hacer un login de un administrador de la pagina la cual quiero que se efectue el fomrulario en el modal, buscando en la base de datos con php para ver si es valido el usuario. No me funciona pero tampoco en el inspector no me muestra ningun error, ni en el console me muestra el console.log que tengo en mi js.

<button type="button" id="ad"><img id="admi" src="img/admin.png"></button>

$  (function(){      $  ("#fmodal").on("submit", function (e) {         e.preventDefault();         $  .ajax({             url: "php/vale.php",             method: "POST",             data: $  (this).serialize(),             success: function (result) {                 console.log(result);                 if(parseInt(result)){                     console.log(result);                     window.location.href="admi.html"                 }else{                     console.log(result);                     alert("Usuario Invalido");                 }              }         });     }); }); 

Es Este mi codigo html del modal.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal" tabindex="-1" role="dialog" id="modaladmin">         <div class="modal-dialog" role="document">             <div class="modal-content">                 <div class="modal-header" style="background-color: #970007;">                     <font size=2 color="white">                         <h5 class="modal-title" align="center">Iniciar Sesión</h5>                     </font>                 </div>                 <form method="POST" id="fmodal">                     <div class="modal-body">                     <p>Por favor, si es Administrador ingrese los siguentes datos:</p>                     <input type="text" name="adcor" id="adcor" placeholder="Usuario">                     <input type="password" name="contra" id=contra placeholder="Contraseña">                     </div>                     <div class="modal-footer" style="background-color: #F4F4F4;" align="center">                     <button type="submit"  id="mis">Siguiente</button>                 </div>             </form>              </div>         </div>     </div> 

Es etes mi codigo php para validar mi formulario con la base de datos

    <?php include "conexion.php"; $  link=conectarse();  $  usuario=$  _POST['adcor']; $  contraseña=$  _POST['contra'];  $  query ="SELECT * FROM Admin WHERE Usuario='$  usuario' AND Contraseña='$  contraseña'"; $  result=mysqli_query($  link, $  query); $  num_rows = mysqli_num_rows($  result);  if($  num_rows == 1){          echo 1;     }else{          echo 0;     }  mysqli_close($  link);   ?> 

Jumping to anchor within modal with a fixed header

Hi all,
I am having a bit of a problem.
I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine.
However when styling, I would like to have a fixed header as the ".content" div scrolls to the anchor.
When ".content" has a height of 80vh it looks fine, but the script doesn't scroll to the anchor.
When ".content" has a height of 80% the script works, but the fixed header doesn't stay fixed and scrolls with the ".content".
How can I…

Jumping to anchor within modal with a fixed header

Como desplegar ventana modal de bootstrap con condicional de jquery?

No tengo mucho conocimiento sobre bootstrap. Quiero hacer una condicion para desplegar la ventana modal. Si los campos A y B estan vacíos, quiero mostrarla. de lo contrario no se debe mostrar. Este es mi codigo:

if(username=='undefined' && password=='undefined'){   	 	console.log(username);   	 	 $  ('#myModal').modal({   	 	 	show:true   	 	 });   	 	login.username="";login.password="";   	 }else{   	 	$  ('#myModal').modal({   	 	 	show:false   	 	 });   	 }
<form> <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info" ng-click="login.ingresar()">Aceptar</button>                        </form>            <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">   <div class="modal-dialog" role="document">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close cerrarModal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                </div>       <div class="modal-body">         ...       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>     </div>   </div> </div>

Lo que necesito en si es validar unos campos, para lo que quiero desplegar una ventana modal con los errores en caso de que los campos esten vacios, pero cuando no lo esten, necesito que el formulario se envíe. Pueden darme una guía porfis? Actualmente se muestra esten o no esten llenos los campos

Error previsualizar imagen en modal

Tengo un boton para crear un usuario, al apretarlo se abre una ventana modal, con todos los campos en blanco, y una imagen tipo anonymus, que se cambia por medio de js al subir una foto (antes de darle al boton para guardar los datos)

Luego tengo una tabla con todos los usuarios listados, y cada fila tiene un boton para editar a cada usuario. Si apreto el boton de editar, se abre un modal que me trae los datos actuales del usuario, incluyendo la previsualizacion de su foto.

El problema es el siguiente: Cuando abro la pagina, y le doy click en crear usuario, me muestra la imagen anónima, como debe ser.

Luego doy click en el boton editar de cualquier usuario, se abre su ventana modal que muestra informacion, la cierro sin hacer cambio alguno.

Cuando vuelvo a apretar el boton para agregar usuario, me trae en lugar de la imagen anonima, la imagen del ultimo usuario al que dí click en editar.

Boton de agregar usuario:

<button class="btn btn-primary btnAgregarUsuario" data-toggle="modal"  data-target="#modalAgregarUsuario">Agregar Usuario</button> 

Modal de Agregar Usuario

<div class="modal fade" id="modalAgregarUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">    <div class="modal-dialog modal-dialog-centered" role="document">      <div class="modal-content">      <form role="form" method="post" enctype="multipart/form-data" action="">              <div class="modal-header bg-dark">                <h5 class="modal-title">Agregar Usuario</h5>                <button type="button" class="close" data-dismiss="modal" aria-label="Close">                 <span aria-hidden="true" class="text-white">&times;</span>               </button>              </div>              <div class="modal-body">                <div class="card-body">                 ...                  <!-- Entrada para la foto -->                 <div class="form-group">                       <div class="input-group">                         <div class="input-group-prepend">                           <span class="input-group-text" width="20%"><i class="fa fa-camera"></i></span>                         </div>                         <div class="custom-file">                           <input type="file" class="custom-file-input nuevaFoto" name="nuevaFoto">                           <label class="custom-file-label" for="nuevaFoto">Seleccionar foto</label>                         </div>                        </div>                 </div>                  <div class="form-group">                       <img class="img-thumbnail rounded mx-auto d-block previsualizar" src="vistas\img\usuarios\anonymous.png" alt="Foto de perfil actual"  width="200px ">                       <p class="text-center text-muted">Foto de perfil actual</p>                 </div>                </div>              </div>              <div class="modal-footer">               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>               <button type="submit" class="btn btn-primary">Guardar</button>             </div>    <?php      $  crearUsuario = new ControladorUsuarios();     $  crearUsuario -> ctrCrearUsuario();    ?>   </form> </div> 

Boton de Editar Usuario

  <button class="btn btn-warning btnEditarUsuario"    idUsuario="'.$  value['id'].'" data-toggle="modal" data-    target="#modalEditarUsuario"><i class="fa fa-pencil-alt"></i></button> 

Modal de Editar Usuario

<div class="modal fade" id="modalEditarUsuario" tabindex="-1" role="dialog"  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">    <div class="modal-dialog modal-dialog-centered" role="document">      <div class="modal-content">       <form role="form" method="post" enctype="multipart/form-data" action="">              <div class="modal-header bg-dark">                <h5 class="modal-title">Editar Usuario</h5>                <button type="button" class="close" data-dismiss="modal" aria-label="Close">                 <span aria-hidden="true" class="text-white">&times;</span>               </button>              </div>              <div class="modal-body">                <div class="card-body">                 ...                  <!-- Entrada para la foto -->                 <div class="form-group">                       <div class="input-group">                         <div class="input-group-prepend">                           <span class="input-group-text" width="20%"><i class="fa fa-camera"></i></span>                         </div>                         <div class="custom-file">                           <input type="file" class="custom-file-input nuevaFoto" name="editarFoto">                           <label class="custom-file-label" for="editarFoto">Seleccionar foto</label>                         </div>                        </div>                 </div>                  <div class="form-group">                       <img class="img-thumbnail rounded mx-auto d-block previsualizar" src="" alt="Foto de perfil actual"  width="200px ">                       <p class="text-center text-muted">Foto de perfil actual</p>                       <input type="hidden" id="fotoActual" name="fotoActual">                 </div>                </div>              </div>              <div class="modal-footer">               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>               <button type="submit" class="btn btn-primary">Guardar</button>             </div>          <?php                 $  editarUsuario = new ControladorUsuarios();                 $  editarUsuario -> ctrEditarUsuario();          ?>    </form> </div> 

Método JS para previsualizar datos al darle click al boton editar

$  (".btnEditarUsuario").click(function(){      var idUsuario = $  (this).attr("idUsuario");       var datos = new FormData();     datos.append("idUsuario", idUsuario);      $  .ajax({          url: "ajax/usuarios.ajax.php",         method: "POST",         data: datos,         cache: false,         contentType: false,         processData: false,         dataType: "json",         success: function(respuesta){             $  ("#editarNombre").val(respuesta["nombre"]);             $  ("#editarUsuario").val(respuesta["usuario"]);             $  ("#editarPerfil").html(respuesta["perfil"]);             $  ("#editarPerfil").val(respuesta["perfil"]);             $  ("#fotoActual").val(respuesta["foto"]);               $  ("#passwordActual").val(respuesta["password"]);              if(respuesta["foto"] != ""){                 $  (".previsualizar").attr("src", respuesta["foto"])             }         }      });  }) 

Y por ultimo este metodo que se habia pasado subirlo, el que sube la imagen para usuarios nuevos

/*================================================= SUBIENDO FOTO DE USUARIO =================================================*/  $  (".nuevaFoto").change(function(){  var imagen = this.files[0];  /*================================================= VALIDAR FORMATO =================================================*/  if(imagen['type'] != "image/jpg" && imagen['type'] != "image/png" && imagen['type'] != "image/jpeg"){     $  (".nuevaFoto").val("");      swal.fire({         title: "Error al subir la imagen",         text: "La imagen debe estar en formato JPG o PNG",         type: "error",         confirmButtonText: "Cerrar"     }); } else if(imagen['size'] > 2000000){      $  (".nuevaFoto").val("");      swal.fire({         title: "Error al subir la imagen",         text: "La imagen debe pesar menos de 2mb",         type: "error",         confirmButtonText: "Cerrar"     }); } else {     var datosImagen = new FileReader;     datosImagen.readAsDataURL(imagen);      $  (datosImagen).on("load", function(event){          var rutaImagen = event.target.result;         $  (".previsualizar").attr("src", rutaImagen);     }) } 

})

Modal con altura dinámica y footer

¡Hola!

Tengo una ventana con una altura dinámica y scroll. El problema es que el footer no se puede visualizar ya que la lista de datos ocupa toda la pantalla. Me gustaría ver siempre el footer.

¿Alguna idea?

Este es mi código css:

.own-modal { @media (min-height: 320px) { ion-backdrop { visibility: visible; } }

position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;

contain: strict; .modal-wrapper { &, .ion-page, .ion-page .content, .ion-page .content .scroll-content { contain: content; position: relative; top: auto; left: auto; } display: flex; overflow: auto; flex-direction: column; max-height: 100%; opacity: 0; height: auto; max-width: 100%; } }

El contenido de la ventana modal es muy sencillo. En el tag del content tengo un label y una lista y después tengo un footer con un div y dentro del div, un item con un botón.

Modal en php para mostrar un msj

if ($  result->num_rows > 0) {    }  $  row = $  result->fetch_array(MYSQLI_ASSOC); if ($  pass==$  row['clave']) {  $  _SESSION['loggedin'] = true; $  _SESSION['email'] = $  email;        header('Location: index2.php'); } else {      "<div id='mostrarmodal' tabindex='-1' aria-labelledby='basicModal'>             <div class='modal-dialog'>                 <div >                     <div class='modal-header'>                         <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times</button>                         <center><h3>DATOS GUARDADOS CORRECTAMENTE</h3></center>                         </div>                         <div class='modal-body'>                             <center><a class='btn btn-primary' href='index.php'>ACEPTAR</a></center>                            </div>                     </div>                     <div class='modal-footer'></div>                 </div>             </div>         </div>"; }      mysqli_close($  conexion);     ?> 

No sé si este correcta la sintaxis para poner un modal dentro de código php, ayuda.

Loading indicator on modal dialog

I wonder how is it considered from UI experience, to show users a loading indicator however, in a modal dialog? Is it considered fine practice? e.g. such as this https://www.google.com/search?q=loading+modal&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjN5vmCuYjlAhXGJpoKHVSEBi4Q_AUIEigB&biw=1366&bih=635#imgrc=hy5m5qBCdnA2-M:

It has some technical benefits with synchronization because user can’t make multiple requests, but won’t dive here.

How to show a modal dialog without master page content?

I am migrating a sharepoint solution from Sharepoint 2010 to 2013, and so far everything works, but I’m stuck at one specific problem. In some lists, the user has the possibility to open an editor for a list item. This opens a modal dialog with some inputfields and some buttons. The masterpage is not shown in these dialogs, but that is how it’s supposed to be, so no problem so far. There is however one aspx page that contains more than one asp panel, and in this modal dialog the master page layout is visible. I am not allowed to post any of my code but the general structure of these layout pages is:

A Redirect.aspx page with:

<frameset>     <Frame></Frame> </frameset> 

Where another aspx page is loaded in. This aspx page is mostly a Panel with a table in it.

I don’t expect anyone to solve my specific problem, but I’m out of ideas where to look for the issue.

I am using the default master page by the way, so I added no custom code to the masterpage.

¿Como resuelvo problema al abrir Modal de Bootstrap en asp.net?

Estoy desarrollando una aplicación en ASP.NET y he creado un Modal el cual se abre con un botón, el problema es que cada vez que presiono el boton para abrir el Modal, este se abre a la vez que la pagina se tilda obligandome a presionar F5 para refrescar la pagina, le agradezco a quien me ayude a resolverlo.

Este es mi código HTML del Modal:

Título

<!-- Button trigger modal -->             <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">                 Launch demo modal             </button>             <!-- Modal -->             <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                     <div class="modal-content">                         <div class="modal-header">                             <h5 class="modal-title" id="exampleModalLabel">Error al ingresar</h5>                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">                                 <span aria-hidden="true">&times;</span>                             </button>                         </div>                         <div class="modal-body">                             Usuario o contraseña incorrectos                         </div>                         <div class="modal-footer">                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                             <button type="button" class="btn btn-primary">Save changes</button>                         </div>                     </div>                 </div>             </div> 

If a user clicks an action link from w/in a modal and is then taken to a separate page, do they return to that open modal after completing the action?

I’m designing an internal tool that enables my coworkers to curate post-op care plans for orthopedic patients on our platform (basically sending educational content to users at specific intervals).

I’m running into a challenge with one of the main flows, which is adding exercise videos to a care plans. Right now, on the main care plan page, you click an “Add Exercise” CTA that opens up a modal (shown here) where the user is able to multi-select the exercises to be added. Cool.

BUT a dictated requirement was that the user should also be able to create a totally new exercise from the same modal (see arrow). This makes sense in terms of supporting the user’s workflow, but I’m stuck on the ensuing flow; like, I know that clicking “Create New Exercise” will flip the user over to the “Create New Exercise” page where they can build that content – but after the user creates the new exercise and clicks save, what does the user return to? Do they return to the original page with the still-open modal that now has a little “Exercise Created” confirmation message?

I honestly think this supports the user’s goals best, but is it strange/bad ux that the user comes back to the original page and the original modal is still open? Am I missing another, better, interaction entirely?

Thanks everyone, eager to hear what you think!

should this modal stay open when the user returns from a separate page?