[SOLUCIONADO] Problema Ajax con Formularios

OWNED91 · #1 (**permalink**) 10/04/2014, 16:47

Que tal compañeros, tengo un problema con el AJAX en los formularios... Ya que cuando le doy click al botón para enviar el formulario, no me funciona el AJAX ya que en vez de solo refrescarme la parte de resultados, actualiza toda la página por completo.

este es mi index.php

Código HTML:

Ver original<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebApplication">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta itemprop="name" content="MD5" />
    <meta itemprop="description" content="" />
    <meta itemprop="applicationCategory" content="Tool" />
 
    <title>MD5 Hash</title>
    
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
    <link type="text/css" href="html5hash.css" rel="stylesheet" />
 
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="html5hash.js"></script>
    
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                type: "POST",
                 target: "#resultados" 
            }); 
        }); 
    </script> 
            
  </head>
 
<body id="drop_zone">
 
<script>
function limpiar(id)
        {
            var li;
 
                li = document.getElementById(id);
 
                while(li.hasChildNodes())
                {
                    li.removeChild(li.lastChild);
                    document.getElementById(id).className = "ocultar";
                }
        }     
</script>
    <div id="centerfield">
 
        <header>
            <fieldset id="algo_selection">
                <legend>Algorithm selection</legend>
                <form>
                     <input type="checkbox" name="md5switch" checked="checked" />MD5
 
                </form>
            </fieldset>
        
            <h1>MD5</h1>
 
        </header>
 
        <article>
            <ul id="list">
                <li>
                    <b>File selection</b>
                    <div id="placeholder">
                        <b>Drop</b> files here or <b>click to browse.</b>
                    </div>
                    <input type="file" id="hiddenFilesSelector" multiple />
                </li>
            </ul>
        </article>
<div id="respuesta"></div>
        <aside id="explanation">
            <span itemprop="description">Hashes are computed locally. No files or information on files will be uploaded.</span>
        </aside>
 
    </div>
 
    <footer>
    </footer>

Este genera el formulario, esta es una parte del código que se encuentra en html5jash.js...

Código Javascript:

Ver originalfunction (file) {
                    // Done
                    var took = ((new Date).getTime() - start) / 1000;
                    var xid = Math.random().toString(36).substr(2, 5);
                    var results = '<div id="'+ xid +'" class="resultdiv">';
                
                    results += '<form id="myForm" action="hash.php" method="post">';                                                        
                    if (doMD5){
                        var md5r = md5proc.finalize();
                            results +=   'MD5:'+ md5r +'<input type="hidden" name="md5" value="' + md5r + '"/></br>';
                    } 
 
                    results += '<input type="submit" class="btn_send" id="btn_enviar" value="Enviar" name="Enviar" />';
                    results += '&nbsp;&nbsp;&nbsp;';
                    results += "<button class='btn_remove' onclick=\"limpiar('"+uid+"')\">Remover</button>";
                    results += '</form>';
                    results += "</div>";
                    results += '<div id="resultados"></div>';
                    results += '<span class="resulttaken">Time taken: ' + digits(took, 2) + 's @ ' + bytes2si(file.size / took, 2) + '/s</span><br />';
                    
                    $("#" + uid).append(results);
 
                    $("#" + uid + " .progress")
                        .hide('slow');
 
                    $("#" + uid)
                        .css('background-color', '#F0FFF0');
                });
            })();
        };
 
    }

y lo único que me devuelve el hash.php es esto:

Código PHP:

Ver originalecho ("El MD5 ha sido guardado en la BD");

OWNED91 · #2 (**permalink**) 14/04/2014, 12:56

Ya lo solucione, solo era de agregarle esto en la función de jQuery "delegation: true"