summernote editor not opening (laravel 5.2)

Asked 10/9, 2016 at 19:22 Answered 22/9, 2016 at 15:2

javascript php jquery laravel summernote

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>

Chancellorship answered 10/9, 2016 at 19:22 Comment(17)

what do you mean by you applied it to more than one field? – Continuant 12/9, 2016 at 5:40

i mean earlier i have applied it only for textfield4(it worked), now i want to apply for textfield5 too(now doesnt work for both) (as shown in view) – Chancellorship 12/9, 2016 at 6:26

Ensure you edit function is called - add console.log($estado, $goodat); to your edit function and tell us the console output – Continuant 12/9, 2016 at 6:47

getting following error: Uncaught ReferenceError: $estado is not defined(…) – Chancellorship 12/9, 2016 at 9:38

What is the result of $('#estado'); in your console? – Continuant 12/9, 2016 at 10:37

Its Result is Null – Chancellorship 12/9, 2016 at 11:19

Then you simply do not have the element on your screen. your loop seems to be wrong – Continuant 12/9, 2016 at 12:24

Then why it works for single loop? – Chancellorship 12/9, 2016 at 13:0

Let us continue this discussion in chat. – Chancellorship 12/9, 2016 at 13:0

Have You tried to change $(document).ready(function() {}); to $(window).load(function() {}); ? – Philippines 18/9, 2016 at 13:7

@Philippines didn't worked. – Chancellorship 18/9, 2016 at 14:32

Have You checked inspector panel of chrome or firebug console of firefox? any exceptions and etc? – Philippines 18/9, 2016 at 14:41

@Philippines guide me, i'll check. i am using chrome – Chancellorship 18/9, 2016 at 14:44

right click on anything in page => 'inspect element' => select 'console' tab, then refresh browser You'll get js exceptions there (if they exist). – Philippines 18/9, 2016 at 14:47

@Philippines ohk ohk , no no console is showing nothing . – Chancellorship 18/9, 2016 at 14:50

can You give some public url to test it live? – Philippines 18/9, 2016 at 14:56

Let us continue this discussion in chat. – Chancellorship 18/9, 2016 at 14:57

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.

Composed answered 18/9, 2016 at 19:35 Comment(4)

I've created a jsfiddle here: jsfiddle.net/97tet4so with an implementation. – Composed 22/9, 2016 at 7:51

Why not? Do you get an error or anything? Is everything rendered in your view? – Composed 22/9, 2016 at 15:24

I've updated the JSFiddle and activated the edit button. I hope it is the desired behaviour. – Composed 22/9, 2016 at 15:34

Let us continue this discussion in chat. – Chancellorship 22/9, 2016 at 15:40

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

Philippines answered 22/9, 2016 at 15:2 Comment(8)

actually i wanted multiple textareas on clicking edit button. – Chancellorship 22/9, 2016 at 15:25

@YaShChaudhary fixed – Philippines 22/9, 2016 at 15:38

at num8er nope :( ! – Chancellorship 22/9, 2016 at 15:39

Uncaught TypeError: $estado.summernote is not a function – Chancellorship 22/9, 2016 at 15:42

:D You even have not attached summernote.js file to template! look it works in my example, even I've not changed Your template file to make it work with blade. But You've not injected necessary for summernote files to template. – Philippines 22/9, 2016 at 15:43

Copy whole page (not blade file, just what in source code in browser) to somewhere. Let people check Your problem. – Philippines 22/9, 2016 at 15:50

Man, sorry, I'm out, have no time to play with newbie. Sorry. – Philippines 22/9, 2016 at 16:15

Uncaught ReferenceError: $ is not defined....its showing error at this line :$(function() { – Chancellorship 25/9, 2016 at 2:54

Recommended topics

Hot tags