-1

I tried to switch from native mode to iframe but the <script> part of the HTML file is serving a blank page when I click the button. I am not able to see the error on dev console.

This is index.html:

<!DOCTYPE html>
  <html>

  <!-- PRUEBA CON EL IFRAME SANDBOX MODE -->
<body>
<div>
<h3 style=color:blue>Seaport 106</h3>
<form id="email_subscribe">
 Fecha de Ingreso:
 <input type="date" name="dayIn" min="2015-12-01" max="2016-03-25"><br>
<br>
Fecha de Salida:
<input type="date" name="dayOut" min="2015-12-08" max="2016-04-01"><br>
<br>
 Cantidad de Huespedes:
<input type="number" name="guests" min="1" max="4">
<input type="submit" value="enviar">
 </form>
<span id="thank_you" hidden="true"></span>
 (Navegadores soportados: Chrome, Android, Safari)
</div>
 <div id="form-content">
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?> <!-- cargo         la hoja de estilo -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
 </script> 

<script>
 $( document).ready(function() { // The safest way to accomplish this is to     use the jQuery ready method, which will watch for the page to be fully loaded   before it starts executing JavaScript.
 $( "#email_subscribe" ).submit(function() { // funcion submit incorporada en la biblioteca jquery
//leyenda e imagen de espera antes del la funcion handler al backend:
   $( "#form-content" ).append(' PROCESANDO...' + '<br></br>' /* <img   src="http://goo.gl/23NPRI">  esta imagen debe estar en https tambien  */);  

 google.script.run.withSuccessHandler(function(ret){ //ejecuto funcion que    necesita un return value
    $( "#thank_you" ).show("slow"); // aparece con estilo
    //No desaparece mas: $("#email_subscribe").slideUp(); // desaparece deslizandoce
    $( "#form-content" ).html(' Processing....'  );  
   $( "#form-content" ).html(ret); 
    // $("#form-content").load(ret)
    console.log(ret);
  }).CalcSp106(this)           // real Calc109(this) prueba showhtmltext();  //this is ther Form Element // function que esta en el server side (code.gs)
  });
 });
  </script>
  </body>
 </html>
0

1 Answer 1

0

screenshot

With SandboxMode.IFRAME, you should use a click handler to invoke your server-side handler with the submit button, rather than a submit action.

Instead of this:

<input type="submit" value="enviar">
       ^^^^^^^^^^^^^

You should use:

<input id="button-submit" type="button" value="enviar"/>
                          ^^^^^^^^^^^^^

Instead of binding a submit() handler to the button, you need a click() action handler.

Code.gs

You didn't share your server side code. Here's what I used, adapted from the WebApp sample:

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function CalcSp106( form ) {
  // Echo back the received object
  return( JSON.stringify(form) );
}

Index.html

There is now a click() handler bound to the button, instead of the form. Because of this, the button has its own ID, button-submit. I've deleted the extra code & comments that had nothing to do with the problem.

Since I was using the sample, I also changed the line of templated HTML to load the default 'Stylesheet'.

<!DOCTYPE html>
<html>

<!-- PRUEBA CON EL IFRAME SANDBOX MODE -->

<body>
  <div>
    <h3 style=color:blue>Seaport 106</h3>
    <form id="email_subscribe">
      Fecha de Ingreso:
      <input type="date" name="dayIn" min="2015-12-01" max="2016-03-25"/>
      <br>
      <br> Fecha de Salida:
      <input type="date" name="dayOut" min="2015-12-08" max="2016-04-01"/>
      <br>
      <br> Cantidad de Huespedes:
      <input type="number" name="guests" min="1" max="4"/>
      <input id="button-submit" type="button" value="enviar"/>
    </form>
    <span id="thank_you" hidden="true"></span> (Navegadores soportados: Chrome, Android, Safari)
  </div>
  <div id="form-content">
  </div>
  <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>

    <script>
      $(document).ready(function() {
        $("#button-submit").click(function() { 
          $("#form-content").append(' PROCESANDO...' + '<br></br>' );

          google.script.run
            .withSuccessHandler(function(ret) {
              $( "#form-content" ).html(ret); 
              console.log(ret);
            })
            .CalcSp106(this.parentNode)
        });
      });
    </script>
</body>

</html>
1
  • Thank you Mogsdad, I will try it inmediately. Dec 7, 2015 at 6:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.