Cargar contenido dinámico en un modal

  • 2 Nov 2008
  • jQuery

Escenario

Generar un archivo de texto a travéz de un script php que será ejecutado al hacer click en un div dentro de un modal. Hasta que el archivo no se termine de generar, se bloquea el navegador del usuario. Cuando el proceso termina, un alert y se cierra el modal. Todo con el menor esfuerzo posible.

Herramientas

JQuery y el plugin NyroModal.

Script.

index.php Este archivo contiene el link que abre el modal y es al que se volverá cuando todo termine.

<link rel="stylesheet" href="/style/nyroModal.css" media="screen" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/js/jquery.nyroModal-1.3.0.js"></script>

sent.php

El contenido de este archivo se visualizará en el modal. Ejecutará el script de php que creará un archivo y se cerrará cuando todo termine. Un poco de detalle:

  • unbind: Quita la función del div. Es para evitar el click neurótico. El php se ejecuta una sola vez.
  • hide(): Oculta lo que sea que esté adelante de él. Para que el usuario no cierre la ventana y espere el mensaje de error o no del php que genera el archivo.
  • nyroModalRemove(): Lo ejecuto al final.. cuando el usuario hace click en "Aceptar"...
<!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>nyroModal :: Demo</title>
  <link rel="stylesheet" href="/style/nyroModal.css" type="text/css" media="screen" />
  <script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="/js/jquery.nyroModal-1.3.0.js"></script>
</head>
<body>
You can whatever you want in the ajax request.<br />
You can create easyly :<br />
<div id="test">
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
  Only this content will be shown if the hash is passed.<br />
</div>
<hr />
<div id="blabla">
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
  Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
</div>
<script type="text/javascript">

  $(document).ready(function() {
    $("#closeBtn").click(function(){
      $.nyroModalRemove();
    });
    $("#myDiv2").click(function(){
      alert("hiciste click");
      $("#myDiv2").unbind("click");
      $("#closeBtn").hide();
      $(function() {

          $.nyroModalSettings({
          modal: true,
          debug: true,
          width: 900,
        });

      });

      $(this).html("Espere");
      $.ajax({
        type: "POST",
        url: "test.php",
        data: "name=John Resig&location=Boston",
        async: true,
        success: function(msg){
          //alert( "Data Saved: " + msg );
        },
        
        complete: function(objeto, exito){
          alert("Me acabo de completar")
          if(exito=="success"){
            alert("Y con éxito");
            $.nyroModalRemove();
          }
        },
        contentType: "application/x-www-form-urlencoded",
      });
    });
  });
</script>
<div align="center" id="myDiv2" style="color: #ffffff;text-align: center; width: 100%; background-color: #ff0000; height: 50px">Click para ejecutar test.php YA!</div>
<button id="closeBtn" >close button</button><br />
<a href="/demo.php" class="nyroModalClose">close link</a><br />
</body>
</html>

file.php

Simple script en php para crear un archivo de texto con el contenido de las variables pasadas por sent.php a través de $.ajax

<?php
  $_POST['msg'] = "Algo";
  $File = "YourFile.txt";
  $Handle = fopen($File, 'w');
  $Data = $_POST['name']."\n";
  
  for ($n = 0; $n <= 20000; $n++) {
    fwrite($Handle, $Data);
  }
  
  print "Data Written";
  fclose($Handle);
?>