Save, Redirect, setFlash (and Dance)

Hey Peter,

We don't have any plans to make a separate tutorial about form events, but we do have a few related screencasts that explain this concept, check it out:
- https://knpuniversity.com/s...
- https://knpuniversity.com/s...

But if you stuck on some step with it, we'd be glad to help you.

Cheers!

Hey Blueblazer172 ,

Where do you call your addFlash() method? It should be right before redirect to the other page, then when you successfully save your entity - you will be redirected to the other page and then reloading page do nothing.

Cheers!

Yeah that works :) Thanks

Hi Claire S.!

Hmm, tricky! So, I *do* have one idea :). When you set a flash message, it "sticks" in the session *until* something reads it. So, in theory, it could stick in the session for 100 requests... only to display on the 101st request (if that was the first page that *actually* tried to render them).

So, your situation makes me wonder: does the www_news page possibly *not* contain the flash-rendering code? If that's the case, then it (obviously) won't render on that page, but it *would* render later on any other page that contains the flash-rendering code (e.g. the form page). The best recommendation is to put the flash message in your base layout, so that it shows everywhere.

But, if I'm wrong, let us know! In that case, we'll want to see the templates to in order to spot the issue. Your controller code looks great!

Cheers!

Hey Trafficmanagertech,

Actually, it depends. If you pass $genus object to the createForm() as a second argument - then you don't need to call $genus = $form->getData():

$genus = new Genus;
$form = $this->createForm(GenusFormType::class, $genus);
// the $genus object will be updated after handleRequest() call

Cheers!

Thank you!

Hey Szymon,

Yes, you can totally do it via AJAX. Just render the form as always, but then add an event listener in JS to trigger when you press the submit button. All you need to do in it is just e.preventDefault() to prevent submitting form, then if you're using jQuery: $("form :input").serialize() - which will serialize all the data in form and you can pass it to data attribute to $.ajax({}), e.g.:

$("input[type='submit']").click(function(e) {
    e.preventDefault();

    $.ajax({
        url: $("form").attr('action'),
        data: $("form : input").serialize(),
        // other data if needed...
    });
});

Feel free to make more complex changes to my simple example ;) Then, you don't need to change anything on the backend side, everything should work the same.

Cheers!

Hi:)
Thx for answer.

I was trying this way but i messed up with data parameter :).

In your way i had syntax error in here:

$("form : input").serialize()```

Error was: "Unrecognized input type"
i did like that:

$("form").serialize()`

and now its ok.

Unfortunatelly now in form object i dont have "clickedButton" property.
It seems that its not send with other form parameter:(

I really need it because i use few buttons in my form, each for diffrent action.
Do you know how to fix it?

I was trying send another data in Ajax.data parameter but i have syntax error no matter how i do it :(

What is the corect syntax? How to send submit button name?

...and now with ajax, flash massages dont show up.
Do you know way?

Hey Szymon,

Ah, sorry, my bad! I meant "$("form :input").serialize()", so there should not be any spaces between ":" and "input". Actually, see ":input selector" in jQuery docs: https://api.jquery.com/input-selector/ . But yeah, "$("form").serialize()" should do the trick.

OK, ok, if you have a few buttons and check for specific button click on the server side - you need a bit more work. You can inject the proper button data yourself into the serialized data like:

var serializedData = $("form :input").serialize(),
serializedData.your_submit_button_name = null;

$.ajax({
    data: serializedData,
    // other data if needed...
});

You an hardcode it because you know exactly what button was clicked since you added listeners to those buttons. If you're not sure about how the button should be added to the serializedData, try to do "console.log(serializedData);" to see how your serialized object looks like. And I think it should work.

But you know what? Probably instead of adding listeners for submit buttons you better add one listener for form submit event, see https://api.jquery.com/submit/ and probably this way you'll have the clicked button in serializedData out-of-the-box, but I'm not sure here. But in anyway, injecting button name into the serializedData manually should work well.

Cheers!

Hi Victor, ...its me again:)

Another problem is that each form element has name where last characters are inside square bracet like that: "dodaj_dane_procesu_suszeniaform[zapisz]" - i dont know why, it must be symfony think.

So i have error: "referenceError: zapisz is not defined at HTMLButtonElement.<anonymous>" in this line
"serializedData.your_submit_button_name..."

I think it will be easily to add listener for each submitt buttons like that:

 $(document).on('click', 'button.id', function(){ //here puting  $.ajax({}) }```


And on the server side makes seperate routes (which render the same twig ) for each action.  

What do you think? Is it good solution? Is it good programing practice in symfony?

Hey Szymon,

Ah, sorry for misleading you, I somehow though that .serialize() return JSON, but it returns string! So what you need is just to concatenate button's name to it via ampersand ("&"):

var serializedData = $("form :input").serialize(),
serializedData += '&your_submit_button_name';

But yeah, since Symfony uses field names as "form_name" + "[property_name]", you need to escape those square brackets, so in your case for "dodaj_dane_procesu_suszeniaform[zapisz]":

var serializedData = $("form :input").serialize(),
serializedData += '&dodaj_dane_procesu_suszenia_form_%5Bzapisz%5D';

You can console.log(serializedData) to see the result. So try this way.

Cheers!

Hey Victor.
Thank you for help.
I ended up with this code:

<script>
    //Akcja do wykonania
    var zapisz = "";
    var edytuj = "";
    var usun = "";
    
        jQuery('#dodaj_dane_procesu_suszenia_form_zapisz').click(function () {
            zapisz = true;
        });

        jQuery('#dodaj_dane_procesu_suszenia_form_edytuj').click(function () {
            edytuj = true;
        });

        jQuery('#dodaj_dane_procesu_suszenia_form_usun').click(function () {
            usun = true;
        });

    $("button[type='submit']").click(function(e) {
    e.preventDefault();
    
    var serializedData = "";
    serializedData = $("form").serialize();

        if (zapisz) {
           serializedData += '&dodaj_dane_procesu_suszenia_form%5Bzapisz%5D';
        }
         if (edytuj) {
           serializedData += '&dodaj_dane_procesu_suszenia_form%5Bedytuj%5D';
        }

        if (usun) {
           serializedData += '&dodaj_dane_procesu_suszenia_form%5Busun%5D';
        }

    $.ajax({
        url: $("form").attr('action'),
        type: "POST",
        data: serializedData,
        async: true,
                success: function (data)
                {
                    
                    if (zapisz) 
                    { document.getElementById("info").innerHTML = "<div class='alert alert-success alert-dismissable'><button type='button' class='close' data-dismiss='alert'>&times;</button><b>Sukces!!!</b>&nbsp Dane zostały zapisane.</div>"; }

                     if (edytuj) 
                    { document.getElementById("info").innerHTML = "<div class='alert alert-success alert-dismissable'><button type='button' class='close' data-dismiss='alert'>&times;</button><b>Sukces!!!</b>&nbsp Wybrane dane zostały edytowane. </div>"; }

                     if (usun) 
                    { document.getElementById("info").innerHTML = "<div class='alert alert-success alert-dismissable'><button type='button' class='close' data-dismiss='alert'>&times;</button><b>Sukces!!!</b>&nbsp Wybrane dane zostały usunięte. </div>"; }

                    zapisz = "";
                    edytuj = "";
                    usun = "";
                    
                    console.log(data)

                    $('div#raport').html(data.output);
                }
    });
});

</script>

It works like i wanted:).
Maybe it will be useful for somebody.

Cheers!

Hey Szymon,

Looks legitimate for me, well done! And thanks for sharing it with others.

P.S. Since you have jQuery, you can replace document.getElementById("info").innerHTML with jQuery('#info').html('<div>...</div>') to be consistent. ;)

Cheers!

Hey Victor, I'm back :)

Now i have second form in my aplication and i also send it by Ajax.
Unfortunately Symfony keep saying me that "Token CSRF is not invalid. Please send form again".
The first form works fine.

Do you know what may cause this problem?

...I have already read everything on Stackoverflow about it and try what they say but it doesn't work in my case:(

Hey Szymon Chomej

You may be missing rendering or passing the CSRF field to your endpoint. Compare the inputs that you send in your first form.
Btw, you can disable CSRF protection if you need to. If you are already in a secured area, removing the CSRF protection may save you some headaches

Cheers!

Hi.
The CSRF input field is on it's place, it was first what i checked.
It turns out that this form it's not submiting and i don't know why.
The code is exactly the same like in my first form:

<script>
     $("#dodaj_info_dodatkowe_form_dodajInfoDodatkowe").click(function(e) {
    e.preventDefault();

    jQuery('#info').html('<div id="loader_wraper"> <img id="loader" src="{{ asset('images/loader.gif') }}" /> </div>') 
        
        var serializedData = "";
        serializedData = "{{ path('tworzenieRaportuSuszenia')|escape('js') }}";
        serializedData += '&dodaj_info_dodatkowe_form%5BdodajInfoDodatkowe%5D';
        console.log(serializedData)

       $.ajax({
        url: "{{ path('dodajInfoDodatkowe')|escape('js') }}",
        type: "POST",
        data: serializedData,
        async: true,
            beforeSend:function(data)
            {
                 var formularz = $('#dane_dodatkowe_form').serializeArray();
                 console.log(formularz)
                     $.each(formularz, function(i, field)
                     {
                        if(formularz[i].value == "")
                        {
                           var dlugosc = formularz[i].name.length-1;

                          jQuery('#info').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert">&times;</button><b>Uwaga!!!</b>&nbsp Wypełnij puste pole: <b>'+formularz[i].name.substring(26,dlugosc)+'</b>.</div>')

                          xhr.abort();   
                        }
                    }
                    );
            },
            error: function (data)
            {
                 jQuery('#info').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert">&times;</button><b>Uwaga!!!</b>&nbsp Wymiana danych z serwerem nie powiodła się. Błąd połączenia AJAX. Zgłoś problemy z aplikacją do jej administratora. </div>') 
            },
            success: function (data)
            {
                code
            },
            complete: function()
            {
                 $("#loader_wraper").hide();
                 
            }
    });


});
</script>```


And this is in my controller:

    $form_info_dodatkowe = $this->createForm(dodajInfoDodatkoweFormType::class);
    $form_info_dodatkowe->handleRequest($request);

    if ($form_info_dodatkowe->isSubmitted() && $form_info_dodatkowe->isValid())
      {

         $wiadomosc = 'Form dziala';
         $info2 = ['info2' => $wiadomosc];
         return new JsonResponse($info2); 
     }
      if ($form_info_dodatkowe->isSubmitted() && !$form_info_dodatkowe->isValid())
        {   
            $wiadomosc = 'Zle dane';
            $info = ['info' => $wiadomosc];
            return new JsonResponse($info);      
        }

I see all data in console but it mising in $form_info_dodatkowe object so it wasn't send by Ajax :(

Do you have any idea why this doesn't work?

Try serializing the data like this:

serializedData = $("form").serialize()```

So you don't lose any form field

Cheers!

Yes, that was it :)
...i don't know why i have not noticed it, probably i look to much on it :)

Thx for help.

Cheers!

No worries, for next time you already know where to look ;)

Hey Juan Nicolás

In that case you can pass them as *query* parameters of the URL (e.g. site.com/your/route?number1...
If that doesn't work as you want, there are other options, like saving it in the filesystem or in the Session, just like the flash message

I hope it helps you :)

Cheers!

Thanks for answer me Diego (at two questions :) I did can't sleep thinking about Symfony. Too much to learn.

Have a nice day!

haha, it have happened to me too (Symfony punching your brain while sleeping) :)

Very astute Terry! That's exactly it: each "key" in the flash bag is actually an array that can hold many values. Most of the time, you don't need this, but it's built with that flexibility. The only time I've ever relied on this is a few times when I've used the flash bag to send custom analytic information. When the user takes an action, I would record it in a special place on the flashbag. Then, the next time a full HTML page was loaded, we would read those flash messages and render some custom JS to send that info to the analytics service. In this case, it was possible that the user would take *multiple* actions, before the next full page load... and that was totally fine :).

Cheers!

Got it. Thanks.

One more note:
In the video, "app" gets autocompleted by Symfony\Bundle\FrameworkBundle\Templa.. but in my case app gets autcompleted by \Symfony\Bridge\Twig\AppVariables

And of course Ive installed the symfony plugin, on every video before this one autocompletion worked as expected

Hey Mike P.

Which version oh PHPStorm are you using ? You might need to upgrade it, aswell the Symfony plugin
Have you checked your settings for the Symfony plugin ? settings->language&frameworks->symfony - make sure all the checkboxes related to twig are checked

Cheers!

Hey Diego, I've reviewed everything and even deleted the cache of the project, doesn't seem to work.

Here are all infos for you:

Repository from me:

https://github.com/emovere/...

Pictures of PHPStorm Settings you requested:

http://imgur.com/a/LPrMV

I really hope you can help to get the autocomplete working for TWIG app.

I assist you with everything you need.

Hmm, look's like your configuration is correct
Try clearing index in symfony plugin details and exclude from your project "var/cache" folder
Are you on Windows ?

Even after a click on "clear index" and wait until it is completed, the same behavior. app.$x doesn't autocomplete. (Well it does kind of but not the way it should be, see the pictures: http://imgur.com/a/LPrMV )

Its strange because things like error.$x does get autocompleted.
Iam on macOS 10.12.6.

Yo Mike P.!

Hmm, interesting. So, in general, auto-completion in Twig is not rock solid. Usually, it's because you're using some variable in a template... and since PhpStorm doesn't 100% know which controller is rendering that template (it tries to guess), sometimes it may not auto-complete. And even when it does know what variables are available, it doesn't always know what type those variables are (this goes back to adding good @return statements, etc).

But your situation is more mysterious... which is never a good thing ;). I can see that when it's auto-completing the global App variable, it knows that this is an AppVariable object! And so therefore, it should be smart enough to know that any get* methods on that class (e.g. getSession) can be accessed via the app.session key. And actually, I just tested with the latest versions of everything, and I also don't get this auto-completion :/. It seems like it's some bug in storm or the plugin. I don't know if that will make you feel better or worse ;). Hopefully it will resolve itself.

Cheers!

It makes me feel better, because I know I haven't overseen anything! Many thanks for your AWESOME LIGHNING FAST comments / help, iam really feeling more dangerous and have just started 2 weeks ago. You're awesome!