Following the example of Asad in this related question, I do not know how to refer to the object this of the javascript itself and angular varibale.
// Original code, the angular variable don't work
$.FroalaEditor.RegisterCommand('insert', {
title: 'Insert Read More',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('<span class="readMore">'+this.angularVariable+' </span>');
}
});
// using fat arrows, the angular variable works but this.html.insert fails
$.FroalaEditor.RegisterCommand('insert', {
title: 'Insert Read More',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: () => {
this.html.insert('<span class="readMore">'+this.angularVariable+' </span>');
}
});
Related
I'm not able to find a description which tag belongs to which position - allways searching for comments from oleg ;-).
I've a table with actionbuttons (edit/del) in the row. Adding ist done over inlinenav add:true:
jQuery(document).ready(function()
{
currentCompanyCode = '<s:property value="currentCompanyCode" />';
jQuery("#grid").jqGrid({
url: "serverAction" ,
pager: true,
pgbuttons:false, pginput:false, pgtext:false,
datatype: "json",
mtype: "POST",
ajaxGridOptions: {async: false},
aftersavefunc: function() {reloadGrid("grid")},
postData: { currentCompanyCode : function () {return jQuery("#availCompanyCodes").val();}},
pager: '#addBtns',
colModel:[
{name:"id", label:"key", hidden:true, key:true},
{name:"priority", label:"prio"},
....
{name: "act", label:"", align: "left", template:"actions"}
],
actionsNavOptions: {delbutton: true, editbutton: true}
}
}) .jqGrid("navGrid", '#addBtns', {refresh:true, edit:false, del:false, search:false, add:false },
{/*edit Options*/},
{/*add Options*/},
{/*del Options*/},
{/*search Options*/})
.jqGrid("inlineNav", '#addBtns', {
save:true, edit:false, add:true,
editParams: {keys: true, successfunc : function() {reloadGrid("grid")}, extraparam: {currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}},
addParams: {addRowParams:{successfunc : function() {reloadGrid("grid")}, extraparam:{ currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}}}
})
});
This is an extract from our grid-definition. Took some time to figure out, how I can set postdata when inlinediting or addding.
Two Questions:
Is there an easier way to add postdata in inlineediting? It looks complicated ;-)
The grid will not reload when I add a new line and press the save-icon in the actions-cell. It reloads when pressing Enter or the Savebutton in the pagerbar. Where should I put the reload-statement?
I don't understand why in edit-mode the successfunc-tag belongs to the editParams block, but in add-mode it has to be in the addRowParams block. Is there anywhere a description where to put these tags?
Thanx oleg - the grid is great, but sometimes I miss a documentation....
The problem, which you describe, is related to the common design of jqGrid. jqGrid provides not only the options used during creating the grid, but it has many other methods used directly or indirectly, which options need be specified.
For example, there are exist editRow method, which its set of options and callbacks. You want to specify keys and extraparam options and the successfunc callback. Direct call of editRow (inside of onSelectRow or ondblClickRow callbacks, for example) will look like
$(this).jqGrid("editRow", {
keys: true,
extraparam: { ... },
successfunc: function() { ... }
});
The problem is that the editRow will be called not only directly, by indirectly, from addRow, from inlineNav or from the action formatter. Every from the methods provides some ways to specify the options, which will be forwarded to editRow, but the usage of such options is not comfortable and the maintain of resulting code isn't so good.
Because of that free jqGrid introduced the possibility to specify default options for the grid context. The grid parameter inlineEditing for example allow to specify default options of editRow on one place and all direct or indirect calls of editRow will uses the options. One can still overwrite the options is needed (inside of editParams option of inlineNav, for example). In the same way, one can use new jqGrid options formEditing, formViewing, formDeleting, searching, navOptions, inlineNavOptions and so on. Additionally some simple options like pager are improved in free jqGrid. One can specify pager: true and jqGrid will create the div for the pager itself, like it does for toppager: true option. One can just skip the pager parameter ('#addBtns' in your case) for navGrid, inlineNav or navButtonAdd. By the way, your original code contains syntax error: you use pager property of jqGrid twice: once as pager: true and once more as pager: '#addBtns'.
Thus you can rewrite your original code to for example the following
jQuery("#grid").jqGrid({
url: "serverAction",
datatype: "json",
mtype: "POST",
pager: true,
pgbuttons: false,
pginput: false,
pgtext: false,
postData: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
colModel:[
//{name: "id", label: "key", hidden: true, key: true},
{name: "priority", label: "prio"},
....
{name: "act", label: "", align: "left", template: "actions"}
],
navOptions: { edit: false, del: false, search: false, add: false },
inlineNavOptions: { add: true, edit: true },
actionsNavOptions: { delbutton: true, editbutton: true },
inlineEditing: {
keys: true,
extraparam: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
aftersavefunc: function () {
var $grid = jQuery(this);
setTimeout(function () {
$grid.trigger("reloadGrid");
});
}
}
}) .jqGrid("navGrid")
.jqGrid("inlineNav");
I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.
The links are dynamic from a webgrid which is where the #item.GrouperIDForLookip comes from.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).
Does anyone happen to know what would cause this to happen? If you need more code just let me know.
Please update the URL in the load function in the below code.
<div id="groupersDialog"></div>
<a id="GrouperField_#item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
$(".grouper").on("click", function () {
var id = $(this).attr("id").split("_")[1];
$('#groupersDialog').dialog({
autoOpen: true,
width: 1000,
height: 600,
resizable: true,
draggable: true,
title: "Groupers",
model: true,
show: 'slide',
closeText: 'x',
dialogClass: 'alert',
closeOnEscape: true,
open: function () {
//Load the Partial View Here using Controller and Action
$('#groupersDialog').load(
'#URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
},
close: function () {
$(this).dialog('close');
}
});
});
</script>
I have two pages, the first is a login page, simple :
Model KnockoutJs
function Login(){
var self=this;
self.email = ko.observable().extend({ email: true, required: true });
self.password = ko.observable().extend({ required: true});
}
Model Binding
$(function () {
ko.validation.configure({
insertMessages: true,
decorateElement: true,
errorElementClass: 'validation',
messageTemplate: "ValidationTemplate",
errorsAsTitle: false
});
var login = new Login();
ko.applyBindings(login);
});
Template Definition
<script type="text/html" id="ValidationTemplate">
<span data-bind="attr: { error: field.error },
visible: field.isModified() && !field.isValid(),
event: { mouseover: layout.errorTooltip }"
class="glyphicon glyphicon-exclamation-sign f-validation-message"></span>
</script>
Everything works fine, the little icon appears over the input which gets red borders.
Then the other page, with models hierarchy :
Model KnockoutJs Parent
function Parent()
{
var self=this;
self.child= new Child();
}
Model KnockoutJs Child
function Child()
{
var self=this;
self.val1= ko.observable().extend({ required: true });
self.val2= ko.observable().extend({ required: true });
}
Model Parent Binding
$(function () {
ko.validation.configure({
insertMessages: true,
decorateElement: true,
errorElementClass: 'validation',
messageTemplate: "ValidationTemplate",
errorsAsTitle: false
});
var parent= new Parent();
ko.applyBindings(parent);
});
The inputs are in this case included in a with block
<div data-bind="with:$root.child">
...
</div>
The validation template is the same.
So, the icon does not appear but the borders, yes.
When I check the code, KnouckoutJs did not "spread" the template on each input.
The only difference is the multi models system, but not sure how it impacts the binding?
Thank you for your help.
Yoann
Ok, I found the problem, it was not linked at all with the multi model or validation template.
I was binding data like follow :
//data: JS object
self.obsProp(ko.mapping.fromJS(data));
self.obsProp().value1.extend({required:true});
self.obsProp().value2.extend({required:true});
WRONG Way, the correct way to map the data with validation :
var validationMapping = {
value1: {
create: function(options) {
return ko.observable(options.data).extend( {required: true} );
}
},
value2: {
create: function(options) {
return ko.observable(options.data).extend( {required: true} );
}
}
};
self.obsProp(ko.mapping.fromJS(data,validationMapping));
And everything works fine.
Thanks :)
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/
This is my document.ready code:
$(document).ready(function() {
$("#dialogbox").dialog({
open: function(event, ui) {$("a.ui-dialog-titlebar-close").remove();},
bgiframe: true,autoOpen: false,closeOnEscape: false,draggable: false,
show: "drop",hide: "drop",zIndex: 10000,modal: true,
buttons: {'Ok': function() {$(this).dialog("close");processEmp();}}
});
});
I have the following JavaScript code that takes one parameter:
function test(pEmp)
{
var a = pEmp.value);
$('#dialogbox').dialog('open');
}
My question is, based on the value that I pass into my test function, which in turn calls my jQuery UI dialog ('#dialogbox'), when the user presses the 'Ok' button in the dialog, I need to somehow (which is what I am not sure how to do), pass the the variable "a" which holds my pEmp.value, into my other function processEmp(a?), which I have attached to my 'Ok' button.
I basically need this value when the user acknowledges the dialog box.
You may pass custom option to dialog before opening it:
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp($(this).data("pEmpValue"));
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
$("#dialog").data("pEmpValue", pEmp.value).dialog("open");
}
Or even the simplest solution is to declare a variable in scope of the window:
var a = null;
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp(a);
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
a = pEmp.value;
$("#dialog").dialog("open");
}
You can achieve this by adding an event handler for 'close'. Something like this:
$("#dialogbox").bind("dialogclose", function(event, ui) { processEmp(a); });