How to implement code mirror to show hint without CTRL+SPACE - javascript

JavaScript :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
extraKeys: {
"Ctrl-Space": "autocomplete"
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This is my JS file, the ctrl-space works fine but I need, to implement autocomplete without any key bindings.
I have even tried this :
$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/* CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
/*extraKeys: {
"Ctrl-Space": "autocomplete"
},*/
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
But this is not working.
Is there something I am missing here? How can I show live completion hints with codemirror?
I have used show-hints.js , and have modified it a bit to work for "." too.
Please help.

Use this function to autocomplete codeMirror without CTRL + Space.
Set completeSingle to false in the show-hint.js
editor.on("inputRead", function(instance) {
if (instance.state.completionActive) {
return;
}
var cur = instance.getCursor();
var token = instance.getTokenAt(cur);
if (token.type && token.type != "comment") {
CodeMirror.commands.autocomplete(instance);
}
});

$http.get("/getApexBody", config).then(function(response) {
document.getElementById("saveBtn").disabled = false;
document.getElementById("cleanBtn").disabled = false;
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if (globalEditor1) {
globalEditor1.toTextArea();
}
setTimeout(function(test) {
/*CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.auto
});
};*/
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
extraKeys: {
".": function(editor) {
setTimeout(function() {
editor.execCommand("autocomplete");
}, 100);
throw CodeMirror.Pass; // tell CodeMirror we didn't handle the key
}
},
gutters: ["CodeMirror-lint-markers"],
lint: true,
mode: "text/x-apex"
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ';' || input.text[0] === ' ') {
return;
}
//CodeMirror.commands.autocomplete = function(editor) {
editor.showHint({
hint: CodeMirror.hint.auto
});
//};
});
globalEditor1 = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
This works, but after entering ".", it does gives methods of that particular variable but after entering few more matching words it again starts showing hints from original set of words.
for eg: isBatch and isAbort are two methods of System class.
When I start typing Sy... System comes up, then I type ".", them the two methods shows up isBatch and isAbort, but when I type isA instead of showing isAbort it starts showing hints from full list of words again.
Is there a way to avoid this too?

Related

sweetalert2 text input with validation of the text with javascript in R Shiny

I am upgrading from sweetalert to sweetalert2 in R shiny and so far have managed to get the regular response by the R shiny server to ok/cancel buttons in the alert messages working, but now I am stuck with the next type, namely text input messages where I used to perform some validations for:
empty
use of special characters
before sending the value to R.
Here you can find an app in which sweetalert2 is implemented.
in the new problem I'm trying to replace the javascript in that app with a message that holds an input message:
myjava <- "shinyjs.swalFromButton = function(params) {
var defaultParams = {
title: null,
html : null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html,
input: 'text',
showCancelButton : true,
showConfirmButton : true,
closeOnConfirm: false,
confirmButtonColor: '#339FFF',
allowOutsideClick: false,
inputValidator: function(value) {
if(value === '') { return !value && 'You need to write something!'}
else {
var val2= true;
Shiny.setInputValue('option2', val2, {priority: 'event'}) };
}
});
};"
This works so far, but I have no clue how to add the other check for use of special characters (which are not allowed in file names)
In my old code I had this line for sweetalert (1) working:
var format = /[!##$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
if(format.test(inputValue)){
swal.showInputError('Special characters are not allowed');
return false;
}
But when I build this, it doesn't work in sweetalert2:
myjava <- "shinyjs.swalFromButton = function(params) { swalFromButton = function(params) { var defaultParams = {
title: null,
html : null
};
params = shinyjs.getParams(params, defaultParams);
swal({title : params.title, html : params.html,
input: 'text',
showCancelButton : true,
showConfirmButton : true,
closeOnConfirm: false,
confirmButtonColor: '#339FFF',
allowOutsideClick: false,
inputValidator: function(value) {
if(value === '') { return !value && 'You need to write something!'}
else {
var format = /[!##$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
if(format.test(value)){
return !value && 'Special characters are not allowed'}
else {
var val2= true;
Shiny.setInputValue('option2', value, {priority: 'event'})}
}
}
});
};
As promised in the other post, here is a solution without shinyjs:
library(shiny)
js <- "
Shiny.addCustomMessageHandler('sweet',
function(message) {
swal({
title : message.title,
html : message.html,
input : 'text',
showConfirmButton : true,
confirmButtonText : 'Confirm',
confirmButtonColor: '#00cc00',
showCancelButton : true,
cancelButtonText : 'Cancel',
cancelButtonColor : '#339fff',
allowOutsideClick: true,
allowEscapeKey: true,
inputValidator: function(value) {
if(value === '') {
return 'You need to write something!'
} else {
var format = /\\`|\\~|\\!|\\#|\\#|\\$|\\%|\\^|\\&|\\*|\\(|\\)|\\+|\\=|\\[|\\{|\\]|\\}|\\||\\\\|\\'|\\<|\\,|\\.|\\>|\\?|\\/|\"|\\;|\\:/g;
if(format.test(value)){
return 'Special characters are not allowed'
}
}
}
})
.then(function(result){
if(result.dismiss === swal.DismissReason.cancel) {
swal('failure');
} else {
swal('success');
Shiny.setInputValue('option1', result.value, {priority: 'event'});
}
});
}
);
"
ui <- basicPage(
tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.min.js"),
tags$link(rel="stylesheet", type="text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.min.css"),
tags$script(js)
),
actionButton("messageButton", "Click me")
)
server <- function(input, output, session){
observeEvent(input$messageButton, {
session$sendCustomMessage(type = "sweet",
message = list(title = paste('<span style ="color:#339FFF;">An alert with an input text'),
html = "Enter text"))
})
observe({print(input$option1)})
}
shinyApp(ui, server)

Error with Knockout-validation validation

I have a collection of text editors in a form, validating them with knockout-validation. When I submit the form, only a few of them show validation errors, although all of them should pass. This issue only occurs with these two fields shown in error, however I have checked and double checked and all of the wiring for all of these is set up correctly, e.g. there is no reason I can see that these two fields should be different from the others that do not exhibit this issue.
I'm hoping that someone with more experience than I in the internals of knockout-validation could point me to something that may be alternately tripping the validation of these. I have it set up to validate the text when a user clicks outside of the editor, and that works fine. The issue below only appears when a user clicks submit, and other fields on the page (besides the editors shown here) have an issue. In other words, if every single field is valid, the form is submitted. If any fields OTHER than those shown below have issues, the false positive is shown.
Adding Code examples:
Creating the validator and extending the observables. Note the ones depicted in the image are configured identically to those not being marked invalid:
ko.validation.rules['notIn'] = {
validator: function (value, params) {
var thisValidator = baseCompare.slice();
if (Array.isArray(params))
params.forEach(function (element, index, array) {
thisValidator.push(element);
});
else
thisValidator.push(params);
return thisValidator.indexOf(value) == -1;
},
message: 'Please enter a unique value'
};
ko.validation.registerExtenders();
self.setupValidation = function () {
self.title.extend({
required: true,
notIn: {
message: 'Please enter a unique title',
params: self.froalaBasify('New Change Request')
}
});
self.domain.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
self.priority.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
self.securityClassification.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
self.impact.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
self.customersAffected.extend({
required: true,
notIn: {
message: 'Please describe the customers affected',
params: self.froalaBasify(CRHelper.ValidationPlaceholders.customersAffected)
}
});
//False Positive
self.justification.extend({
required: true,
notIn: {
message: 'Please provide a justification for the request',
params: self.froalaBasify(CRHelper.ValidationPlaceholders.justification)
}
});
self.scope.extend({
required: true,
notIn: {
message: 'Please describe the systems affected by this change',
params: self.froalaBasify(CRHelper.ValidationPlaceholders.scope)
}
});
//False Positive
self.validationProcess.extend({
required: true,
notIn: {
message: 'Please enter a validation plan for this change',
params: self.froalaBasify(CRHelper.ValidationPlaceholders.validationProcess)
}
});
self.description.extend({
required: true,
notIn: {
message: 'Please enter a description',
params: self.froalaBasify(CRHelper.ValidationPlaceholders.description)
}
});
self.deadlineRequested.extend({
required: true,
dateGreaterThanToday: {
onlyIf: function () {
//var isTrue = $('#ddTransition option:selected').text() == "Delete Request";
//return !(isTrue);
return self.id === 0;
}
}
});
//self.deadlineRequested.extend({
// required: true}).extend({ notify: 'always' });
};
And then here is the submit handler:
self.submitChangeRequest = function () {
var validated = ko.validatedObservable(self.ChangeRequest());
var transition = "";
transition = $('#ddTransition option:selected').text();
var disableValidation = false;
if (transition == "Delete Request")
disableValidation = true;
var formIsValid = validated.isValid();
if (CRHelper.ConfirmSubmitIfDeleteChosen() && (disableValidation || formIsValid)) {
$('.submitter').prop('disabled', true);
var formUsage = $("[id*='hdnFormUsage']")[0].value;
var ajax = new utils.AjaxFormatter(
{
type: "POST",
data: ko.toJSON(self.ChangeRequest()),
url: DomainUtil.baseUrl + "api/ChangeRequests/",
contentType: "application/json",
headers: { 'formUsage': formUsage }
},
function (updatedModel, status, request) {
var updateMessage = formUsage == 'execute' ? 'executed' : (formUsage == 'new' ? 'saved new' : transition == 'Delete Request' ? 'deleted' : 'updated');
var $msg = $("[id*='StatusMessage']");
$msg.html('Successfully ' + updateMessage + ' Change Request ' + updatedModel.id);
$msg.addClass('alertGo').show().fadeOut({ duration: 8000, easing: 'easeInQuint', complete: function () { $msg.removeClass('alertGo'); } });
if (formUsage == 'new') {
changeRequestViewModel.SetChangeRequest(new ChangeRequestModel());
CRHelper.SetEditors('new');
} else {
changeRequestViewModel.SetChangeRequest(new ChangeRequestModel(updatedModel));
CRHelper.SetEditors('edit');
}
if ((formUsage == 'editState' || formUsage == 'edit') && updatedModel.activeStateId === 8)
$('#approvedByItems').toggle();
if (formUsage === 'execute' || (formUsage === 'editState' && updatedModel.activeStateName == 'Approved')) {
$('#divExecuted').toggle();
$('#divChangeState').hide();
}
try {
$('#dtpDeadlineRequested').datepicker();
$('#dtpDeadlineRequested').datepicker('refresh');
} catch (e) {
$('#dtpDeadlineRequested').datepicker('destroy');
$('#dtpDeadlineRequested').datepicker();
}
if (transition == "Delete Request") {
$('.submitter').prop('disabled', true);
$('#divSubmitButtons #buttonSet').toggle();
$('#divSubmitButtons #returnLink').toggle();
$('#formFields').prop('disabled', true);
}
if (updatedModel.activeStateName == 'Executed' || updatedModel.activeStateName == 'Deleted' || updatedModel.activeStateName == 'Approved') {
$('#formFields').prop('disabled', true);
$('.editor').unbind('dblclick');
$('#divSubmitButtons #buttonSet').toggle();
$('#divSubmitButtons #returnLink').toggle();
}
},
function (request, status, error) {
//update message text
var $msg = $("[id*='StatusMessage']");
var updateMessage = formUsage == 'execute' ? 'executing' : (formUsage == 'new' ? 'saving' : 'updating');
$msg.html('Failure ' + updateMessage + ': ' + error);
$msg.addClass('alertStop').show().fadeOut({ duration: 8000, easing: 'easeInQuint', complete: function () { $msg.removeClass('alertStop'); } });
},
function () {
if (pwChooser)
pwChooser.selectedPW([]);
//hide spinny
}
);
utils.tokenizedAjax(ajax);
} else {
ko.validation.group(self.ChangeRequest()).showAllMessages();
var $msg = $("[id*='StatusMessage']");
$msg.html('Check your entries and try again')
.addClass('alertCaution')
.show()
.fadeOut({
duration: 2000,
easing: 'easeInQuint',
complete: function () {
$msg.removeClass('alertCaution');
}
});
}
}
And then here is where I declare the observables on the model - all pretty straightforward:
self.description = ko.observable(crData.description || '');
self.domain = ko.observable(crData.domain || '');
self.id = crData.id || 0;
self.impact = ko.observable(crData.impact || '');
self.includesPolicyWaiver = ko.observable(crData.includesPolicyWaiver || false);
self.justification = ko.observable(crData.justification || '');
self.priority = ko.observable(crData.priority || '');
self.scope = ko.observable(crData.scope || '');
self.securityClassification = ko.observable(crData.securityClassification || '');
self.title = ko.observable(crData.title || 'New Change Request');
self.validationProcess = ko.observable(crData.validationProcess || '');
I've triple-checked the code and there is nowhere else that the values behind these two form fields are being explicitly changed. This looks to me like a global-type value is getting toggled then not reset or something.
This is interesting: The only change I made was the order of the elements in the html. Doing the same test/submission, now the other fields that are in the 2nd and 4th position are showing the false positive. The ones that showed it originally validate as expected.

Load extra conditional in backbone js page

I have a backbone app developed externally - initially where I perform the definitions & inject jquery etc..) on the first line - the 7th param is the 'tools template')
I
P.S A lot of code has been removed from here for clarity/ease (as it is well over 800 lines with all the other code) & this is all new to me so feel free to point out any obvious mistakes
On Line 8 - I have the following line:
window.isMobileDevice ? "text!views/tools/templates/i_tools.html" : "text!views/tools/templates/tools.html",
This basically does a 'if a mobile device load mobile page OTHERWISE load the standard (desktop) page.
I want to amend this with some additional logic but unsure how...
I want to add in another conditional, which basically says the following:
if (mobile device)
Load mobile page (as is now) e.g mobile-tools.html
else
if (stampVar == true)
load desktop stamp page e.g stamp-tools.html
else
load the standard desktop page e.g tools.html
Any ideas on how to do this? The stampVar will basically be true/false and i'm trying to work out how to load that in dynamically from an existing js object
define([
"jquery",
"backbone",
"config",
"models/model",
"collections/collection",
"views/tools/toolsBase",
window.isMobileDevice ? "text!views/tools/templates/i_tools.html" : "text!views/tools/templates/stamper_tools.html",
window.isMobileDevice ? "text!views/tools/templates/i_editor.html" : "text!views/tools/templates/editor.html",
window.isMobileDevice ? "text!views/tools/templates/i_txts.html" : "text!views/tools/templates/txts.html",
window.isMobileDevice ? "text!views/tools/templates/i_txtsItem.html" : "text!views/tools/templates/txtsItem.html",
"text!views/tools/templates/fontItem.html",
"curvetext"
],
function ($, Backbone, Config, Model, Collection, ToolsBase, ToolsTmpl, EditorTmpl, TxtTmpl, TxtItemTmpl, FontItemTmpl) {
"use strict";
var View = ToolsBase.extend({
initialize: function() {
var self = this;
if (window.isMobileDevice) {
$(window).bind("resize.app", _.bind(this.resizeTools, this));
}
},
render: function() {
var self = this, tpl_data, tools_tpl_data;
$('.customtool-title .tools-tabs').show();
self.stickerSetup();
//console.log(app.ctors);
tools_tpl_data = {
tips: app.settings.tips,
isCompetition: app.settings.competition !== undefined,
allowCodes: app.ctors["toolsCtor"].getAllowCodes(),
customType: 'stamper'
};
if (app.settings.competition !== undefined) {
tools_tpl_data.competition = app.settings.competition
}
console.log(ToolsTmpl);
self.$el.find(".tools").append(_.template(ToolsTmpl, tools_tpl_data));
tpl_data = {
stickerTxtTop : self.selectedTxt.top,
stickerTxtMiddle : self.selectedTxt.middle,
stickerTxtBottom : self.selectedTxt.bottom,
selectedtitle : self.selectedTitle,
selectedtemplate : self.selectedTemplate,
stickerTemplate : Config.templates + self.selectedTemplate + Config.templateExtension,
isCompetition : app.settings.competition !== undefined,
designType: app.ctors["toolsCtor"].getDesignType(),
tips: app.settings.tips,
selectedCodes : self.selectedCodes,
selectedPoints : self.selectedPoints
};
if (app.settings.competition !== undefined) {
tpl_data.competition = app.settings.competition;
}
if (self.backgroundType === "color") {
tpl_data.stickerBgImage = null;
tpl_data.stickerFgImage = this.getFgPath(self.stickerFgImage);
self.$el.find(".editor").append(_.template(EditorTmpl, tpl_data));
$(".customtool-background").hide();
$('.customtool-fill').css({
background: self.stickerBgColor,
opacity: self.stickerBgOpacity
}).show();
} else {
tpl_data.stickerFgImage = this.getFgPath(self.stickerFgImage);
tpl_data.stickerBgImage = this.getBgPath(self.stickerBgImage);
self.$el.find(".editor").append(_.template(EditorTmpl, tpl_data));
$(".customtool-background").show();
$('.customtool-fill').hide();
}
self.applyTextFormatting();
self.refreshArcs(1,".customtool-toptext", self.selectedTxt.top.arc);
self.refreshArcs(2,".customtool-middletext", self.selectedTxt.middle.arc);
self.refreshArcs(3,".customtool-bottomtext", self.selectedTxt.bottom.arc);
self.toggleCodes();
if (app.settings.competition !== undefined && !window.isMobileDevice) {
$('#dialog-form').dialog({
autoOpen: false,
width: 600,
modal: true,
zIndex: 1001,
dialogClass: 'competition-dialog',
draggable: false,
buttons: [{
'text': "Create Another",
'class': 'pull-right createanother',
'style': 'display:none',
'click': function(e) {
self.restart(e);
return false;
}
}, {
'text': "Enter Competition",
'class': 'pull-right green enter',
'disabled': true,
'click': function(e) {
self.competitionEnter(e);
return false;
}
}, {
'text': "Order",
'class': 'pull-right continue green',
'style': 'display:none',
'click': function(e) {
self.competitionContinue(e);
return false;
}
}, {
'text': "Cancel",
'class': 'pull-left cancelcomp',
'click': function(e) {
self.competitionCancel(e);
return false;
}
}]
});
}
if (app.settings.competition !== undefined) {
_gaq.push(['_trackPageview', '/sticker-competition/editor']);
}
if (!window.isMobileDevice) {
app.trigger("tools:bg");
}
}
}, {
sticker_id: null,
toolsOpen: false
});
return View;
});

how to nest directives created as separate modules

i like to compartmentalize my files and modules. so gist of what's going on with the code below is i'm using an angular directive to create a datatable that will list departments. what i'm trying to get to happen is be able to nest another directive in the datatable for each row that displays some buttons that will get wired up to some events and be fed some parameters. right now doesn't load/respond/do anything. can i accomplish this nesting of directives declared in separate modules? additionally, is the directive going to call forth the template for every row, and is this a bad design?
primary module file. houses the controller
angular.element(document).ready(function () {
"use strict";
var deptApp = angular.module('deptApp', ['possumDatatablesDirective','EditDeleteRowControls']);
function DepartmentCtrl(scope, http) {
scope.depts = [];
scope.columnDefs = [
{ "mData": "Id", "aTargets": [0], "bVisible": false },
{ "mData": "Name", "aTargets": [1] },
{ "mData": "Active", "aTargets": [2] },
{ "mDataProp": "Id", "aTargets": [3], "mRender": function (data, type, full) {
return '<row-controls></row-controls>';
}
}
];
http.get(config.root + 'api/Departments').success(function (result) {
scope.depts = result;
});
};
DepartmentCtrl.$inject = ['$scope', '$http'];
deptApp.controller('DepartmentCtrl', DepartmentCtrl);
angular.bootstrap(document, ['deptApp']);
});
second module
// original code came from here http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs
// just giving credit where it's due.
var possumDTDirective = angular.module('possumDatatablesDirective', []);
possumDTDirective.directive('possumDatatable', ['$compile', function ($compile) {
"use strict";
function Link(scope, element, attrs) {
// apply DataTable options, use defaults if none specified by user
var options = {};
if (attrs.possumDatatable.length > 0) {
options = scope.$eval(attrs.possumDatatable);
} else {
options = {
"bStateSave": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": false,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bDestroy": true,
"bProcessing": true,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$compile(nRow)(scope);
}
};
}
// Tell the dataTables plugin what columns to use
// We can either derive them from the dom, or use setup from the controller
var explicitColumns = [];
element.find('th').each(function (index, elem) {
explicitColumns.push($(elem).text());
});
if (explicitColumns.length > 0) {
options["aoColumns"] = explicitColumns;
} else if (attrs.aoColumns) {
options["aoColumns"] = scope.$eval(attrs.aoColumns);
}
// aoColumnDefs is dataTables way of providing fine control over column config
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}
// apply the plugin
scope.dataTable = element.dataTable(options);
// if there is a custom toolbar, render it. will need to use toolbar in sdom for this to work
if (options["sDom"]) {
if (attrs.toolbar) {
try {
var toolbar = scope.$eval(attrs.toolbar);
var toolbarDiv = angular.element('div.toolbar').html(toolbar);
$compile(toolbarDiv)(scope);
} catch (e) {
console.log(e);
}
}
if (attrs.extraFilters) {
try {
var filterBar = scope.$eval(attrs.extraFilters);
var filterDiv = angular.element('div.extraFilters').html(filterBar);
$compile(filterDiv)(scope);
} catch (e) {
console.log(e);
}
}
}
// this is to fix problem with hiding columns and auto column sizing not working
scope.dataTable.width('100%');
// watch for any changes to our data, rebuild the DataTable
scope.$watch(attrs.aaData, function (value) {
var val = value || null;
if (val) {
scope.dataTable.fnClearTable();
scope.dataTable.fnAddData(scope.$eval(attrs.aaData));
}
}, true);
if (attrs.selectable) {
// respond to click for selecting a row
scope.dataTable.on('click', 'tbody tr', function (e) {
var elem = e.currentTarget;
var classes = foo.className.split(' ');
var isSelected = false;
for (i = 0; i < classes.length; i++) {
if (classes[i] === 'row_selected') {
isSelected = true;
}
};
if (isSelected) {
scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
scope.rowSelected = false;
}
else {
scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
elem.className = foo.className + ' row_selected';
scope.selectedRow = scope.dataTable.fnGetData(foo);
scope.rowSelected = false;
}
});
}
};
var directiveDefinitionObject = {
link: Link,
scope: true, // isoalte the scope of each instance of the directive.
restrict: 'A'
};
return directiveDefinitionObject;
} ]);
third module
var EditDeleteRowControls = angular.module('EditDeleteRowControls', []);
function EditDeleteRowControlsDirective() {
"use strict";
var ddo = {
templateUrl: config.root + 'AngularTemplate/RowEditDeleteControl',
restrict: 'E'
};
return ddo;
};
EditDeleteRowControls.directive('rowControls', EditDeleteRowControlsDirective);

first time implementing module pattern variable is undefined

here is my code
var s;
var AddEvent = {
settings : {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
},
init:function(s){
s = this.settings;
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
s.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
s.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(s.eventName.attr('name'));
if(s.eventName.val()!='' && s.eventDate.val() !='' && $('textarea').val()!='')
{
s.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
s.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
};
$(function(){
AddEvent.init(s);
});
i am impletenting this example http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/
but each time when i type in my input field at this line i get undefined in alert
alert(s.eventName.attr('name'));
please tell me what am i doing wrong i tried to search but couldnt find anything usefull.
edit: here i created a little jsfiddle i am getting
TypeError: this.settings is undefined
[Break On This Error]
console.log(this.settings.eventName.attr('id'));
thanks
Your problem is here :
var s;
AddEvent.init(s);
There is no way after this to have s defined.
A solution would be to simply not pass s (and no declare it in the arguments of the function) :
init:function(s){
s = this.settings;
...
AddEvent.init();
But that lets a variable polluting the global namespace.
If you want your settings to be accessed from all your functions, you could embed in in a closure :
var AddEvent = (function(){
var settings;
return {
init:function(){
settings = {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
};
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
settings.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
settings.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(settings.eventName.attr('name'));
if(settings.eventName.val()!='' && settings.eventDate.val() !='' && $('textarea').val()!='')
{
settings.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
settings.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
}
})();
$(function(){
AddEvent.init();
});

Categories

Resources