summernote editor not opening (laravel 5.2)

Question

I am using summernote js in laravel 5.2.

In a form,when user clicks on edit button, summernote editor should open for the fields.Actually it was working for a single field but when i applied it for more than one field,its not working.

my view:

 <form action="{{route('account')}}" id="acc" class="ac" method="post">
  <div class="col-lg-3"><label>Estado</label>
  @foreach($accounts as $account)
  @if($user== $account->user)
  {!! $account->estado !!}



  <textarea  style="display:none;" name="textfield4" id="textfield4"></textarea>


  <div class="col-lg-2 estado " id="estado"></div>
  @endif
  @endforeach



</div>
  <div class="col-lg-4"></div>
</div>
<div class="row">
  <section class="col-lg-3 "><label for="textfield5">I'm Good At:</label>
  @foreach($accounts as $account)
  @if($user== $account->user)
  {!! $account->goodat !!}





   <textarea  style="display:none;" name="textfield5" id="textfield5"></textarea>
  <div class="col-lg-2 col-md-2 es" id="goodat"></div>

  @endif
  @endforeach

<br /><div><button type="button" class="btn btn-info edit">Edit</button>
    <button type="submit" class="btn btn-success" id="btn-send-message" >Save</button>
    <input type="hidden" value="{{Session::token()}}" name="_token">
    </div>


  </form>

my script:

  <script>
$(document).ready(function() { 
var $estado = $('#estado'); 
var $goodat = $('#goodat'); 

var edit = function() { 
$estado.summernote({focus: true}); 
$goodat.summernote({focus: true}); 
}; 

$('.edit').on('click', edit); 

$("#acc").on('submit', function(e) { 
e.preventDefault(); 
var self = this; 

// lets check some stuff 
console.log($estado); 
console.log($estado.summernote('code')); 
console.log($('#textfield4')); 
console.log($('#textfield4').val()); 
console.log($('#textfield4').text()); 

var estado = $estado.summernote('code'); 
$("#textfield4").val(estado); //populate text area 

var goodat = $goodat.summernote('code'); 
$("#textfield5").val(goodat); //populate text area 

self.submit(); 
return false; 
});
});


</script>

EDIT 1:

I've found out that, after clicking on save button ( which results in null values in db)(everytime a user logins) , edit button starts working perfectly.

EDIT 2:

after placing all links and scripts in head tag , error: $ is not defined .

     <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="_token" content="{{ csrf_token() }}">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/crush.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/groups.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/Untitled-2.css')}}">
        <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/font-awesome.css')}}">

        <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/style.css')}}">





<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script   src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
   <script src="/src/js/myplace.js"></script>
   <script src="{{URL::asset('src/js/script.js')}}"></script>

</head>

Answer 1

I think you could have some asynchronous issues here, since it works sometimes, and sometimes not. You are setting the value of the textareas based on the values of the summernote fields. You can't be sure though, that $estado.summernote('code') is already finished before using the value of the summernote field to set the value of textfield4 (same holds for $goodat.summernote('code') and textfield5 .

When you use callbacks for the summernote events, you can prevent this behaviour and have more control.

$('#estado').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
      $("#textfield4").val(contents); //populate text area
    }
  } 
});

Read more here

Another thing that could be causing trouble, is the foreach loop containing elements with hardcoded id's. Since id's have to be unique this can give some unexpected results. Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk.

UPDATE: added a jsfiddle here of a possible implementation.

Answer 2

You wanted multiple textareas with summernote?

Take: (;

 $(function() { var $estado = $('#estado'); var $goodat = $('#goodat'); var isEditorsActive = false; function activateEditors() { $estado.summernote({ focus: true }); $goodat.summernote({ focus: true }); isEditorsActive = true; } function deactivateEditors() { $estado.summernote('destroy'); $goodat.summernote('destroy'); isEditorsActive = false; } $('button.edit').click(function(e){ e.preventDefault(); (isEditorsActive)? deactivateEditors() : activateEditors(); }); $("form#ac").submit(function(e) { e.preventDefault(); var $this = $(this); if(isEditorsActive) { var estado = $estado.summernote('code'); var goodat = $goodat.summernote('code'); $('#data-estado').html(estado); $('#data-goodat').html(goodat); } return false; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <!-- include summernote css/js--> <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> <form action="{{route('account')}}" id="ac" class="ac" method="post"> <div class="row"> <div class="col-lg-3"> <label>Estado</label> @foreach($accounts as $account) @if($user== $account->user) <div class="estado" id="estado" style="width:100%"> {!! $account->estado !!} </div> @endif @endforeach </div> <div class="col-lg-3"></div> <div class="col-lg-3"> <label>I'm Good At:</label> @foreach($accounts as $account) @if($user==$account->user) <div class="goodat" id="goodat" style="width:100%"> {!! $account->goodat !!} </div> @endif @endforeach </div> </div> <button type="submit" class="btn btn-success save">Save</button> <button class="btn btn-default edit">Edit</button> </form> ESTADO: <div id="data-estado"> </div> GOOD AT: <div id="data-goodat"> </div>

but after this You still cannot get the data that inside these textareas - so really something is wrong with Your blade template

http://num8er.me/summernote.html

summernote editor not opening (laravel 5.2)

Question

2 answers

solution1
1 2016-09-18 19:35:58

solution2
1 2016-09-22 15:02:55

summernote editor not opening (laravel 5.2)

Question

2 answers

solution1 1 2016-09-18 19:35:58

solution2 1 2016-09-22 15:02:55

solution1
1 2016-09-18 19:35:58

solution2
1 2016-09-22 15:02:55