Repository for Project
here is the repository to see what i have done so far. I got the clock and modal to combine nicely however the popup for the modal seems to be layered behind the modal itself. I know that jquery and angular don't play nice together. However i have gotten an older version of this to work with a modal however i need to use the newest version because the callbacks have information that i need. If anyone has suggestions i would really appreciate it! Thankyou!
Here are some code snip its from the repository
index.html inside the folder specified clockpicker-gh-pages:
<html>
<head>
<title>ClockPicker</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/github.min.css">
</head>
<body ng-app="mymodal">
<div ng-controller="MainCtrl" class="container">
<button ng-click="toggleModal('Success')" class="btn btn-default">Success</button>
<button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button>
<button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button>
<button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button>
<modal visible="showModal">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript" class="ng-scope">$('.clockpicker').clockpicker();</script>
</modal>
</div>
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and from this folder there is a modal app.js script that contains:
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.buttonClicked = "";
$scope.toggleModal = function (btnClicked) {
$scope.buttonClicked = btnClicked;
$scope.showModal = !$scope.showModal;
};
});
mymodal.directive('modal', function () {
return {
templateUrl: 'userOptionsModal.html',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.visible, function (value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
also to format the modal window the html file that is specified as User options modal is the template for the modal window.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{ buttonClicked }} Hello world!</h4>
</div>
<div class="modal-body" ng-transclude>
</div>
</div>
</div>
</div>
please keep in mind most of the code that is listed here is within the folder labeled clockpicker-gh-pages. If this helps let me know!
In angular's directive documentation, it says the element passed into the link function for a directive is a "jqLite-wrapped element".
So in your example, it appears to me that the line of code $(element).on( ... ) should be element.on( ... ).
EDIT: I didn't see the $(element).modal( ... ) lines. Though I've never used modal before I believe that should be modified in the same way.
The other option would be to put an id on your angular directive template, and access it like this.
$('#myelementid').modal( ... ) and $('#myelementid').on( ... )
Related
I am creating an ASP.NET Core MVC application (.NET version 5) where I am trying to use a Javascript library called FullCalendar. I added the library's Javascript using a CDN link in a script tag at the bottom of the app's layout (see _Layout.cshtml) and linked the library's stylesheet (also using a CDN).
_Layout.cshtml:
#using Microsoft.AspNetCore.Identity
#using Infrastructure
#inject UserManager<ApplicationUser> UserMananager;
#{
var user = await UserMananager.GetUserAsync(User);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - App</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href='https://unpkg.com/boxicons#2.0.9/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar##5.1.0/main.min.css">
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="sidebar">
...
</div>
<div class="home_content">
#RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar##5.1.0/main.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I use the library in one of my razor pages like this:
Index.cshtml:
#section Scripts {
<script>
$(document).ready(function() {
$("#calendar").fullCalendar({ // This function is not recognized
header: {
left: "",
center: "prev title next",
right: ""
},
eventClick: function(event, jsEvent, view) {
$("#modalTitle").html(event.title);
$("#modalBody").html(event.description);
$("#eventUrl").attr("href", event.url);
$("#fullCalModal").modal();
return false;
},
events: "#Url.Action("GetAppointments", "Appointment")"
})
})
</script>
}
<div class="container">
<div id="calendar">
</div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span><span class="sr-only">close</span></button>
<h3 id="modalTitle" class="modal-title"></h3>
</div>
<div id="modalBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="eventUrl" target="_blank">Event Page</a>
</div>
</div>
</div>
</div>
</div>
However, when I open the page the following error pops up in the console:
Uncaught TypeError: $(...).fullCalendar is not a function
I looked at the network tab and the FullCalendar library seems to load just fine and the jQuery library to loads before the FullCalendar library (as it should):
Network tab screenshot
Would anyone know what's going wrong here?
<script src="https://cdn.jsdelivr.net/npm/fullcalendar##5.1.0/main.min.js"></script>
First, if directly access the above fullcalendar reference, it couldn't find this version package.
So, you could try to use the 5.10.1 version fullcalendar reference, like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.10.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.10.1/main.min.js"></script>
Second, if you check the fullcalendar document, you can see that, in Fullcalendar V5 version, we should create a FullCalendar.Calendar object to render the fullcalendar, instead of using the fullCalendar function. code like this:
<div id="calendar">
</div>
#section Scripts {
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
}
The result as below:
For the fullCalendar function, this might apply to the previous version fullCalendar, like this sample(it using fullCalendar 3.10.0 version and the fullCalendar function, if you add the JS reference and copy the code to Asp.net core application, it also works well).
I am trying to implement close on out side click, the element is closing on outside click, but it closes also on an inside click, it should work like in the example : http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview
I dont understand, why the element.find cant find the target, when it is his child.
HTML Directive
<div class='multiDate'>
<div class="dropdown">
<button data-ng-click="show = !show" class="dropbtn">Press</button>
<div id="myDropdown" ng-show="show" class="dropdown-content">
<multiple-date-picker></multiple-date-picker>
</div>
</div>
</div>
HTML Main
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" />
<script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="cntrl">
<multi-date></multi-date>
</body>
</html>
JS
var app = angular.module("app", ['multipleDatePicker']);
app.controller("cntrl", function($scope) {
});
app.directive('multiDate', function($document) {
return {
templateUrl: 'multi.html',
replace: true,
link: function(scope, element) {
$document.bind('click', function(event) {
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup)
return;
scope.show = false;
scope.$apply();
});
}
}
});
PLNKR
The directive seems to be fine.
You just need to add $event.stopPropagation to stop outer event.
<multiple-date-picker ng-click="$event.stopPropagation(); dateClickedModelChanged()" day-click="dateClicked" ng-model="dateTimeModel"></multiple-date-picker>
Here is your modified plunker
My angularjs bootstrap modal is not opening.
var app=angular.module('test', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function($scope, $log,$modal) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
});
<html ng-app="test">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<!--<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If I use the bootstrap version 0.6.0 the modal working fine.But If I use version 2.5.0 it gives me the error "Unknown provider: $modalProvider <- $modal". But I have to use version 2.5.0.How to solve the problem? Please help.Thanks in advanced.
In js part:
plunker here.
Make these two files in separate folder, and make sure js is loaded correctly.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
IN HTML:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
I'm calling for the bootstrap modal HTML file from my main HTML file here is an example code of what I'm doing. Link
<div class="container" ng-controller="MainAngularControler"> <!--The main div with the controller in it-->
As it shows can anyone suggest a way to call another Angular controller for bootstrap modal. because the button that calls for the modal to load is in a div which already has an angular controller, this doesn't let the modal to load another different angular controller. The idea behind all these is to make my code more understandable.
When creating the modal instance in your angular controller you need to pass the modal controller like this.
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
Have a look at this plunker or the code below.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (selectedItem) {
//$ctrl.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope){
$scope.text = 'I am from modal controller SCOPE';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
THIS IS A MODAL. {{text}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<a ng-click="OpenModal()">Open Modal</a>
</body>
</html>
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>
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
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.