I am working on a project with AngularJS and facing an issue (which seems to be known but I did not understand or succeed to apply the solutions) :
I tried to use fresh table (http://demos.creative-tim.com/fresh-bootstrap-table) with ng-view. When I prepare a template without angular it is all working fine. But when I try to insert this table in angular in an ng-view it's not working anymore.
I have figured out that has to do with the javascript code they use after the balise :
<script type="text/javascript">
var $table = $('#fresh-table'),
$alertBtn = $('#alertBtn'),
full_screen = false;
$().ready(function(){
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
striped: true,
sortable: true,
pageSize: 8,
pageList: [8,10,25,50,100],
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
});
$(function () {
$alertBtn.click(function () {
alert("You pressed on Alert");
});
});
function operateFormatter(value, row, index) {
return [
'<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a>',
'<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">',
'<i class="fa fa-edit"></i>',
'</a>',
'<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
</script>
I have read it is difficult to execute custom javascript functions with Angular. I don't know how to do this...
Here is my index.html file with the ng-view where I am trying to insert the table :
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SaaS Manager</title>
<meta name="Main" content="Dashboard">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="../resources/styles/fresh-bootstrap-table.css" rel="stylesheet" />
<link rel="stylesheet" href="../resources/styles/style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
<script src="controllers/dashboardController.js"></script>
<script src="controllers/configurationDetailsController.js"></script>
<script src="services/myService.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row banner">
<div class="col-md-4">
<img src="../resources/images/logo.png">
</div>
<div class="col-md-5">
<h1>My title</h1>
</div>
</div>
<div ui-view></div>
</div>
</body>
</html>
Here is the content of the view file :
<div class="container-fluid">
<section class="dashboard">
<div ng-controller ="dashboardCtrl as dashboard">
<div class="fresh-table toolbar-color-orange">
<div class="toolbar">
<h2>Liste des services disponibles</h2>
</div>
<table id="fresh-table" class="table">
<thead>
<th data-field="Nom" data-sortable="true">Nom</th>
</thead>
<tbody>
<tr ng-repeat="configuration in configurations">
<td>{{configuration.service.name}} </td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
The question is where should I put the javascript function ?
Thanks for your help guys !
I can't see where you implement ng-view in your HTML markup, and as far as where do you add in your javascript function, that would be in the controller associated with the view file for which you wrote the function.
Related
I am trying to insert html attribute buttons into popover in bootstrap5 by JavaScript.
I am trying to make a clear button with this function below:
But button is not showing. Only text inside the popover.
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Check out</button></a> <button class='btn btn-primary' onclick='clearCArt()' id='clearcart'>Clear cart</button>"
console.log(popStr);
document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', popStr);
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,
{
html: true
})
});
function clearCart() {
cart = JSON.parse(localStorage.getItem('cart'));
for (var item in cart) {
document.getElementById('div' + item).innerHTML = '<button id="' + item + '"class="btn btn-primary cart">Add To Cart</button>'
}
localStorage.clear();
cart = {};
updateCart(cart);
}
You can try using anchor tag instead of a button.
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Update for the buttons to work
Firstly i changed popover content
Old version :
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
New version :
I changed anchor href="#" to href="javascript:void(0)" prevent to redirect another place or page.
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
And then i tested. I can catch buttons (anchor) only when popover shown popover._element returns to popover button.
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
I'm guessing that for security reasons. Bootstrap doesn't let for button. but we can set function as above
Complete snippet
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script>
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
function clearCart(){
console.log('Array cleared');
}
</script>
</body>
</html>
I use Bootstrap tooltips to create beautiful HTML tooltips for items. I basically have a skill image in the form of a .png image
<img id="skill" src="ice-bolt-inactive.png" data-toggle="tooltip" data-html="true" title="" />
i define the image into a variable
let skillImage = document.getElementById('skill');
then i initiate the tooltip like this:
skillImage.title = '<p class="skill-title">' + iceBolt.name + '</p><p class="skill-text">' + iceBolt.description + '</p><p class="skill-text">' + iceBolt.setLevel() + '</p><p class="skill-text">' + iceBolt.setDamage() + '</p><p class="skill-text">' + iceBolt.setDuration() + '</p><p class="skill-text">' + iceBolt.setManaCost() + '</p><p class="skill-title">' + iceBolt.name + ' Receives Bonuses From: </p><p> ' + iceBolt.description + '</p>';
Now when i click on the skill image, i fire up an onclick function which increments the iceBolt.level++; . This successfully does that ( i also log the iceBolt.level into the console so i confirm it's changing) but the bootstrap tooltip remains unchanged (doesn't reflect the iceBolt.level, even though i've set it up to display it)
Is my usage of the bootstrap tooltip bad or is it that the bootstrap tooltips won't handle something like this. I want to use them as they are responsive and easy to use.
UPDATE:
Code snipper shared, will help you update your tooltip title whenever some particular event occurs in your application.
The idea is: Setting my title dynamically using a function call which returns the updated data.
$("#skill").tooltip({
placement: "right",
title: userDetails, // userDetail() is a function which will return our updated data
html: true,
});
Function will look something like;
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
The event handler in which we update the content of tooltip.
document.querySelector("button").addEventListener("click", () => {
tooltipText += "Add"; // Updating my data
userDetails();// Sending updated Title
})
FULL CODE:
$(document).ready(function () {
// Add tooltip
$("#skill").tooltip({
placement: "right",
title: userDetails,
html: true,
});
});
var tooltipText = "Hello";
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
document.querySelector("button").addEventListener("click", () => {
tooltipText += "Add";
userDetails();
});
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<img
id="skill"
class="skill"
src="https://picsum.photos/100"
data-toggle="tooltip"
data-html="true"
data-selector="true"
alt="skill image"
/>
<p id="ice-bolt-level"></p>
<button>Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
YOU CAN USE THE SAME LOGIC TO PROCEED FORWARD IN YOU APPLICATION.
For anyone who is looking in the future. This solution is for Bootstrap - 5, using JQuery and Javascript.
Init the Tooltip
var tootTipTitleText = 'True or False';
$(document).ready(function () {
//Enable ToolTip
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
});
Remove the Previous Tooltip on Button Click
$('[data-bs-toggle="tooltip"]').tooltip("dispose");
Get the value to check.
if(checkBoxValue == true) {
tootTipTitleText = 'true';
} else {
tootTipTitleText = 'false';
}
Init another tooltip
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
Display The Tooltip
$('[data-bs-toggle="tooltip"]').tooltip("show");
Sample HTML and JS Function
function changeToolTipTitle()
{
$('[data-bs-toggle="tooltip"]').tooltip("dispose");
var checkBoxValue = $("#toolTipCheckBox").is(":checked");
if(checkBoxValue == true)
{
//title="Checked or Unchecked"
tootTipTitleText = 'Checked';
}
else
{
tootTipTitleText = 'Unchecked';
}
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
$('[data-bs-toggle="tooltip"]').tooltip("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="toolTipCheckBoxDiv" class="form-check inputCheckBox" data-bs-toggle="tooltip" title="">
<input class="form-check-input" type="checkbox" id="toolTipCheckBox" value="true" onchange="changeToolTipTitle();" />
<label class="form-label" for="toolTipCheckBox">Check</label>
</div>
I am using https://craftpip.github.io/jquery-confirm/#customizing plugin for the popup. I just need a help When user click on Confirm button then why It's not redirecting it? If I used alert(); then it is displaying.
The function is not getting id value.
Would you help me in this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
</head>
<body>
<?php
$delete_id=2;
?>
<a href="javascript:void(0);" onClick="warning('<?php echo $delete_id;?>')" class="cross-cta">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script type="text/javascript">
function warning($id){
$.confirm({
title: 'DELETE SELECTED!',
content: 'Are you sure?.',
type: 'red',
typeAnimated: true,
theme: 'material',
buttons: {
tryAgain: {
text: 'Confirm',
btnClass: 'btn-red',
action: function(){
window.location='mypage?action=empty&deletekey='+id+'';
}
},
close: function () {}
}
});
}
</script>
</body>
</html>
Finally I found my issue.
The issue was function warning($id){ in this line.I used $id instated of id.
I have to use like this function warning(id) and it's working perfectly.
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.
I am unable to use angular-intro.js on my angular-material app. I have tried to implement it outside my app on a simplified plunker and still have not had positive results. Can anyone point out to me what I am doing wrong ??
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
I have yet to find an example of someone implementing this on an angular-material app, I have only seen it on an angular-js app. Below is my view. In both my app and the plunker CallMe() never seems to be called.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2" />
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="angularjs#1.5.3" data-semver="1.5.3"></script>
<script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="angular-animate#1.5.3" data-semver="1.5.3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="angular-aria#1.5.3" data-semver="1.5.3"></script>
<script src="https://github.com/itzgAndEnenbee" data-require="angular-messages#1.5.3" data-semver="1.5.3"></script>
<link href="style.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript" src="angular-intro.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body layout="column" layout-fill ng-app="YourApp" ng-controller="DemoCtrl">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe">
<md-toolbar class="top">
<div class="md-toolbar-tools">
<button class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
</div>
</md-toolbar>
<md-content class="md-padding" flex>
<div class="step0" layout-xs="column" layout="row">
<p>Testing</p>
</div>
</md-content>
<md-toolbar class="bottom">
<div class="md-toolbar-tools">
<button class="step2 btn btn-large btn-success">Button 1</button>
</div>
</md-toolbar>
<div id="step1" layout-xs="column" layout="row">
<button class="btn btn-large btn-success">Button 2</button>
</div>
</div>
</body>
</html>
My DemoCtrl is below:
angular
.module('YourApp', ['ngMaterial', 'angular-intro'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.dark();
})
.controller('DemoCtrl', function ($scope) {
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('.step0'),
intro: 'Testing',
position: 'right'
},
{
element: '#step1',
intro: 'Testing',
position: 'bottom'
},
{
element: '.step2',
intro: 'Testing 2',
position: 'right'
}],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc: true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = false;
});
EDIT: So I have been able to fix this in my application by moving the ng-intro-options and ng-intro-method attributes from the same element where the ng-controller attribute was defined. I got this idea from here. This fix did not fix my plunker example, though. And also I am now having an issue in my app where intro.js makes a md-toolbar disappear from view when the overlay is active.
It looks like one or more AngularJS/AngularMaterial files you are loading is causing a problem:
I replaced the files you load with those used by the AM demos
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
and it seems to work - Plunker
Note: rel="stylesheet" should be added to any link tag otherwise the style is not processed.