Hi Im having problems with javascript! i have main.js and Model.js. Model.js is a javascript oop class in need to access its functions in main.js how do i do that? I keep getting an error that Model is not defined. Are there tools needed for this to work or something is wrong in the code?
Model.js
Model = {};
Model.init = function() {
alert("model");
}
Model.getList = function(){
var list;
$.ajax(
{
url:'???',
type: 'GET',
dataType: 'json',
success: function(data)
{
list=data;
}
error: function(data)
{
alert("error");
}
});
return list;
}
main.js
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var testins=new Model();
var list=Model.getList();
alert("result: "+testins);
}
I really could use some help.
so I tried MrCode approach and for experimental reasons put the code in one file because main.js still could not access the Model.js file.
main.js
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("aaa"); //first
var testins=new Model();
var list=testins.getList();
alert("result: "+testins); // third
alert("list"+list); //fourth
}
function Model()
{
this.init = function()
{
alert("Model");
}
this.getList = function()
{
var list;
$.ajax(
{
url:'??',
type: 'GET',
dataType: 'json',
success: function(data)
{
list=data;
alert("success"+list); //fifth
},
error: function(data)
{
alert("error");
}
});
alert("success"+list); //second
return(list);
}
}
but following the alerts i see the that the $.ajax part is done last.
Do
function Model() { // this is the "constructor"
}
And replace
Model.init = function() {
by
Model.prototype.init = function() { // provide the function to all instances
(and the same for getList)
This will enable
you to call new Model()
the init function to be inherited by the objects you create with new Model().
Use it like this :
var testins=new Model(); // create an instance
var list=testins.getList(); // call the instance method
You may be interested by this MDN document about prototype and inheritance.
function Model()
{
// define public methods
this.init = function()
{
alert("Model");
}
this.getList = function()
{
var list;
$.ajax(
{
url:'???',
type: 'GET',
dataType: 'json',
success: function(data)
{
list=data;
}
error: function(data)
{
alert("error");
}
});
return list;
}
}
var testins = new Model(); // create an instance of Model()
var list = testins.getList(); // call its method
Related
How to call pagePresets.setFilter() inside $.ajax(){success} method?
self.setFilter.call('network', data.networks); returns
Uncaught TypeError: Cannot read property 'call' of undefined(…)
when self.setFilter('network', data.networks);
Uncaught TypeError: self.setFilter is not a function(…)
Code:
function pagePresets() {
this.loading = true;
this.isLoading = function () {
return this.loading;
};
this.setLoading = function (state) {
this.loading = state;
return;
};
/** this function loads saved filters */
this._loadFilters = function() {
jQuery.ajax({
type: 'post',
dataType: "json",
url: 'data.json',
success: function (data) {
//HOW TO CALL setFilter? this solution is not working
pagePresets.prototype.setFilter.call('network', data.networks);
}
});
};
}
pagePresets.prototype.setFilter = function (target, value) {
console.info(target + ' ' + value );
}
The call function takes as first argument a "context object". Take a deeper look at the call function here.
In the ajax callback function this or self doesn't refere to your class object anymore. And pagePresets is a function class with no static properties. So you need to get the object instance.
You need to specify which instance you want to call your prototype function with. I usualy declare a private property in my "class" wich holds a reference to the object for such scenarios where the context changes.
function pagePresets() {
//create a local variable here
var localInstance = this;
this.loading = true;
this.isLoading = function () {
return this.loading;
};
this.setLoading = function (state) {
this.loading = state;
return;
};
/** this function loads saved filters */
this._loadFilters = function() {
jQuery.ajax({
type: 'post',
dataType: "json",
url: 'data.json',
success: function (data) {
//Use the variable here to specify the correct context.
//the functions arguments need to be an array for the call function
pagePresets.setFilter.call(localInstance, [ 'network', data.networks ]);
}
});
};
}
pagePresets.prototype.setFilter = function (target, value) {
console.info(target + ' ' + value );
}
you can try to invoke that in the another function like this
function success() {
pagePresets.prototype.setFilter.call('network', data.networks);
}
function error() {
alert("error");
}
function searchEntity(id,userName, family) {
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:8080/mvc-test/rest/user/searchAll?pageNumber=1&pageSize=2&&orderBy=userName asc",
headers: {'X-CSRF-TOKEN': getMetaContentByName('_csrf')},
data : JSON.stringify({
"id":id,
"userName" : userName,
"familyName" : family
}),
dataType : 'json',
success : success,
error : error
});
}
Another way is to pass the parent context into the success method or delegate.
In the code below, onAjaxResponseReceived function is called with with the reference to the parent (class) context self from which other methods func1 and func2 can be accessed.
class TestClass{
constructor(searchUrl) {
this.searchUrl = searchUrl;
}
bind() {
self = this;
$.ajax({
url: self.searchUrl,
type:"POST",
data: data,
success: function (responseData) {
self.onAjaxResponseReceived(self, responseData);
}
});
}
onAjaxResponseReceived(self, data) {
self.func1(data);
self.func2(data);
}
func1(data) {
console.log('func 1');
}
func2(data) {
console.log('func 2');
}
}
I have a view model in knockout as follow. What i intend to achieve here is to make the ajax call into a reusable function as follow (and include it into separate js file).
However, I got the error message showing self.CountryList is not defined. How could this be resolved?
// Working
var ViewModel = function() {
var self = this;
self.CountryList = ko.observableArray([]);
self.LoadCountry = function() {
$.ajax({
url: '/api/MyApi',
type: 'GET',
dataType: 'json',
success(data): {
$.each(data, function (index, value) {
self.CountryList.push(value);
});
}
});
}
}
ko.applyBindings(new LoadCountry());
// Not working
function LoadCountryList() {
$.ajax({
url: '/api/MyApi',
type: 'GET',
dataType: 'json',
success(data): {
$.each(data, function (index, value) {
self.CountryList.push(value);
});
}
});
}
var ViewModel = function() {
var self = this;
self.CountryList = ko.observableArray([]);
self.LoadCountry = function() {
LoadCountryList();
}
}
ko.applyBindings(new LoadCountry());
Your LoadCountryList function in the second version has no concept of the object it should be operating on - ie it has no idea what self is, hence the error. The simple solution is for you to pass the object in when calling the function:
function LoadCountryList(vm) {
$.ajax({
url: '/api/MyApi',
type: 'GET',
dataType: 'json',
success(data): {
$.each(data, function (index, value) {
//reference the parameter passed to the function
vm.CountryList.push(value);
});
}
});
}
var ViewModel = function() {
var self = this;
self.CountryList = ko.observableArray([]);
self.LoadCountry = function() {
//pass ourselves to the function
LoadCountryList(self);
}
}
well clearly self.ContryList does not exist in your external file. One easy way to solve this is to pass in a reference to the appropriate "list" to push values to:
function LoadCountryList(countryList) {
$.ajax({
url: '/api/MyApi',
type: 'GET',
dataType: 'json',
success(data): {
$.each(data, function (index, value) {
countryList.push(value);
});
}
});
}
and in your view model:
var ViewModel = function() {
var self = this;
self.CountryList = ko.observableArray([]);
self.LoadCountry = function() {
LoadCountryList(self.CountryList);
}
}
This is the code:
Controller:
public function isreadAction(Request $request) {
var_dump($request->get('sentValue'));
$em = $this->getDoctrine()->getEntityManager();
$pm = $this->getDoctrine()
->getRepository('LoginLoginBundle:Privatemessage')
->findBypmid($request->get('sentValue'));
$pm->setIsRead(true);
$em->flush();
return new Response();
}
js:
$(document).ready(function () {
$(".pmcontents").hide();
$(".pmbox").click(function () {
$(this).css("font-weight", "normal");
$(this).next().toggle();
var myValue = $('this').attr('id');
var DATA = 'sentValue=' + myValue;
$.ajax({
type: "POST",
url: Routing.generate('isread'),
data: DATA,
cache: false,
success: function (data) {
alert("database has been updated");
}
});
});
});
Routing:
isread:
path: /game/isread
defaults: { _controller: LoginLoginBundle:Default:isread }
requirements:
options:
expose: true
If i click on the error it says that the variable is undefined:
Parametersapplication/x-www-form-urlencodedNiet sorteren
sentValue undefined
Bron
sentValue=undefined
What is the problem? I have tried some things and it seems that the problem lies within the ajax part of the javascript, but i'm not sure.
Replace
var myValue = $('this').attr('id'); //<- notice quote around this
with
var myValue = $(this).attr('id');
By using ajax I can access the XHR Object simply making:
$.ajax().fail(function (XHR) {
// some code
});
When saving a backbone model:
var MyView = Backbone.View.extend({
saveModel: function () {
this.myModel.save({
error: this.onError
});
}
onError: function (xhr) {
// how to access xhr?
}
});
How should I get XHR when I save a backbone.model onError server event?.
When you call any of the functions that go through Backbone.Sync, Backbone returns a reference to the XHR:
var MyModel = Backbone.Model.extend({
url: "/some/path/that/is/an/error/"
});
var myModel = new MyModel();
xhr = myModel.save( {} , {
error: function(model, response) {
console.log(xhr);
}
});
Also, note that Model.save() takes 2 arguments - properties to change before saving, and the options hash as a second argument.
Here's a jsFiddle example: http://jsfiddle.net/edwardmsmith/8AVjy/7/
Post Comment:
I've never really needed to do it, but this is what I'd probably do:
var MyModel = Backbone.Model.extend({
url: "/some/path/that/is/an/error/"
});
var MyView = Backbone.View.extend({
saveModel: function () {
that = this;
xhr = this.model.save({}, {
error: function (model, resp) {
that.onError(xhr);
}
});
},
onError: function (xhr) {
// how to access xhr?
console.log(xhr);
}
});
var myModel = new MyModel();
var myView = new MyView({model: myModel});
myView.saveModel();
An updated jsFiddle for this: http://jsfiddle.net/edwardmsmith/8AVjy/14/
The following code works great with a hardcoded array (initialData1), however I need to use jquery .ajax (initialData) to initialize the model and when I do the model shows empty:
$(function () {
function wiTemplateInit(winame, description) {
this.WIName = winame
this.WIDescription = description
}
var initialData = new Array;
var initialData1 = [
{ WIName: "WI1", WIDescription: "WIDescription1" },
{ WIName: "WI1", WIDescription: "WIDescription1" },
{ WIName: "WI1", WIDescription: "WIDescription1" },
];
console.log('gridrows:', initialData1);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{UserKey: '10'}",
url: "WIWeb.asmx/GetTemplates",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
initialData.push(new wiTemplateInit(data.d[i].WiName,data.d[i].Description));
}
//console.log('gridrows:', initialData);
console.log('gridrows:', initialData);
}
});
var viewModel = function (iData) {
this.wiTemplates = ko.observableArray(iData);
};
ko.applyBindings(new viewModel(initialData));
});
I have been trying to work from the examples on the knockoutjs website, however most all the examples show hardcoded data being passed to the view model.
make sure your "WIWeb.asmx/GetTemplates" returns json array of objects with exact structure {WIName : '',WIDescription :''}
and try using something like this
function wiTemplateInit(winame, description)
{
var self = this;
self.WIName = winame;
self.WIDescription = description;
}
function ViewModel()
{
var self = this;
self.wiTemplates = ko.observableArray();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{UserKey: '10'}",
url: "WIWeb.asmx/GetTemplates",
success: function (data)
{
var mappedTemplates = $.map(allData, function (item) { return new wiTemplateInit(item.WiName, item.Description) });
self.wiTemplates(mappedTemplates);
}
});
}
var vm = new ViewModel();
ko.applyBindings(vm);
If you show us your browser log we can say more about your problem ( Especially post and response ). I prepared you a simple example to show how you can load data with ajax , bind template , manipulate them with actions and save it.
Hope this'll help to fix your issue : http://jsfiddle.net/gurkavcu/KbrHX/
Summary :
// This is our item model
function Item(id, name) {
this.id = ko.observable(id);
this.name = ko.observable(name);
}
// Initial Data . This will send to server and echo back us again
var data = [new Item(1, 'One'),
new Item(2, 'Two'),
new Item(3, 'Three'),
new Item(4, 'Four'),
new Item(5, 'Five')]
// This is a sub model. You can encapsulate your items in this and write actions in it
var ListModel = function() {
var self = this;
this.items = ko.observableArray();
this.remove = function(data, parent) {
self.items.remove(data);
};
this.add = function() {
self.items.push(new Item(6, "Six"));
};
this.test = function(data, e) {
console.log(data);
console.log(data.name());
};
this.save = function() {
console.log(ko.mapping.toJSON(self.items));
};
}
// Here our viewModel only contains an empty listModel
function ViewModel() {
this.listModel = new ListModel();
};
var viewModel = new ViewModel();
$(function() {
$.post("/echo/json/", {
// Data send to server and echo back
json: $.toJSON(ko.mapping.toJS(data))
}, function(data) {
// Used mapping plugin to bind server result into listModel
// I suspect that your server result may contain JSON string then
// just change your code into this
// viewModel.listModel.items = ko.mapping.fromJSON(data);
viewModel.listModel.items = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
});
})