Develop Reference

Vue JS Custom directive data binding

I'm creating a custom directive to make a form submit via ajax - however I can't seem to get validation errors to bind to the Vue instance.
I am adding my directive here:
<form action="{{ route('user.settings.update.security', [$user->uuid]) }}" method="POST"
enctype="multipart/form-data" v-ajax errors="formErrors.security" data="formData.security">
My directive looks like:
Vue.directive('ajax', {
twoWay: true,
params: ['errors', 'data'],
bind: function () {
this.el.addEventListener('submit', this.onSubmit.bind(this));
},
update: function (value) {
},
onSubmit: function (e) {
e.preventDefault();
this.vm
.$http[this.getRequestType()](this.el.action, vm[this.params.data])
.then(this.onComplete.bind(this))
.catch(this.onError.bind(this));
},
onComplete: function () {
swal({
title: 'Success!',
text: this.params.success,
type: 'success',
confirmButtonText: 'Back'
});
},
onError: function (response) {
swal({
title: 'Error!',
text: response.data.message,
type: 'error',
confirmButtonText: 'Back'
});
this.set(this.vm, this.params.errors, response.data);
},
getRequestType: function () {
var method = this.el.querySelector('input[name="_method"]');
return (method ? method.value : this.el.method).toLowerCase();
},
});
And my VUE instance looks like:
var vm = new Vue({
el: '#settings',
data: function () {
return {
active: 'profile',
updatedSettings: getSharedData('updated'),
formData: {
security: {
current_password: ''
}
},
formErrors: {
security: []
},
}
},
methods: {
setActive: function (name) {
this.active = name;
},
isActive: function (name) {
if (this.active == name) {
return true;
} else {
return false;
}
},
hasError: function (item, array, sub) {
if (this[array][sub][item]) {
return true;
} else {
return false;
}
},
isInArray: function (value, array) {
return array.indexOf(value) > -1;
},
showNotification: function () {
if (this.updatedSettings) {
$.iGrowl({
title: 'Updated',
message: 'Your settings have been updated successfully.',
type: 'success',
});
}
},
}
});
However, when I output the data, the value for formErrors.security is empty
Any idea why?

The issue is with the this.set(/* ... */) line. this.set doesn't work the same as Vue.set or vm.$set.
this.set attempts to set the path that you passed to the directive: v-my-directive="a.b.c". So running this.set('foo') will attempt to set $vm.a.b.c to 'foo'.
What you want to do is this:
(ES6)
this.params.errors.splice(0, this.params.errors.length, ...response.data)
(Vanilla JS)
this.params.errors.splice.apply(this.params.errors, [0,this.params.errors.length].concat(response.data))
That will update whatever Object is tied to the errors param on the DOM Node. Make sure that you do v-bind:errors="formErrors.security" or :errors="formErrors.security".

Display Bootstrap Modal on Browser Back AngularJS

I am new to angularjs I have to show confirmation dialog on browser back,I am trying to do so but not able to achieve the required functionality.
Here is my code:
var previousUrl,backPress = false;
$rootScope.$on('$locationChangeStart', function( event, newUrl, oldUrl ) {
if (previousUrl && previousUrl === newUrl) {
BootstrapDialog.show({
title: "title",
message: "message",
closable: true,
buttons: [{
label: "ok",
action: function (dialogRef) {
backPress=true;
event.preventDefault();
dialogRef.close();
}
}, {
label: "cancel",
action: function (dialogRef) {
backPress=false;
dialogRef.close();
}
}]
});
console.log("backPress"+backPress);
if (!backPress) {
console.log("backPress in condition"+backPress);
event.preventDefault();
}
} else {
previousUrl = oldUrl;
}
});
Kindly Suggest how to proceed next.

Knockout Complex Data Model Binding

Let's start with the code..
Javascript to bind viewmodel and display dialog
$("#add-song").click(function () {
$("<div>")
.attr("data-bind", "template: { name: 'manage-song-template' }")
.dialog({
resizable: false,
modal: true,
title: "Add Song",
width: 960,
height: 490,
buttons: [
{
text: "Create Song",
'data-bind': 'click: savechanges',
click: function () {
}
},
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
],
close: function () {
$(this).dialog('destroy').remove();
},
open: function () {
ko.applyBindings(new my.managesongviewmodel());
jquerybindings();
}
});
});
Now let's take a look at the view model
my.managesongviewmodel = function () {
var
//Scalar Properties
song = null,
//Functions
loadfromserver = function (Id) {
$.post("/song/getsong", "id=1", function (response) {
if (response.Success) {
var data = response.Data;
var song = response.Data.Song;
var songdata = {
Song: {
Id: song.Id,
Title: song.Title,
Description: song.Description,
Lyrics: song.Lyrics,
isMaster: song.isMaster,
AudioFilePath: song.AudioFilePath,
CoverImageFilePath: song.CoverImageFilePath,
CreatedDate: song.CreatedDate
},
Genres: data.Genres,
SongAlternateTitles: data.SongAlternateTitles,
Exploitations: data.Exploitations,
SongWriterSongs: data.SongWriterSongs
};
song = new my.song(songdata);
alert(song.title());
}
});
},
savechanges = function () {
};
loadfromserver();
return {
song: song,
loadfromserver: loadfromserver
};
};
my.song = function (data) {
var
//Scalar Properties
id = ko.observable(data.Song.Id),
title = ko.observable(data.Song.Title),
description = ko.observable(data.Song.Description),
lyrics = ko.observable(data.Song.Lyrics),
ismaster = ko.observable(data.Song.isMaster),
audiofilepath = ko.observable(data.Song.AudioFilePath),
coverimagefilepath = ko.observable(data.Song.CoverImageFilePath),
createddate = ko.observable(data.Song.CreatedDate),
//Arrays
genres = ko.observableArray(data.Genres),
alttitles = ko.observableArray(data.SongAlternateTitles),
exploitations = ko.observableArray(data.Exploitations),
songwritersongs = ko.observableArray(data.SongWriterSongs);
return {
id: id,
title: title,
description: description,
lyrics: lyrics,
ismaster: ismaster,
audiofilepath: audiofilepath,
coverimagefilepath: coverimagefilepath,
createddate: createddate,
genres: genres,
alttitles: alttitles,
exploitations: exploitations,
songwritersongs: songwritersongs
};
};
Here is my template
<script type="text/html" id="manage-song-template">
<div class="modal-form">
<span data-bind="text: song.title"></span>
</div>
</script>
Chrome is throwing the error "Cannot read property 'title' of null;" when I launch the dialog. That said, the "alert(song.title());" actually shows a the song title.
Any thoughts on where I've gone wrong?
Update
I have created a jsfiddle that replicates the issue. http://jsfiddle.net/mcottingham/H7jqa/28/

It's easy. In the moment when you shows modal window your song var still equals null. So you have to wait while info about song will be loaded from server:
$("<div>").attr("data-bind", "template: { name: 'manage-song-template' }").dialog({
// another options
open: function (event, ui) {
var vm = new my.managesongviewmodel(), domNode = this;
vm.loadfromserver().done(function() {
ko.applyBindings(vm, domNode);
jquerybindings();
});
}
})
// another code
And add return statement at the begining of loadfromserver function:
loadfromserver = function (Id) {
return $.post("/song/getsong", "id=1", function (response) {
// code
});
}

Ext JS Event not firing

I have an app and everything is rendered fine. However, I can't catch the mainTabChanged Event and do not no why. I did everything like in the example, console logs FIRED, but never RECEIVED.
Why?
Ext.define('MyApp.controller.Tab', {
extend:'Ext.app.Controller',
init:function () {
var me = this;
me.mainWindow = me.getView('tab.List').create();
me.control({
'mainTab': {
mainTabChanged: me.onMainTabChanged
}
});
},
me.onMainTabChanged: function(oldTab, newTab, settings) {
console.log("received");
console.log(settings);
}
});
Ext.define('MyApp.view.tab.List', {
extend:'Ext.form.FieldSet',
alias:'widget.mainTab',
initComponent:function () {
var me = this;
me.title = 'App'
me.items = me.createElements();
me.addEvents(
'mainTabChanged'
);
me.callParent(arguments);
},
createElements: function () {
var me = this, tabs = [];
tabs = [{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}];
var tabPanel = Ext.create('Ext.tab.Panel', {
height: 150,
activeTab: 0,
plain: true,
items : tabs,
listeners: {
beforetabchange: function(panel, newTab, oldTab) {
console.log("FIRED");
me.fireEvent('mainTabChanged', oldTab, newTab, 'Test');
}
}
});
return tabPanel;
}
});

I think the problem is that your widget "mainTab" is a 'List', but you are firing the event from a 'tabpanel'.
In the controller try this:
me.control({
'mainTab > tabpanel': {
mainTabChanged: me.onMainTabChanged
}
or just
me.control({
'tabpanel': {
mainTabChanged: me.onMainTabChanged
}

My problem was, that I was trying to injecting one app into another. I have now solved the problem by not injecting the app, but by injecting the controller and views directly into the app and hence make them a native part of the app, so they will not bypass the event bus.

Anonymous classes in my javascript

I have the following code:
var modal = $.modal({
title: title,
closeButton: true,
content: content,
width: 1000,
maxHeight: 850,
resizeOnLoad: true,
buttons: {
'Submit': function (win) {
submitHandler($link, $('#main-form'));
},
'Submit & Close': function (win) {
var rc = submitHandler($link, $('#main-form'));
if (rc == true) { win.closeModal(); }
},
'Close': function (win) {
win.closeModal();
}
}
});
What I would like to do is have a different set of buttons depending on the type of modal window that is being created. I tried to do this using the following code but I get an error:
if (title.substr(0, 4) == "Crea") {
title += $('#RowKey').val();
var btns = btns1;
}
if (title.substr(0, 4) == "Edit") {
var btns = btns1;
}
if (title.substr(0, 4) == "Dele") {
var btns = btns2;
}
var btns1 = new {
'Submit': function (win) {
submitHandler($link, $('#main-form'));
},
'Submit & Close': function (win) {
var rc = submitHandler($link, $('#main-form'));
if (rc == true) { win.closeModal(); }
},
'Close': function (win) {
win.closeModal();
}
}
var btns2 = new {
'Submit & Close': function (win) {
var rc = submitHandler($link, $('#main-form'));
if (rc == true) { win.closeModal(); }
},
'Close': function (win) {
win.closeModal();
}
}
var modal = $.modal({
title: title,
closeButton: true,
content: content,
width: 1000,
maxHeight: 850,
resizeOnLoad: true,
buttons: btns
});
The error that I get is on the line:
var btns1 = new {
Error message is:
Object doesn't support this action
I guess there is something wrong with the way I make the assignment but I am not sure how to do this. I hope someone can help me out.
Can someone help me by telling me what I am doing wrong.

omit the new for objects.
var btns1 = new { .. };
should be
var btns1 = {someProperty: someValue, ... };
alternativ way with new:
var bts1 = new Object();
btns1.someProperty = someValue; ...

No need for the new operator: you can instantiate your new Object via the Object literal:
var btns1 = { ... };