Jquery geht nur jedes zweite Mal

**error** · 26.11.2009, 18:10

Hi,

da ich mit Hilfe von KaiUwe, danke an dieser Stelle noch, es nun hinbekommen habe das ich mit JQuery ein Formular abschicken kann und auch die Validierungsmeldungen angezeigt bekomme habe ich nun ein neues Problem.

Das ganze Funktioniert nur jedes zweite Mal. Also wenn man das erstemal das Formular abschickt wird richtig das Ajax ausgeführt und die Antwort kommt zurück, waren da nun Fehler und man schickt das zweitemal das Formular ab wird es nicht über Ajax geschickt sondern ganz normal versendet. Waren hier nun wieder Fehler drin und schickt man es nun wieder ab wird es wieder über Ajax verschickt usw. Also immer im wechsel Ajax und normales versenden.

Hier der Link: http://www.dragonspace.de/user/login

Da ich das JS-Script das das Formular versendet aber im Layout schon einbinden sollte es doch immer gehen.

Layout.phtml

HTML-Code:

<!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>AVE Online</title>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl('css/index.css'); ?>" />
<?php echo $this->jQuery(); ?>
<script type="text/javascript" src="<?php echo $this->baseUrl('js/jquery.form.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl('js/form.js'); ?>"></script>

</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
    <h1>AVE Online</h1>
  </div>
  
  <div id="mainContent">
   <?php echo $this->layout()->content; ?>                   
  </div>
  <div id="footer">
  Impressum
  </div>
</div>
</body>
</html>

form.js

Code:

$(document).ready(function() {
     $("form").submit(function() {
         $.ajax({  
               type: "POST",  
               url: "/user/login",  
               data: $("form").serialize(),  
               success: function(data) {  
                 $('#mainContent').html(data);  
               }  
             });  
             return false;
    });
});

loginAction

PHP-Code:

 public function loginAction()
    {

        $translate = Zend_Registry::get('Zend_Translate');

        /**
         * Überprüfung ob die Werte richtig sind
         */
        if ($this->getRequest()->isPost()) {
                
            $form = $this->loginForm();
            if (!$form->isValid($_POST)) {
                $this->view->form = $form;
                return $this->render('form');
            }

            $values = $form->getValues();

            $db = Zend_Db_Table_Abstract::getDefaultAdapter();

            /**
             * Überprüfen ob Logindaten stimmen und der Account aktiv ist
             */
            $authAdapter = new Zend_Auth_Adapter_DbTable($db,'user','username','pass','MD5(?) AND active = "aktiv"');
            $authAdapter->setIdentity($values['username'])
            ->setCredential($values['password']);
            $result = $authAdapter->authenticate();
            if ($result->isValid()) {
                /**
                 * Zum Game weiterleiten
                 */
                $authNamespace = new Zend_Session_Namespace('Zend_Auth');
                $authNamespace->user = $values['username'];
                return $this->_forward('index','game');
            }
            else
            {
                /**
                 * Fehlermeldung zurückgeben
                 */
                $this->view->error = $translate->_('User does not exist, password incorrect or User not aktiv.');
                $this->view->form = $this->loginForm();
                return $this->render('form');
            }

        }
        else
        {
            $this->view->form = $this->loginForm();
            return $this->render('form');
        }

    }

**error** · 26.11.2009, 18:40

Mh ok habs nun doch gelöst in dem ich auch das form.js immer neu laden lasse. Mh versteh ich zwar nicht warum das so sein muss aber naja.

**kibotu** · 23.03.2010, 19:55

Hi Leute,

ich hab ein ähnliches Problem.

Was bisher geht:

ich verwende colorbox.js
es lädt beim klicken auf einen Link ein Formular via ajax und rendert es in einer shiny lightbox
beim submit wird das Formular erfolgreich validiert und es werden eventuelle Fehlermeldungen als Antwort zurück gesendet und in dem DHTML Colorbox-Objekt gerendert.

Das Problem:

beim erneuten submit, wird das Formular über den herkömmlichen weg übertragen und nicht via Ajax (ungewollter Page-refresh)

Ich vermute das Problem liegt irgendwo beim javascript, da ich nicht genau erkennen kann, warum es einmal funktioniert, aber kein zweites mal. Und der Request ja schließlich via der Colorbox vonstatten geht.

der javascript hierfür:

PHP-Code:

 $(document).ready(function() {

$(".professor").colorbox({
                innerWidth:630, 
                innerHeight:460, 
                scrolling: false,
                overlayClose: false,
                onComplete:function(){        
                    $("#createProfessor").submit(function() {
                         $.ajax({  
                               type: "POST", 
                               dataType: "format=json",
                               url: "/admin/professor/create",  
                               data: $("#createProfessor").serialize(),  
                               success: function(data) {  
                                     $.fn.colorbox({
                                        html:   data,
                                        innerWidth:630, 
                                        innerHeight:460,
                                        title: 'Professor eintragen'
                                     });
                               }  
                          });  
                          return false;
                    });
                }                
            });
});

im html steht dann so etwas wie ein link:

PHP-Code:

 <a class="professor" title="Professor eintragen" href="/admin/professor/create">Professoren</a>

hier der ActionController:

PHP-Code:

 <?php

class Admin_ProfessorController extends Zend_Controller_Action
{
    
    public function init() {
        
        $ajaxContext = $this->_helper->getHelper('ContextSwitch');
        $ajaxContext->setAutoJsonSerialization(true)
                    ->addActionContext('create', 'json')
                    ->initContext();        
    }
    
    public function indexAction() {
        $this->_forward('create');
    }
    
    private function getForm() {
        
        $form = new Admin_Form_Professor();
        $form->setAction(Zend_Controller_Front::getInstance()->getBaseUrl().'/admin/professor/create')
             ->setMethod('post')
             ->setAttrib('id', 'createProfessor');
                 
        return $form;
    }
    
    public function createAction() {
        
        $this->_helper->layout->disableLayout ();
        
        $form = $this->getForm();        
        $this->view->form = $form;
            
        $request = $this->_request;

        if($request->isPost()) {
            if(!$form->isValid($request->getPost())) {            
                $form->populate($request->getPost());
            }
            
            // trage in db ein
        }

        
        
    }
}

Jeder Hinweis ist überaus willkommen.

**PatrickG** · 23.03.2010, 20:34

Ich denke das kommt dadurch, da du das onSubmit bei dem erneut gerendertem Formular nicht "abfängst". Du müsstest statt

Code:

$("createProfessor").submit(function());

wohl eher

Code:

$("createProfessor").live('submit', function());

nutzen.

**kibotu** · 23.03.2010, 20:47

Geil, genau das war es!

Vielen vielen Dank! =)

**Kaiuwe** · 23.03.2010, 21:03

Kurz angemerkt:

Zitat von kibotu

PHP-Code:

 ->setMethod('post')

...

$form->populate($request->getPost());

Beides ist überflüssig.

**KingCrunch** · 23.03.2010, 22:22

Zitat von Kaiuwe

Kurz angemerkt:

Beides ist überflüssig.

Background

setMethod('post') ist Standard. Ich setzt es allerdings auch immer
isValid() verteilt die Werte bereits auf alle Felder (oder ruft sogar populate() auf? Egal, der Effekt ist der Gleiche). populate() is einfach doppelt gemoppelt