Yii Framework Forum: Formular per AJAX submitten und Error anzeigen bzw. die Änderungen speichern - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Formular per AJAX submitten und Error anzeigen bzw. die Änderungen speichern Rate Topic: -----

#1 User is offline   g3ck0 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 96
  • Joined: 03-June 09

Posted 30 September 2009 - 06:26 AM

hallo,

im Titel steht schon alles notwendige, was ich fragen will. und zwar hatte ich die idee das änderungsformular per qtip einzublenden, wenn der user einen beitrag ändern oder hinzufügen will. nun ist es so, dass ich nach dem abschicken keinen reload haben will, sondern die daten per ajax an der server und das resultat entsprechend interpretieren will.

wie gehe ich bei so etwas vor? ich habe noch nicht wirklich viel mit ajax gemacht. vor allem ist es ja so, dass bei einer fehleingabe das formular (also der qtip) ja erweitert wird. und wie soll das laufen, wenn alles okay ist, d.h. bei den eingaben kein fehler aufgetreten ist?

bin echt über jede hilfe froh!

mfg
armin
0

#2 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 30 September 2009 - 07:44 AM

Dazu musst du dir selbst ein kleines Script basteln. Mit jquery geht sowas ja recht einfach. Der Schlüssel zum Erfolg war hier für mich, bei AJAX-Requests nicht HTML zurückzuliefern (damit müsst ich ja schon wissen, was ich damit machen soll, bevor ich den Request losschicke), sondern ein Schnipsel Javascript, das ausgeführt werden soll. In diesem Schnipsel kann man dann alles mögliche machen: Fehler-Divs einblenden/ausblenden, etc.

Mit jquery.getScript() geht das sehr elegant.
0

#3 User is offline   g3ck0 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 96
  • Joined: 03-June 09

Posted 30 September 2009 - 05:29 PM

könntest du mir bei der implementierung evtl. etwas behilflich sein? ich weiß leider nicht genau, was ich da alles machen muss =( wäre dir echt sehr dankbar!
0

#4 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 01 October 2009 - 04:29 AM

Naja, ich kann zwar nicht deine Job machen, aber hier mal eine abgespeckte Basisimplementierung. ;)

Das sollte dich eigentlich in die Gänge bringen. Du wirst aber nicht drum herum kommen, dich etwas mit jquery zu befassen. In diesem Fall verwend ich direkt die jquery.ajax() Methode, damit die POST-Daten mitgeschickt werden.

Zunächst der Controller:

<?php
class AjaxController extends CController {

    public function actionEdit()
    {
        $model=new persons;
        $this->render('edit',array(
            'model' => $model,
        ));
    }

    public function actionSave()
    {
        if (!isset($_POST['persons']))
            return;

        $model=new persons($_POST['persons']);
        if ($model->save()) {
            echo $this->escapeJs("alert('Gespeichert!')");
        } else {
            foreach ($model->getErrors() as $err)
                $txt.=$err[0]."\n";
            echo "alert('".$this->escapeJs("Fehler: \n".$txt)."');";
        }
    }

    // Wird benötigt, da strings im JS-Quellcode keine Zeilenumbrüche haben dürfen
    public function escapeJs($value)
    {
        return addslashes(trim(strtr($value,array("\r\n"=>' ', "\n\r"=>' ', "\n"=>' ',"\r"=>' '))));
    }
}


Und im View:
<?php 
$cs=Yii::app()->clientScript;
$ajaxSaveUrl=$this->createAbsoluteUrl('ajax/save');

$cs->registerCoreScript('jquery');
$cs->registerScript('initButton', <<<EOD
    $('#saveButton').click( function() {
        $.ajax({
            type: 'POST',
            data: $(this).parents('form').serialize(),
            cache: false,
            url: '$ajaxSaveUrl',
            dataType: 'script'  
        });
        return false;
    });
EOD
,CClientScript::POS_READY);
?>
<div class="yiiForm">

<?php echo CHtml::beginForm(); ?>

<div class="simple">
<?php echo CHtml::activeLabelEx($model,'name'); ?>
<?php echo CHtml::activeTextField($model,'name'); ?>
</div>
<div class="simple">
<?php echo CHtml::activeLabelEx($model,'email'); ?>
<?php echo CHtml::activeTextField($model,'email'); ?>
</div>

<div class="action">
<?php echo CHtml::submitButton('Speichern', array('id'=>'saveButton')); ?>
</div>

<?php echo CHtml::endForm(); ?>

</div>


Statt der echo statements in der Save-Action könntest du auch ein View-File rendern, das reinen Javascript code ausgibt. Dort kann man dann auch kompliziertere Javascripts ablegen. So hab ich das bei z.B. bei Stay gemacht.

Hoffe, das gibt dir mal ein paar Ideen...
0

#5 User is offline   g3ck0 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 96
  • Joined: 03-June 09

Posted 01 October 2009 - 10:24 AM

danke dir! das ist echt klasse. ich muss mich da aber nun erst mal reinarbeiten, da ich das ganz auch etwas anders vor hatte. nur hast du mich auf eine recht gute idee gebracht.

meine idee bisher:
- user geht auf eine seite
- klickt auf "beitrag ändern" oder "beitrag hinzufügen"
- es öffnet sich ein qtip, über den er den beitrag bearbeiten kann
- nach dem abschicken wird der beitrag per ajax an den server geschickt, geprüft, ob alles passt
- wenn nein, dann werden live die fehler angezeigt (das wird so naja...)
- wenn alles passt, dann reload der seite und sprung zum beitrag (per anker).

die neue idee wäre es, gleich live den beitrag einzublenden, also komplett ohne reload zu arbeiten. dafür habe ich aber bisher zu wenig mit ajax und javascript gemacht. daher wird das wohl einiges an zeit kosten, wie ich finde... nun ja, schauen wir einfach mal =)

danke dir jedenfalls nochmals!
0

#6 User is offline   g3ck0 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 96
  • Joined: 03-June 09

Posted 01 October 2009 - 11:41 AM

Bist du eigentlich sicher, dass es ein submitButton ist? Ich würde sagen, dass es doch ein normaler Button sein muss, oder? Denn sonst wird die Seite ja neu geladen und nicht auf das Ergebnis gewartet!
0

#7 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 01 October 2009 - 01:53 PM

Jo, bin ich :)

Durch das return false; wird die default-action des buttons unterbunden. Auf diese Weise kann man sehr schön auch ne Fallback-Strategie aufbauen, falls jemand js deaktiviert hat... aber dazu müsste natürlich die edit action etwas angepasst werden ...
0

#8 User is offline   fabooo 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 24-September 09

Posted 18 October 2009 - 11:00 AM

hallo

vielen dank für deine infos. ich versuche seit tagen, so etwas zu entwickeln. ;-)

1. wenn ich deinen code bei mir ausführe, kriege ich folgende fehlermeldung:
missing ; before statement


2. anstelle eines alert würde ich gerne die einzelnen fehlermeldungen unterhalb des textfeldes anzeigen, sofern die validierung scheitert. wie stelle ich das am einfachsten an.

any help very welcome!

cheerio.f
0

#9 User is offline   yoshi 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 170
  • Joined: 28-February 09
  • Location:Germany

Posted 18 October 2009 - 03:41 PM

Hi,

@Mike

View PostMike, on 01 October 2009 - 04:29 AM, said:

// Wird benötigt, da strings in JS keine Zeilenumbrüche haben dürfen
public function escapeJs($value)
...
}[/code]

Das halte ich jetzt einfach mal für ein Grücht, das Strings in JS keine Zeilenumbrüche enthalten dürfen.
Könntest du etwas genauer auf deine Motivation für diese Annahme eingehen?

@fabooo

View Postfabooo, on 18 October 2009 - 11:00 AM, said:

1. wenn ich deinen code bei mir ausführe, kriege ich folgende fehlermeldung:
missing ; before statement


Er zeigt dir doch die Zeilennummern an, in der ihm ein Semikolon fehlt. Schau einfach dort und ergänze es ;-)
Ist es möglicherweise ein fehlendes Semikolon beim abschließenden Heredoc-Tag 'EOD' im View?

View Postfabooo, on 18 October 2009 - 11:00 AM, said:

2. anstelle eines alert würde ich gerne die einzelnen fehlermeldungen unterhalb des textfeldes anzeigen, sofern die validierung scheitert. wie stelle ich das am einfachsten an.

Du kannst statt einen JS-Script einfach ein Array z.B. im JSON Format bei deiner Action zurückgeben. Im AJAX-Aufruf gibst du eine Callback-Funktion als Option 'success' an, die muss dann die Fehlermeldungen in die Seite einbetten.
Na gut, ich stelle gerade fest, dass man mit dieser Aussage vermutlich nicht viel anfangen kann, wenn man so gar nicht in der Materie drin ist - sorry.
Wenn ich dazu komme, dann schreib ich gleich ein kurzes Beispiel.

Gruß
0

#10 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 19 October 2009 - 02:55 AM

View Postyoshi, on 18 October 2009 - 03:41 PM, said:

@Mike

Das halte ich jetzt einfach mal für ein Grücht, das Strings in JS keine Zeilenumbrüche enthalten dürfen.
Könntest du etwas genauer auf deine Motivation für diese Annahme eingehen?


Sorry, war etwas ungenau formuliert. Was ich meinte, war, dass sowas in js nicht erlaubt ist:

var x="Ein text
  über mehrere Zeilen";


Deshalb müssen in der Antwort alle HTML-Texte, die z.B. an eine jquery Funktion übergeben werden vorher von Zeilenumbrüchen bereinigt werden.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users