I have the following code snippet (just to illustrate the question, it is not full production code) for the CkEditor plugin:
onOk: function() {
var dialog = this,
element = dialog.element;
.........
element.setStyle('width', width+'%');
element.setStyle('text-align', align)
dialog.commitContent(element);
}
In this small code snippet a modification of one dialog element occurs using setStyle() method, after which commitContent is triggered.
So, the questions are:
Do I understand correctly, that each setStyle call here triggers
element rerender (repaint) since this element already exists in
DOM?
What is the purpose of commitContent() ckEditor method? Just an event for dialog elements to store some data?
setStyle
I belive that setStyle repaints the components already existing in the DOM, have a look at this example (that I have taken from the official documentation):
var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );
It first gets the element from the doc and Then sets the style, so basically it is repaiting it triggering events.
commitContent
From the official documentation:
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each
of the UI elements, with the arguments passed through it. It is
usually being called when the user confirms the dialog, to process the
values.
Hope this helped you!
Related
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();
Where do I set the values that are passed to the subGridRowExpanded method. For example, I have a parent row A and I want to get the children of A so I want to pass this value to the subGridRowExpanded method.
#SBel: I had the same issue these days afer upgrading to jqGrid v. 4.6.0.
Oleg is - as always - right by pointing to a "wrong" id-specification.
This happens sometimes when the generation of your JSON-String comes from an older jqGrid-Installation...
However, these lines helped me out:
[...],
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = $(this).getRowData(row_id);
var uid = rowData['id'];
[...]
}
subGridRowExpanded is callback function. One uses it for example to implement Subgrid as Grid. jqGrid set all parameters and then calls your callback function if you implemented it.
You should describe more clear your original problem: what you want to do and in which context (in which situation or inside of which callback).
I have a grid that is locally initialized from an array data. after adding the rows to it I want to be able to get the event of the scrollbar when it reaches to the end and load more rows locally.
(the grid has certain height and 'overflow-y' : scroll)
How can this be done?
Thanks In Advance.
You can see the code for loading more data at line 1831 of grid.base.js:
case "local":
case "clientside":
beginReq();
ts.p.datatype = "local";
var req = addLocalData();
addJSONData(req,ts.grid.bDiv,rcnt,npage>1,adjust);
$(ts).triggerHandler("jqGridLoadComplete", [req]);
if(lc) { lc.call(ts,req); }
$(ts).triggerHandler("jqGridAfterLoadComplete", [req]);
if (pvis) { ts.grid.populateVisible(); }
endReq();
The good news is that the loadComplete event is called, so you can put your code there. The only complication is that loadComplete may also be called when the grid is initially constructed, so you have to take that into account as well.
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.
When using Sortable.create I can't seem to get the element that is being dragged. Does Sciptaculous not fully implement all Draggable and Droppable features when you use sortable?
Given:
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(){
console.log(this.draggables.each(function(e){if(e.dragging==true){return e};}));
}
My console always shows all the array of draggables. How do I only grab the one that is being dragged?
The onChange function actually gets a handle to the element passed in.
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(elementBeingDragged){
console.log(elementBeingDragged);
}