We Keep Coding

RequireJS modules are undefined in Backbone view

I have been pretty much beginner at this part of javascript and I would appreciate any ideas how could be solved this problem.
I use requirejs to define my own modules where I also use backbone.js.
Let say I have the main module where I initialize my Backbone view which is rendered without any problem. Also, the click event where is calling method createSchemeForm creates the form correctly. The problem raises up in a situation when I call cancel method by click and the modules which are defined for Backbone view (e.g. "unicorn/sla/dom/helper"...) are undefined but when I called method createSchemeForm at the beginning the modules were executed without any problem.
Thank you in advance for any suggestions.
Backbone view
define("unicorn/sla/view/scheme", [
"unicorn/sla/dom/helper",
"unicorn/soy/utils",
"unicorn/sla/utils"
], function (DOMHelper, soyUtils, jsUtils) {
return Backbone.View.extend({
el: 'body',
inputData: {},
btnSaveScheme: 'btn-save-sla-scheme',
btnCancel: 'btn-cancel-sla-scheme',
btnCreate: 'btn-create-sla-scheme',
btnContainer: '#sla-scheme-buttons-container',
schemeContent: '#sla-scheme-content-section',
btnSpinner: '.button-spinner',
events: {
'click #btn-create-sla-scheme' : "createSchemeForm",
'click #btn-cancel-sla-scheme' : "cancel"
},
initialize: function(){
console.log("The scheme view is initialized...");
this.render();
},
createSchemeForm: function () {
this.spin();
DOMHelper.clearSchemeContent();
DOMHelper.clearButtonsContainer();
//Get button
$btnSave = soyUtils.getButton({isPrimary: 'true', id: this.btnSaveScheme, label: 'Save'});
$btnCancel = soyUtils.getButton({isPrimary: 'false', id: this.btnCancel, label: 'Cancel'});
//Append new created buttons
DOMHelper.addContent(this.btnContainer, AJS.format("{0}{1}", $btnSave, $btnCancel));
//Call service to get entry data for scheme creation form
AJS.$.ajax({
url: AJS.format('{0}={1}',AJS.I18n.getText('rest-url-project-scheme-input-data'), jsUtils.getProjectKey()) ,
type: "post",
async: false,
context: this,
global: false,
}).done(function (data) {
this.inputData = data;
$slaSchemeForm = soyUtils.getSchemeCreateForm({slaScheme : data, helpText: AJS.I18n.getText("sla-time-target-tooltip-text")});
DOMHelper.addContent(this.schemeContent, $slaSchemeForm);
jsUtils.scroll(this.schemeContent, 'slow');
}).fail(function () {
jsUtils.callFlag('error', AJS.I18n.getText("message-title-error"), AJS.I18n.getText("sla-error-load-scheme-input-data"));
}).always(function () {
this.stopSpin();
});
},
spin: function () {
AJS.$('.button-spinner').spin();
},
stopSpin: function () {
AJS.$('.button-spinner').spinStop();
},
cancel: function () {
jsUtils.clearButtonsContainer();
jsUtils.clearSchemeContent();
$btnCreateScheme = soyUtils.getButton({isPrimary: 'false', id: this.btnCreate, label: 'Create SLA Scheme'});
DOMHelper.addContent(this.btnContainer, $btnCreateScheme);
DOMHelper.addContent(this.schemeContent, soyUtils.getSchemesTable(new Array())); // TODO - get current data from server instead of empty array
}
});
});
Main module where is Backbone view initialize
define("unicorn/sla/project/batch", [
"unicorn/sla/utils",
"unicorn/sla/data/operations",
"unicorn/sla/data/validator",
"unicorn/sla/dom/helper",
"unicorn/sla/model/confirm/message",
"unicorn/sla/view/scheme",
"exports"
], function (jsUtils, operations, validator, DOMHelper, ConfirmMessage, SchemeView, exports) {
//Load project batch
exports.onReady = function () {
$schemeView = new SchemeView();
$schemeView.render();
}
});
AJS.$(function () {
AJS.$(document).ready(function () {
require("unicorn/sla/project/batch").onReady();
});
});

Pass data to another scope

This is what I have:
$http.get("http://localhost/app/api/Suppliers").success(function(response) {
$scope.dataSource = response;
console.log($scope.dataSource);
$scope.safeApply(function() {
$scope.settings.columns[3] = $scope.dataSource;
});
});
$scope.settings = {
colHeaders: ["Code", "Comments"],
contextMenu : ["row_above","row_below","remove_row"],
colWidths: [100, 100],
columns : [
{ type: 'dropdown',
source: ['Not Started', 'In Progress', 'Completed']
},
{},
{},
{ type: 'dropdown',
source: $scope.dataSource,
}
]
};
Problem is $scope.dataSource is undefined, it's not displaying the data. What should be the solution to this?
UPDATE:
This displays the data in my $http call. But in the settings source when I call source: $scope.dataSource is undefined

When you are making a request to the server, the rest of the controller will be compiled then you will enter the success function
you are declaring your array inside the success of your request, it's better be declared outside like this
$scope.dataSource = []
$http.get("http://localhost/app/api/Suppliers").success(function(response) {
$scope.dataSource = response;
console.log($scope.dataSource);
$scope.safeApply(function() {
$scope.settings.columns[3] = $scope.dataSource;
});
});
UPDATE
try this
$http.get("http://localhost/app/api/Suppliers").success(function(response) {
$scope.dataSource = response;
console.log($scope.dataSource);
getSetting();
$scope.safeApply(function() {
$scope.settings.columns[3] = $scope.dataSource;
});
});
var getSetting = function() {
$scope.settings = {
colHeaders: ["Code", "Comments"],
contextMenu: ["row_above", "row_below", "remove_row"],
colWidths: [100, 100],
columns: [{
type: 'dropdown',
source: ['Not Started', 'In Progress', 'Completed']
}, {}, {}, {
type: 'dropdown',
source: $scope.dataSource,
}]
};
}

So first you need to be aware that when you declare $scope.settings = {...} the $http call will not be over yet, so instead of writting
{
type: 'dropdown',
source: $scope.dataSource,
}
You may as well simply write
{
type: 'dropdown',
source: null,
}
Then when the $http call finishes, I assume you want to set this source property. However in your code you are overriding the whole $scope.settings.columns[3] instead of just its source property.
Try this instead:
$http.get("http://localhost/app/api/Suppliers").success(function(response) {
$scope.dataSource = response;
console.log($scope.dataSource);
$scope.settings.columns[3].source = $scope.dataSource;
});
Note that I have removed the safeApply which is an anti-pattern. Here the $http call will take care of the digest cycle.

Found the answer!
$scope.suppliers = [];
$http.get("http://localhost/i95/api/Suppliers").success(function(data, status, headers, config) {
for(var i = 0; i < data.length; i++) {
$scope.suppliers.push(data[i].company);
}
console.log($scope.suppliers);
});
So creating a global variable and adding push method fixed the issue.

Call function attribute from outside function in jQuery

I am trying to call input attribute value from child function.
Code is Here:
$("input.ups").fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
I want to get $("input.ups") product_id attribute in this function:
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
But it is getting undefined error?
How can we fix this ?

The scope of this within the uploadExtraData function is not the input.ups element which the plugin is being instantiated on. To achieve what you require you would need to loop over them individually so you can get a reference to the element. Try this:
$("input.ups").each(function() {
var $input = $(this);
$input.fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return { product_id: $input.attr('product_id') };
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
});
I would also suggest using a data-* attribute instead of a non-standard attribute like product_id.

"Multi dimensional" JSON in javascript

I can create a jquery object inline like this (this code is working)
$('#tip').qtip({
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
})
now I want to move this JSON to a function, because I have multiple constructors in my code (this code is not working)
function qtipJSON(el, jq) {
return
{
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
}
};
$('#tip')(qtipJSON(el, qj))
My error is
Uncaught SyntaxError: Unexpected token {
I've noticed that it's because of nested jsons.
WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas'}
}
for(i in a()){
document.write(i)
}
ALSO WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas', aa:{sds:'1212', sddss:'2222'}}
}
for(i in a()){
document.write(i)
}

Replace this
return
{
content: el.REASON,
...
by this:
return {
content: el.REASON,
...
and welcome to the club of people injured by JS semicolon injection.

You cannot end a line with return if you want to return an object literal because of implicit semicolon injection.
By moving the opening left brace to the same line as the return it will work.
Here is a slight tweak of what you have: http://jsfiddle.net/FqCVD/ (I made some string literals to compensate for undefined variables).

The problem with your final example is a missing : after aa. It should be
return {sdasda:'asda',sdasd:'asdas', aa: {sds:'1212', sddss:'2222'}}
Your function function qtipJSON(el, jq) is missing a semicolon at the end of the return.
As others have mentioned, the problem is the 'return' keyword on a line by itself. When you have a problem like this one try JSLint. It would have reported this error.

javascript will assume you forgot a semi-column and give you this:
return {;
par: 'val'
});
Which won't work. What you should do is wrap your return value/object in parenthesis, like this:
return ({
par: 'val'
});

problem with callback function in javascript using extjs

My callback code (js file) is something like
function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: function(el){
addwindow(el, Id, bURL,purl);
},
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(el, Id, bURL,purl) {
//alert(el);
alert("add buttons " +{Id);
}
My problem is the call function is not going to addwindow. When I alert “Id” in addcontent it is displaying but not addwindow as the control is not moving to addwindow.
How can I trace/track what is the exception which is preventing the control to move onto addwindow.?

The proper approach to creating the callback with params is to use createCallback or createDelegate. Your functions are (apparently) executing in global scope so it wouldn't make much practical difference, but createDelegate allows your callback to execute within the same scope as the original function, which makes it the best default choice usually. So it would be something like:
autoLoad: {
url: tUrl,
callback: addwindow.createDelegate(this, [Id, bURL,purl]),
scripts: true,
nocache: true
},
Again, note that the this in your case will be the global Window object, but this is still a good practice to get into so that doing the same thing in the future within a class method will work as expected.

function addcontent(Title, tUrl, bURL, Id,purl){
alert(Id)
var runcontent = new Ext.Panel({
id: 'tt' + Id,
region: 'center',
autoLoad: {
url: tUrl,
callback: addwindow(Id, bURL,purl),
scripts: true,
nocache: true
},
width: 600,
collapsible: false
});
}
function addwindow(Id, bURL,purl) {
//alert(el);
alert("add buttons " +Id);
}