I been trying to clear display of all errors onload but those errors should display on further action after load .
I got solution for this but i felt it can been done in a better way
Working solution: This will clear onload messages
ko.utils.arrayForEach(self.MAIN(), function (s) {
ko.utils.arrayForEach(s.STData(), function (s1) {
ko.utils.arrayForEach(s1.SData(), function (s2) {
if (s2.Validation.errors().length > 0) {
s2.Validation.errors.showAllMessages(false);
}
});
});
});
Tried usign group but stuck with error i.e
object doesn't support property or method 'ismodified' in knokcout validation .
Not working :
var result= ko.validation.group(self.MAIN(), { deep: true });
if (!self.MAIN().isValid()) { // rightly i am getting isvalid false and also showing my error text under it .
result.showAllMessages(false); // error at this line as metioned above.
return true;
}
Additional code :
function data(){
var inner = this;
self.name=ko.observable(""); // i have many observables
self.validation = ko.validatedObservable([
self.name.extend({required true, //custom validations also written})
]);
}
But i have this function in observable array which is deeper in self.MAIN
My levels : function data object is pushed into self.SData observable array later this one is pushed into self.STData and finally i pushed this one into 'self.MAIN' .
So you can clearly see i am trying to clear messages onLoad but i get that error . Actually in the mean time i went into validation script file i found i am getting error at this line
ko.utils.arrayForEach(validatables(), function (observable) {
observable.isModified(show); // here isModified is undefined
});
Any suggestions are appreciated .
Related
trying to implement options page for a firefox addon/extension version 64.0. I am using browser.storage.local.set to store data. but when I use browser.storage.local.get to pull the data, the result is <unavailable> on the console log.
the following is the function i run in my options.js file (i entered njnj on the form field gateway and hit the submit button)
function saveOptions(e) {
e.preventDefault();
console.log("you are here")
console.log(document.querySelector("#gateway").value)
browser.storage.local.set({
"gateway": document.querySelector("#gateway").value });
console.log(browser.storage.local.get("gateway"))
}
document.querySelector("form").addEventListener("submit", saveOptions);
my actual output in the console log is as follows :
you are here options.js:4:3
njnj options.js:5:3
<unavailable> options.js:8:3
ok so I did figure out partly why the above code is not working. the problem is that browser.storage.local.get() returns a 'promise' in javascript (I dont actually know what it means yet). So you have to have a code that will actually retrieve the answer/saved value from this 'promise'. I will give you an example on how to retrieve the value:
// first save a key value pair into storage
browser.storage.local.set({"key": 'value'})
// to retrieve this value, first declare a new variable
var savedvalue = "zero"
// retrieve the 'promise' of key value pair, then run the associated function to get
//the savedvalue and set it equal to previously declared variable.
browser.storage.local.get(['key'], function(result) {savedvalue = result.key});
// now, when you call savedvalue (even outside the function above), it will return 'value'
console.log(savedvalue)
output>> value
You could use async function and await, like this
async function saveOptions(e) {
e.preventDefault();
await browser.storage.local.set(
{ "gateway": document.querySelector("#gateway").value }
);
}
document.querySelector("form").addEventListener("submit", async saveOptions);
You don't need to pass the 'e' to the function, you're not doing anything with it.
You could also refactor it this way, if the mood took you
document.querySelector("form").addEventListener( "submit", async ()=> {
e.preventDefault();
await browser.storage.local.set(
{ "gateway": document.querySelector("#gateway").value }
);
});
The question is really about how to get/handle the value of a Promise in async Javascript (which the browser.storage.local.get() method is).
browser.storage.local.get('gateway').then(
function (result) {
// code goes here
console.log(result.gateway);
}).catch(function (error) {
// error code
});
see How can I access the value of a promise?
I have function getData() which make an ajax call and retrive JSON data. On success i call another function which is marquee() . inside marquee on finish event i call getData() again, But each time getData() when get called, it increases it's request to mentioned file data.php, For example on first call it call once, Second call it request twice, and then twice become 4times,8times and more and more, how to avoid this?!
function getData()
{
$.get('data.php).done(function(response)
{
var data = JSON.parse(response);
if(data.Direction == "left")
{
$(".marquee").html("<span data-direction='"+data.Direction+"'>"+data.Message+"</span>");
}else if(data.Direction == "right"){
$(".marquee").html("<span data- direction='"+data.Direction+"'>"+data.Message+"</span>");
}
});
}
function marquee()
{
$(".marquee").marquee({duration : 10000}).bind("finished",function()
{
getData();
});
}
I hope i was clear... Appreciate each answer.
Every time you are calling marquee function, you are basically binding an event finished on to it. On multiple such function calls, you will have duplicate events. In your code setup, you need to unbind the function before binding it. Something like
$(".marquee").marquee({duration : 10000}).unbind("finished",getData).bind("finished",getData)
Ideally, you should bind only once so you do not have to unbind it again and again.
I'm facing a "change event not firing" issue on Backbone.js =/
Here my view of User model :
window.UserView = Backbone.View.extend({
...
initialize: function()
{
this.model.on('destroy', this.remove, this);
this.model.on('change', function()
{
console.log('foo');
});
},
render: function(selected)
{
var view = this.template(this.model.toJSON());
$(this.el).html(view);
return this;
},
transfer: function(e)
{
var cas = listofcas;
var transferTo = Users.getByCid('c1');
var transferToCas = transferTo.get('cas');
this.model.set('cas', cas);
console.log('current model');
console.log(this.model);
//this.model.change();
this.model.trigger("change:cas");
console.log('trigger change');
transferTo.set('cas', transferToCas);
console.log('transferto model');
console.log(transferTo);
//transferTo.change();
transferTo.trigger("change:cas");
console.log('trigger change');
}
});
Here, the User model :
window.User = Backbone.Model.extend({
urlRoot: $('#pilote-manager-app').attr('data-src'),
initialize: function()
{
this.set('rand', 1);
this.set('specialite', this.get('sfGuardUser').specialite);
this.set('name', this.get('sfGuardUser').first_name + ' ' + this.get('sfGuardUser').last_name);
this.set('userid', this.get('sfGuardUser').id);
this.set('avatarsrc', this.get('sfGuardUser').avatarsrc);
this.set('cas', new Array());
if (undefined != this.get('sfGuardUser').SignalisationBouclePorteur) {
var cas = new Array();
_.each(this.get('sfGuardUser').SignalisationBouclePorteur, function(value)
{
cas.push(value.Signalisation);
});
this.set('cas', cas);
}
}
});
In User model, there is "cas" attribute, which is an array of objects.
I read in others topics that change events are not fire on model.set if attributes are not a value.
So, I try to trigger directly the change event with model.change() method.
But, I have no "foo" log in my console ...
I'm pretty new to backbone and I was having this same problem.
After doing some research, I found a few posts that shed a little bit more light on why this was happening, and eventually things started to make sense:
Question 1
Question 2
The core reason has to do with the notion of reference equality versus set/member equality. It appears that to a large extent, reference equality is one of the primary techniques backbone uses to figure out when an attribute has changed.
I find that if I use techniques that generate a new reference like Array.slice() or _.clone(), the change event is recognized.
So for example, the following code does not trigger the event because I'm altering the same array reference:
this.collection.each(function (caseFileModel) {
var labelArray = caseFileModel.get("labels");
labelArray.push({ Key: 1, DisplayValue: messageData });
caseFileModel.set({ "labels": labelArray });
});
While this code does trigger the event:
this.collection.each(function (caseFileModel) {
var labelArray = _.clone(caseFileModel.get("labels")); // The clone() call ensures we get a new array reference - a requirement for the change event
labelArray.push({ Key: 1, DisplayValue: messageData });
caseFileModel.set({ "labels": labelArray });
});
NOTE: According to the Underscore API, _.clone() copies certain nested items by reference. The root/parent object is cloned though, so it will work fine for backbone. That is, if your array is very simple and does not have nested structures e.g. [1, 2, 3].
While my improved code above triggered the change event, the following did not because my array contained nested objects:
var labelArray = _.clone(this.model.get("labels"));
_.each(labelArray, function (label) {
label.isSelected = (_.isEqual(label, selectedLabel));
});
this.model.set({ "labels": labelArray });
Now why does this matter? After debugging very carefully, I noticed that in my iterator I was referencing the same object reference backbone was storing. In other words, I had inadvertently reached into the innards of my model and flipped a bit. When I called setLabels(), backbone correctly recognized that nothing changed because it already knew I flipped that bit.
After looking around some more, people seem to generally say that deep copy operations in javascript are a real pain - nothing built-in to do it. So I did this, which worked fine for me - general applicability may vary:
var labelArray = JSON.parse(JSON.stringify(this.model.get("labels")));
_.each(labelArray, function (label) {
label.isSelected = (_.isEqual(label, selectedLabel));
});
this.model.set({ "labels": labelArray });
Interesting. I would have thought that .set({cas:someArray}) would have fired off a change event. Like you said, it doesn't seem to, and I can't get it to fire with .change() BUT, I can get the events to work if I just do model.trigger('change') or model.trigger('change:attribute')
This would allow you to trigger the change event without that random attribute hack.
If someone could explain what is going on with events, Backbone, and this code, that would help me learn something too... Here is some code.
Ship = Backbone.Model.extend({
defaults: {
name:'titanic',
cas: new Array()
},
initialize: function() {
this.on('change:cas', this.notify, this);
this.on('change', this.notifyGeneral, this);
},
notify: function() {
console.log('cas changed');
},
notifyGeneral: function() {
console.log('general change');
}
});
myShip = new Ship();
myShip.set('cas',new Array());
// No event fired off
myShip.set({cas: [1,2,3]}); // <- Why? Compared to next "Why?", why does this work?
// cas changed
// general change
myArray = new Array();
myArray.push(4,5,6);
myShip.set({cas:myArray}); // <- Why?
// No event fired off
myShip.toJSON();
// Array[3] is definitely there
myShip.change();
// No event fired off
The interesting part that might help you:
myShip.trigger('change');
// general change
myShip.trigger('change:cas');
// cas changed
I find this interesting and I hope this answer will also spawn some insightful explanation in comments which I don't have.
So, I took some code from this Microsoft provided Example which allows me to use the jquery validate unobtrusive library to parse validation error message returned from my server and display them in the UI. They have a video demonstrating this. So, here is the piece of Javascript code I'm using:
$.validator.addMethod("failure", function () { return false; });
$.validator.unobtrusive.adapters.addBool("failure");
$.validator.unobtrusive.revalidate = function (form, validationResult) {
$.removeData(form[0], 'validator');
var serverValidationErrors = [];
for (var property in validationResult) {
//var elementId = property.toLowerCase();
var item = form.find('#' + property);
if (item.length < 1) { item = form.find('#' + property.replace('.', '_')); }
serverValidationErrors.push(item);
item.attr('data-val-failure', validationResult[property].join(', '));
jQuery.validator.unobtrusive.parseElement(item[0]);
}
form.valid();
$.removeData(form[0], 'validator');
$.each(serverValidationErrors, function () {
this.removeAttr('data-val-failure');
jQuery.validator.unobtrusive.parseElement(this[0]);
});
};
So then after a AJAX form post in the handle error function I would do something like this:
$.validator.unobtrusive.revalidate(form, { 'PhysicalAddress.CityName': ['You must select a valid city'] });
Where PhysicalAddress.CityName is the name of my viewmodel property and html input field. So, it knows to put the validation message next to the correct html element.
This works 1 time. Then when they hit submit again and my code calls the unobtrusive.revalidate method again.. it doesnt work. It only shows the validation message one time then after that the validation message disappears for good.
Does anyone have any idea as to why this might be happening?.. I stepped through the revalidate method and no errors were thrown and everything seems like it should work.. but the unobtrusive library for some reason is not re-binding the validation error message.
Thanks
Probably this behavior depends on a known problem of the jQuery validation plugin: dynamically adding new validation rules for elements works just once! Further attempts are rejected because the plugin think they are a duplicated attempt to define the already defined rules.
This is the reason why the $.validator.unobtrusive.parse doesn't work when you add newly created content (when for instance you add a new row to a collection of items). There is a patch for the $.validator.unobtrusive.parse that you might try to apply also to the revalidate function....but it is better to rewrite it from scratch in a different way. The revalidate function usse the validation plugin just to place at the right place all validation errors, then it tries to reset the state of the validation plugin. However, deleting the validator object from the form is not enough to cancel all job done since there is another object contained in the form.data('unobtrusiveValidation'), where form is a variable containing the form being validated...This data are not reset by the revalidate function...and CANNOT be reset since resetting them would cause the cancellation of ALL client side validation rules.
Maybe this problem has been solved in the last version of the validation plugin, so try to update to the last version with nuget.
If this doesn't solve your issue I can pass you an analogous function implemented in a completely different way(it mimics what the server does on the server side to show server side errors). It will be contained in the upcoming version of the Mvc Controls toolkit. However, if you give me a couple of days (I will be very busy for 2 days) I can extract it from there with its dependencies so you can use it. Let me know if you are interested.
Below the code I promised. It expects an array whose elements are:
{
id:id of the element in error
errors:array of strings errors associated to the element
}
It accepts several errors for each element but just display di first one for each element
id is different from the name because . [ ] an other special char are replaced by _
You can transform name into id on the sever with
htmlName.Replace('$', '_').Replace('.', '_').Replace('[', '_').Replace(']', '_');
or on the client in javascript with:
name.replace(/[\$\[\]\.]/g, '_');
function remoteErrors(jForm, errors) {
//////////
function inner_ServerErrors(elements) {
var ToApply = function () {
for (var i = 0; i < elements.length; i++) {
var currElement = elements[i];
var currDom = $('#' + currElement.id);
if (currDom.length == 0) continue;
var currForm = currDom.parents('form').first();
if (currForm.length == 0) continue;
if (!currDom.hasClass('input-validation-error'))
currDom.addClass('input-validation-error');
var currDisplay = $(currForm).find("[data-valmsg-for='" + currElement.name + "']");
if (currDisplay.length > 0) {
currDisplay.removeClass("field-validation-valid").addClass("field-validation-error");
replace = $.parseJSON(currDisplay.attr("data-valmsg-replace")) !== false;
if (replace) {
currDisplay.empty();
$(currElement.errors[0]).appendTo(currDisplay);
}
}
}
};
setTimeout(ToApply, 0);
}
/////////
jForm.find('.input-validation-error').removeClass('input-validation-error');
jForm.find('.field-validation-error').removeClass('field-validation-error').addClass('field-validation-valid');
var container = jForm.find("[data-valmsg-summary=true]");
list = container.find("ul");
list.empty();
if (errors.length > 0) {
$.each(errors, function (i, ival) {
$.each(ival.errors, function (j, jval) {
$("<li />").html(jval).appendTo(list);
});
});
container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
inner_ServerErrors(errors);
setTimeout(function () { jForm.find('span.input-validation-error[data-element-type]').removeClass('input-validation-error') }, 0);
}
else {
container.addClass("validation-summary-valid").removeClass("validation-summary-errors");
}
}
function clearErrors(jForm) {
remoteErrors(jForm, []);
}
I would like to get an alert when errors occur when loading my jqGrid table. For instance, when the jsonReader is not well configured, like when repeatitems is true instead of false, U can see in Firebug the error:
ccur is undefined
[Break On This Error] idr = ccur[idn] || idr;
How can I place such an error in an alert? I have already tried using loadError, but it doesn't work, because it is not even triggered.
It seems for me that you should just use try - catch block over jqGrid code:
try {
// create the grid
$("#list").jqGrid({
// all jqGrid options
});
} catch (err) {
// display the error message which you want
alert(err);
}
UPDATED: You are right, the try {...} catch (err) {...} which I described before work in IE only with reading local data. In case of getting data from the server the exception take place inside of success callback of $.ajax. To be exactly it take place inside of addJSONData or addXmlData depend of the type of data which you use. To catch the exception you should modify code of jqGrid in the place. The modified code can be about the following
success:function(data,st, xhr) {
if ($.isFunction(ts.p.beforeProcessing)) {
ts.p.beforeProcessing.call(ts, data, st, xhr);
}
try {
if(dt === "xml") { addXmlData(data,ts.grid.bDiv,rcnt,npage>1,adjust); }
else { addJSONData(data,ts.grid.bDiv,rcnt,npage>1,adjust); }
if(lc) { lc.call(ts,data); }
if (pvis) { ts.grid.populateVisible(); }
} catch (err) {
alert(err);
}
if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}
data=null;
if (npage === 1) { endReq(); }
}
I tested in the demo the corresponding modified version of jquery.jqGrid.src.js which display error message. I don't reproduced exactly the error which you described so the error message is a little other as in your case.
If you need minimized version of the modified jquery.jqGrid.src.js file you can produce it yourself with any JavaScript minimizer. For example Microsoft Ajax Minifier can be free downloaded and installed. The usage as
ajaxmin.exe jquery.jqGrid.src.js -out jquery.jqGrid.min.js
will produce the new minimized version of jquery.jqGrid.src.js which will be even a little smaller as the original jquery.jqGrid.min.js.
Another good minimizer is available online here. You should use "Simple" Optimization only.