Confirmation dialog with data using AngularJS - javascript

I am trying to make a dialog box that confirms the user wants to proceed.
The situation is this: I have a table with may events. The user can decide to delete the event.
The table is built like this:
<tbody>
<tr ng-repeat="event in EventsCtrl.events>
<td>
<a ng-click="event.updateStatusDone(event.eventid)" href="#">
<i class="delete-icon"></i>
</a>
</td>
<td>{{event.timestamp}}</td>
<td>{{event.date}}</td>
...
The relevant code in the controller looks like this:
app.controller('EventController', ['$http', function($http){
this.updateStatusDone = function(eventid){
$http.delete(serverUrl + "/manage/event/" + eventid);
}
}
Now I'd like to add a confirmation box (I read about modal), that will ask the user to confirm.
The eventid has to be passed through.
I've tried researching a lot about modal, but they all seem to alert, without passing the data required (eventid in this case).
Does anyone have a working example? A lead, some reference to give?
Thanks in advance!

Here is a partial example to get you started, from something I wrote:
function createMessageBox($dialog, title, message, buttons) {
var msgBox = $dialog.dialog({
templateUrl: 'partials/dialogs/message_dialog.html',
controller: 'MessageBoxController',
backdrop: false,
dialogClass: 'modal confirm-dialog movable',
resolve: {
model: function () {
return {
title: title,
message: message,
buttons: buttons
};
}
}
});
return msgBox;
}
As you can see I'm passing the title, message and buttons variables, and later using them in the message_dialog.html dialog.

I found the best thing so far to fit my situation here:
https://stackoverflow.com/a/19930247/5459561
It actually calls my function only if accepted.
One thing to keep in mind, it is not a good looking dialog box, that part still needs work.

Related

Javascript button event not working after page 1

Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}
When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});
is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.

Vue and Summernote - content from model not showing in form when loaded from db

Ok, I have a form in which I am using the wysiwyg editor summernote several times. When I fill in my form, the model is updated correctly, the content is shown and the results are saved correctly to the database. BUT when I want to edit and load the data from the database, the model is showing the contents correctly in the developer tools, but nothing makes it on to the screen.
This is what I have:
I have a component to load and initiate the summernote editor
<template>
<textarea class="form-control"></textarea>
</template>
<script>
export default{
props : {
model: {
required: true
},
height: {
type: String,
default: '150'
}
},
mounted() {
let config = {
height: this.height,
};
let vm = this;
config.callbacks = {
onInit: function () {
$(vm.$el).summernote("code", vm.model);
},
onChange: function () {
vm.$emit('update:model', $(vm.$el).summernote('code'));
},
};
$(this.$el).summernote(config);
}
}
</script>
I have a form (here is only one part of it) where I load the Summernote component as html-editor:
<html-editor
:model.sync="form.areaOfWork"
:class="{ 'is-invalid': form.errors.has('areaOfWork') }"
name="areaOfWork"
id="areaOfWork"></html-editor>
In the props, after loading from the DB, the data shows correctly, i.e.:
model:"<p> ... my content ...</p>"
Likewise, in my form it shows correctly, i.e.:
form: Object
areaOfWork: "<p> ... my content ...</p>"
...
But it is not shown in html-editor. I am stuck - maybe it is something super simple I am overlooking, but I did not find anything that helped me so far. Thanks for ideas and inputs
I think the problem stemmed from using jquery and vue in one project!
Because vue uses virtual DOM and jquery changes the real DOM, this makes the conflict!
So it is better not to use both of them in one project or use jquery safe in it like link below:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
Thanks for your answer, #soroush, but that doesn't seem to be the problem. There is a communication and it seems to work. I do see my form being filled with correct data as well.
After playing around with numerous ideas, I found a simple work-around: watcher
I added
watch: {
areaOfWork: (val) => {
$('#areaOfWork').summernote("code", val);
}
},
to my template and the according variables to my data().
When I call my database and read the item, I provide the data for the watcher and it works.
Still, I do not get why vm.model in the onInit callback is not shown, but as it seems to work, I wanted to provide you with an answer. Maybe it helps someone else
HTML:
<textarea class="summernote-editor"name="memo_content"id="memo_content"</textarea>
JS:
$('#memo_content').summernote("code", response.data.res.memo_content);

Angular-froala is not updating the ng-model

HTML:
<textarea froala="froalaOptions" ng-model="froalaContent"></textarea>
Controller:
$scope.froalaContent = '';
$scope.froalaOptions = {
placeholderText: '<i class="fa fa-book placeholder-icon"></i> Share your story',
events: {
'froalaEditor.focus': function () {
angular.element('.feed .fr-toolbar').css('display', 'block');
},
'froalaEditor.blur': function () {
angular.element('.feed .fr-toolbar').css('display', 'none');
}
}
}
Order of JavaScript inclusions:
"vendor/jquery/jquery-1.11.1.js",
"vendor/angularjs/plugins/angular-froala-master/jquery-embedly.js",
"vendor/angularjs/plugins/angular-froala-master/froala-editor.js",
"vendor/angularjs/plugins/angular-froala-master/froala-sanitize.js",
"vendor/angularjs/plugins/angular-froala-master/angular-froala.js",
"vendor/angularjs/plugins/angular-froala-master/embedly.min.js",
"vendor/angularjs/plugins/angular-froala-master/video.min.js",
"vendor/angularjs/plugins/angular-froala-master/image.min.js",
"vendor/angularjs/plugins/angular-froala-master/lists.min.js",
"vendor/angularjs/plugins/angular-froala-master/image.min.js",
"vendor/angularjs/plugins/angular-froala-master/colors.min.js",
"vendor/angularjs/plugins/angular-froala-master/font_size.min.js",
"vendor/angularjs/plugins/angular-froala-master/font_family.min.js",
In the function ctrl.updateModelView() in angular-froala.js, I can see that the value is being updated correctly, but it just doesn't seem to pass the value back to the parent scope. No matter what I do, whenever I log the $scope of my controller, froalaContent is always equal to an empty string.
I somehow managed to get it to work earlier by changing the ng-model on the HTML element to ng-model="$parent.froalaContent" but that doesn't seem to be working anymore.
I've been studying the documents for a while now and I feel like I have everything in its proper place, can anyone share some insight as to where I've gone wrong? Could it be I'm using an out-of-date version of jQuery or did I mess up the order of file inclusions?
Thanks for any and all help.

Angular: Run method every time a directive updates

I'm looking to have a function run every time an angular directive updates. In my case, I have an array of modal configurations that get used on a modal markup template.
Every time the template is used to generate a modal due to a change in the model, I want to run a positionModal() method.
scope.$watch in the link function doesn't seem to notice when I change the model, and I cant think of any other way of doing this. I tried a post-link function thinking that the compile function would get called when the directive was applied, but that doesn't seem to work either. Here is my example controller:
MyApp.controller("ModalController", function () {
//Define scope vars
$scope.modals = [];
$scope.$on("modalTrigger", function (event, settings) {
$scope.modals.push(settings);
});
});
Note: I've simplified the controller here- know that it DOES work.
Here is the template code:
<div class="modalParent" ng-controller="ModalController">
<div id="{{modal.id}}" class="modal" ng-class="modal.type" ng-repeat="modal in modals">
<div class="content">
<h2 ng-show="modal.title">{{modal.title}}</h2>
<p>{{modal.message}}</p>
<button>{{modal.button}}</button>
</div>
</div>
</div>
The directive is currently like this:
MyApp.directive("modalParent", function () {
var positionModals = function (element) {
element.find(".modal .content").each(function () {
//position logic here
});
};
return {
restrict: "C",
compile: function (tElement) {
positionModals(tElement);
}
};
});
Note: Also simplified for the purposes here.
The positionModals() call works when the first modal gets pushed to the array. After that, it stops working.
I've tried using the linking function as well, same result. scope.$watch(modals, function(){...}) does not work.
Can somebody help me figure out what I'm doing wrong?
Figured it out!
I was applying the directive to the parent, ".modalParent".
The ng-repeated element in this case is the modal itself ".modal".
You would want the directive to run on elements that get updates as the model changes, because then the linking function will get called each time the element is instantiated, rather than sitting and watching the parent and trying to update from there.
Hope this helps somebody.
Instead of calling like this, my approach is to write this in the services and inject that services in the controller wherever you want to get that function or the data to be notified as,
Services.js
as.service("xyzservice",function(factoryname){
//here the code goes...
})
Now inject in Controller,
ac.controller("controllername",function(xyzservice){
})
ac.controller("controllername",function(servicename){
})
ac.controller("controllername",function(xyzservice){
})
Here we have injected it in the two controller, we can get it.

TinyMCE UndoManager. Get event to fire

I have made a webform that uses a TinyMCE editor. When the user clicks on a link to leave the page, I want a message to be displayed if he still has unsaved changes. For this, I was thinking of using the TinyMCE undoManager, http://www.tinymce.com/wiki.php/API3:class.tinymce.UndoManager
Essentially, I want the events onAdd, onUndo, OnRedo to fire. I will then keep track of the number of changes (if any) since the last save. But how do I get them to fire? Where do I set them up?
Also, it would be nice to have access to the hasUndo method in the rest of my javascript code. Again, not sure where to initiate this?
Not sure if it matters, but I'm using Django.
Edit: I have tried
tinyMCE.init({
...,
setup : function(ed) {
ed.UndoManager.onAdd(function(ed) {
ed.windowManager.alert('added.');
});
}
});
This gives me an error: Unable to get value of the property 'onAdd': object is null or undefined
I created a tinym fiddle for this: http://fiddle.tinymce.com/H0caab .
The solution is to use the oninit setting and to addresss the onAdd.add:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed) {
ed.undoManager.onAdd.add(function(ed) {
alert('added.');
});
});
}
});

Categories

Resources