0

I'm trying to use a WYSIWYG editor in my Laravel application but I have a bug I can't solve.

What works:

  • A form that sends a post request with a text area filled (name = pitch)
  • So the request is well formed and I can retrieve it in my controller, everything is perfect

My Problem

When I add a WYSIWYG editor on this specific textarea (with Trumbowyg or Redactor, I tried both), then pitch disappears from the request and I can't get it on the controller.

I don't have any JS issue in the console, when I delete the call to the WYSIWYG editor, everything is fine, so I don't know where to search.

DB field for pitch is text (I tried switching it to string, but didn't work either).

Here is my view code:

         <tr>
             <td>{!! Form::label('pitch', 'Pitch') !!}</td>
             <td>{!! Form::textarea('pitch','',array('class' => 'pitch')) !!}</td>
         </tr>

<script type="text/javascript">
    $(function()
    {
        $('#pitch').trumbowyg({
            resetCss: true
        });             
    });
</script>

And in the Controller, this code gives me null

dd($request->input('pitch'));

Mode Code Sample in this gist

KetA
  • 11
  • 1
  • 4
  • 1
    Have you tried `dd($request->all())` to see what is in the request? Perhaps the name got changed by the js? – haakym Mar 10 '16 at 08:42
  • Thank you @haakym i tried and get all the other form fields right but not the one i want (pitch) `array:9 [▼ "_method" => "PUT" "_token" => "1mMt0YL0qKcpEHYtxJoHbb6mNjG5zFh7nsaTMUB9" "name" => "TestAAA" "url" => "http://testaaa.fr" "country" => "FR" "priority" => "3" "statut" => "Blacklisté" "template" => "0" "taganalytics" => "" ]` – KetA Mar 10 '16 at 08:47
  • make sure the textarea name is pitch when you inspect. the wysiwyg JS might be removing the name from the element. MaterialNote is also a pretty good wysiwyg wit its own flaws – Chris Mar 10 '16 at 09:20
  • @KetA you're welcome, that's weird! Can you check `view source` and double check the blade directives are outputting the `textarea` code as expected. If using chrome perhaps you could try watching the network tab to see what is submitted by the form. – haakym Mar 10 '16 at 09:27
  • I'm a bit confused how your wysiwig code is even working actually. Your blade is `Form::textarea('pitch','',array('class' => 'pitch'))` There's no `id` in sight, yet your js to set the wysiwig is looking for the id `$('#pitch').trumbowyg({`? – haakym Mar 10 '16 at 09:28
  • @Chris The text area name and id and class are all "pitch" Laravel is automatically setting an id up to "pitch" so the js is finding the textarea but you're right, i corrected it (but that doesn't solve my problem) I'll look through Chrome network tab – KetA Mar 10 '16 at 09:34
  • So with Google Network the post request is: _method:PUT _token:dqpzy4zKZLJFwr5uVK9F5KotYIZQy4uuo4KbyT6P name:TestAAA url:http://testaaa.fr country:FR priority:3 statut:Blacklisté template:0 taganalytics: So, still doesn't contains "pitch" – KetA Mar 10 '16 at 09:36
  • @KetA do a console serialize for the textarea and check its value. What you put in the wysiwyg might not be reflecting in the textarea as the wysiwyg creates a separate node to show wysiwyg insides. if you put something in and do a serialize in JS console `$("textarea[name='pitch']").serialize()` and nothing returns. You will probably have to prevent submit, populate REAL textarea with the wysiwyg contents and then continue with the submit. Had to do this with materialNote – Chris Mar 10 '16 at 09:46
  • Actually, When i try `$("textarea[name='pitch']").serialize()` in js console i do get what i type in the wisywyg... – KetA Mar 10 '16 at 09:57

1 Answers1

1

Actually, a friend of mine helped me to catch the problem. Thank you very much @Chris & @ haakym

So the problem is an HTML conflict, my form was imbricated in a table and that made a parsing conflit so i put the begining and the closing of the form outside of the table and now it's fine.

I would certainly never have found that by myself because everything else was working fine, but you know that's what they call experience !

KetA
  • 11
  • 1
  • 4