[Resolvido] Executar form action sem sair da página

zppinto · July 18, 2012 at 04:08 PM

Boas,

Estou a tentar implementar um sistema que me associe determinadas tags num determinado timecode do vídeo. Mas cada vez que o faço, o ficheiro insert.php que escreve na base de dados os valores de tag e timecode, é executado, e o visionamento do vídeo termina tenho que retroceder para o continuar a ver.

Eu gostaria de saber qual a melhor forma para inserir esses dados sem sair página html, e como o faço.

Obrigado.

<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
O browser não suporta HTMl5.
<div id="time"></div>
</video>
<script type="text/javascript">
myVid=document.getElementById("video1");
function getCurTime()
{
var aux = myVid.currentTime;
document.forms['form'].timecode.value = aux.toFixed(0);
document.forms['form'].submit();
}
</script>

<form name='form' action="insert.php" method="post">
Tag: <input type="text" name="tag" />
<input type="hidden" name="timecode" value=""/><p>
<button onclick="getCurTime()" type="button">Submeter</button>
</form>
</body>
</html>

Edited July 18, 2012 at 04:12 PM by zppinto

KiNgPiTo · July 18, 2012 at 05:33 PM

O teu problema pode ser resolvido com javascript+ajax, facilmente com jquery:

$("#iddoform").submit(function(){

  // O form foi submetido...

  $.ajax({
    type: "POST",
    url: "insert.php",
    data: $(this).serializeArray(),
    }).done(function( msg ) {
      // Recebes aqui o output do teu insert.php
      alert("Recebido: " + msg);

      // Fazes o que quiseres com os dados que recebes (se precisares de
         retornar vários dados, sugiro que os retornas com json

    });

  return false; // Impede a mudança de página

});

Os dados do lado do insert.php são normalmente recebidos pelo post...

Edit: Para este código funcionar deves receber o jquery, insere isto no head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Edited July 18, 2012 at 05:34 PM by KiNgPiTo

zppinto · July 19, 2012 at 11:33 PM

Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂

HappyHippyHippo · July 19, 2012 at 11:34 PM

Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂

nãoooooooooooooooooooooooooooooooooooooo

zppinto · July 19, 2012 at 11:47 PM

😕 Que fiz eu?

HappyHippyHippo · July 19, 2012 at 11:47 PM

iframe

zppinto · July 19, 2012 at 11:54 PM

Pois, mas o código do KingPito não resulta. O refresh é feito e eu perco o timecode onde me encontrava e o vídeo é reiniciado.

O iframe resolvia-me este problema e estava funcional... Mas já agora qual o problema de usar iframe?

HappyHippyHippo · July 20, 2012 at 12:07 AM

se tens refresh é por uma de duas razões : ou não tens o return false ou tens um erro no javascript que para a execução e segue o submit do formulário ... agora escolhe

zppinto · July 20, 2012 at 03:34 PM

Desculpem a ignorância, mas não consigo descobrir o gato 😞

<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 O browser não suporta HTMl5.
<div id="time"></div>
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
$("form").submit(function(){
  // O form foi submetido...
  $.ajax({
 type: "POST",
 url: "insert.php",
 data: $(this).serializeArray(),
 }).done(function( msg ) {
   // Recebes aqui o output do teu insert.php
   alert("Recebido: " + msg);
 });
  return false; // Impede a mudança de página
});
</script>
<script type="text/javascript">
myVid=document.getElementById("video1");
function getCurTime()
 {
 var aux = myVid.currentTime;
 document.forms['form'].timecode.value = aux.toFixed(0);
 document.forms['form'].submit();
 }
</script>
<form id='form' name='form' method="post">
Tag: <input type="text" name="tag" />
<input type="hidden" name="timecode" value=""/><p>
<button onclick="getCurTime()" type="button">Submeter</button>
</form>
</body>
</html>

HappyHippyHippo · July 20, 2012 at 04:13 PM

assim de repente (acho que somente o IE é que não come isto)

        data: $(this).serializeArray(), /* tens uma virgula a mais */
        }).done(function( msg ) {

KiNgPiTo · July 20, 2012 at 04:26 PM

Os gatos são tantos, mas fica aqui algumas modificações...

@HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então...

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

   function getCurTime(){
        var myVid=document.getElementById("video1");
        return myVid.currentTime;
   }

   $("#form").submit(function(){

      /* Isto para que não precises do hidden, do outro lado recebes na mesma
         pelo post o valor do campo timecode pelo $_POST["timecode"]
      */
      var curTime = getCurTime();

      $.ajax({
            type: "POST",
            url: "insert.php",
            data: {
                tag: $("#tag").val(),
                timecode: curTime
                }
            }).done(function( msg ) {
              // Recebes aqui o output do teu insert.php
              alert("Recebido: " + msg);
            });

      return false; // Impede a mudança de página
   });

});

</script>

</head>
<body>

   <video id="video1" controls="controls">
         <source src="movie.mp4" type="video/mp4" />
         <source src="movie.ogg" type="video/ogg" />
         O browser não suporta HTMl5.
       <div id="time"></div>
   </video>

   <form id='form' name='form' method="post">
         Tag: <input type="text" name="tag" id="tag" />
         <p><input type="submit" value="Submeter" /></p>
   </form>

</body>
</html>

HappyHippyHippo · July 20, 2012 at 04:32 PM

@HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então...

o que eu disse foi que o IE não gosta de virgulas extra

exemplo:

/* erro so no IE */
var array = {1, 2, 3, 4,};

ps : nunca usei o $.ajax().done() ... isso corre bem quando existe erro de resposta ??

não seria melhor usar isto:

$.ajax({
 url: url,
 success: function(data, textStatus, jqXHR) {
   /* success action */
 },
 error: function(jqXHR, textStatus, errorThrown) {
   /* error action */
 }
});

Edited July 20, 2012 at 04:38 PM by HappyHippyHippo

KiNgPiTo · July 20, 2012 at 04:32 PM

Ah ok, my bad 🙂

zppinto · July 20, 2012 at 04:54 PM

Muito obrigado pela ajuda 😉

Sign In

[Resolvido] Executar form action sem sair da página

Recommended Posts

zppinto

KiNgPiTo

zppinto

HappyHippyHippo

zppinto

HappyHippyHippo

zppinto

HappyHippyHippo

zppinto

HappyHippyHippo

KiNgPiTo

HappyHippyHippo

KiNgPiTo

zppinto

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information