I have attached an onclick event on my glyphicon pencil icon provide by bootstrap, which then should fire up a modal popup. This happens however it seems to close the modal straight after I click on the pencil.
$('.overlayed').on('click', '.glyphicon-pencil', function (e) {
//hold the overlayed element for later use
var chartID = $(this).parent().prev().prop('id');;
$('#editWidgetModal').modal('toggle');
//check for onclick event for the save button
$('#edit-widget').on('click', null, function (event) {
//Now assign all textboxes and create an object to pass into the lineBasedChart mutator
var chartEditOptions = {
title: $('#chart-title').val(),
subtitle: $('#chart-subtitle').val(),
yAxis: $('#chart-yAxis').val(),
tooltip: $('#chart-tooltip').val(),
lineWidth: $('#chart-lineWidth').val() == "" ? "" : parseInt($('#chart-lineWidth').val()),
timeWindow: $('#chart-timeWindow').val() == "" ? "" : parseInt($('#chart-timeWindow').val()),
refreshCycle: $('#chart-refreshCycle').val() == "" ? "" : parseInt($('#chart-refreshCycle').val())
};
//set renderTo data attribute to the widgets created element
//overlayedData.data("data-render", chartID);
chart[chartID].SetNewOptions(chartEditOptions);
$('#editWidgetModal').modal('hide');
});
});
Related
There is a div element on the page, by clicking on it a menu with a choice of the displayed number of elements is created.
Menu:
How to call this action through the console (onMouseDown React)?
Code:
In the console you want to grab your element and then use a dispatch event to simulate a mouseover or click
var div = document.querySelector("#myDiv");
var myEventToDispatch = new MouseEvent("click"); //or "mousedown", whichever you need
div.dispatchEvent(myEventToDispatch);
These three lines in your console should do the trick.
Checkout: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent for more options
found a solution, works in practice. The menu implementation on the site consisted of several nested divs and one input. None of these elements responded to the click () function. The solution below solved my problem and the next steps I needed.
<pre><code>
var MENU = IFrame.contentDocument.getElementsByClassName("class box menu")[0]; // getElementsById, getElementsByTag[0] ....
MENU = MENU.getElementsByTagName("div");
var MaxList = MENU[1].getElementsByTagName("input")[0];
if(MaxList != undefined)
{
if(MENU[0].textContent != "100 items")
{
// focus menu
MaxList.focus();
var e = new KeyboardEvent(
"keydown",
{
bubbles : true,
cancelable : true,
key : "ArrowDown",
char : "ArrowDown",
shiftKey : true
}
);
// scroll down the list
MaxList.dispatchEvent(e);
MaxList.dispatchEvent(e);
MaxList.dispatchEvent(e);
// choice
e = new KeyboardEvent(
"keydown",
{
bubbles : true,
cancelable : true,
key : "Enter",
char : "Enter",
shiftKey : true
}
);
MaxList.dispatchEvent(e);
}
}
</code></pre>
VKomyak (Volt_Nerd)
Pretty general question here, let me know if you would like me to elaborate more. I have a list of elements, each rendered by a view. When an element is clicked, it is highlighted, and the view responsible for that element sends its model to a separate view which displays additional information related to that element.
I'm trying to implement functionality for a user to use the arrow keys to switch between elements, but I'm not sure how to do this.
Here is the code for my View:
var app = app || {};
app.EmployeeView = Backbone.View.extend({
tagName: 'li',
className: 'list-group-item',
template: _.template('<%= Name %>'),
render: function() {
var html = this.template(this.model.attributes);
this.$el.html(html);
},
events: {
"mouseover" : function() {
this.$el.addClass('highlighted');
},
"mouseout" : function() {
this.$el.removeClass('highlighted');
},
"click" : function() {
$('.selected').removeClass('selected');
this.$el.addClass('selected');
$(document).trigger('select', [this.model]);
},
},
});
Does anyone have any suggestions on how I can implement using arrow keys to trigger the appropriate view to forward its model?
I had a very similar feature to implement for my product. I have a list of images. The user clicks on one thumbnail and visualize the image full size. There, I also have a detail box showing info of the picture, and I wanted the user to use arrow keys to got through the pics while staying in the full size view. I also have "prev" and "next" buttons that should work the same. I think the result is clean and this is what I did:
SingleEntryView = Backbone.View.extend({
initialize : function() {
// Here I save a reference to the currentIndex by getting the index
// of the current model within the collection.
this.currentIndex = this.collection.indexOf(this.model);
// Important: here I attach the keydown event to the whole document,
// so that the user doesn't necessarily have to focus the view's
// element to use the arrows.
$document.on('keydown.singleEntry', this.onKeyDown.bind(this));
},
// Having attached the keydown event to document, there's no autocleaning.
// Overriding remove to detach the listener when the view goes away.
remove : function() {
$document.off('.singleEntry');
Backbone.View.prototype.remove.call(this);
},
// Keydown listener. Interested only in arrow keys.
onKeyDown : function(e) {
if (e.keyCode == 37) // left arrow
this.prev();
else if (e.keyCode == 39) // right arrow
this.next();
return true;
},
// Click events on the prev/next buttons (they behave == to the arrow keys)
events : {
'click #prev' : 'prev',
'click #next' : 'next'
},
// Handlers shared by both prev/next buttons and arrow keys.
// What is the current index? Go to the prev/next one.
// If we are at the start/end, wrap around and go to the last/first.
prev : function() {
this.goTo(this.currentIndex > 0 ? this.currentIndex - 1 : this.collection.length - 1);
return false;
},
next : function() {
this.goTo(this.currentIndex < this.collection.length - 1 ? this.currentIndex + 1 : 0);
return false;
},
goTo : function(i) {
this.model = this.collection.at(i);
this.currentIndex = i;
// App is my Router
App.navigate('app/boards/' + this.collection.id + '/entries/' + this.model.id, {
trigger: true
});
}
}
I'm working on a plugin in CKEditor which have as a goal to hide or show element depending on which of my check box is checked. I have those element defined :
contents :
[
{
id : 'tab1',
label : 'Configuration Basique',
elements :
[
{
type : 'checkbox',
id : 'check',
label : 'Vers une page web',
'default' : 'unchecked',
onClick : function(){
}
},
{
type : 'text',
id : 'title',
label : 'Explanation',
}
]
},
{
id : 'tab2',
label : 'Advanced Settings',
elements :
[
{
type : 'text',
id : 'id',
label : 'Id'
}
]
}
],
so now what i would like to do is to hide no disable the text input with the label and print it only when the box is checked. So i've seen that i should use something like that :
onLoad : function(){
this.getContentElement('tab1','title').disable();
},
but the thing is i don't want to disable it i want to hide and then print it if the user check the box (which is why i put a onClick function in my checkbox). i've tryed to use the hide() function but it doesn't work and also the setAttribute('style','display : none;')
Tia :)
If you actually want to hide (and not disable) the element you can do this using
this.getContentElement('tab1','title').getElement().hide();
The extra getElement() call returns the litteral DOM object for your contentElement object, so you can call hide()/show() at will on it.
The onClick properties is available and does work on uiElement although it is not documented. The biggest problem is the definition of "this" is not the same inside the event than other place in the config. You first have to get the dialog to get other fields:
{
type: 'checkbox',
id: 'check',
label: 'check',
onClick: function() {
var dialog = this.getDialog()
if(this.getValue()){
dialog.getContentElement('tab1','title' ).disable();
} else {
dialog.getContentElement('tab1','title' ).enable()
}
}
}
Your checkbox definition is correct but there's no such thing like onClick property in dialog uiElement definition. All you got to do is to attach some listeners and toggle your field. Here you go:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( isThisYourDialog? ) {
...
// Toggle your field when checkbox is clicked or dialog loaded.
// You can also use getInputElement to retrieve element and hide(), show() etc.
function toggleField( field, check ) {
field[ check.getValue() ? 'enable' : 'disable' ]();
}
var clickListener;
dialogDefinition.onShow = function() {
var check = this.getContentElement( 'tab1', 'check' ),
// The element of your checkbox.
input = check.getInputElement(),
// Any field you want to toggle.
field = this.getContentElement( 'tab1', 'customField' );
clickListener = input.on( 'click', function() {
toggleField( field, check );
});
// Toggle field immediately on show.
toggleField( field, check );
}
dialogDefinition.onHide = function() {
// Remove click listener on hide to prevent multiple
// toggleField calls in the future.
clickListener.removeListener();
}
...
}
});
More docs: uiElement API, dialog definition API.
I'm struggling to get the below piece of code working. The problem is that when I wrap the two functions in the editItems property inside the parenthesis (), the code behaves strangely and assigns display: none inline css property to the edit button.
If I don't wrap the two functions inside the parenthesis, I get a javascript syntax error function statement requires a name.
var shoppingList = {
// Some code ...
'init' : function() {
// Capture toggle event on Edit Items button
(shoppingList.$editButton).toggle(shoppingList.editItems);
},
'editItems' : function() {
(function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}), (function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
}
}
$(document).ready(shoppingList.init);
However, if I invoke the toggle event "directly" like this, it works:
var shoppingList = {
// Some code ...
'init' : function() {
// Toggle event on Edit Items button
(shoppingList.$editButton).toggle(
function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}, function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
});
}
};
$(document).ready(shoppingList.init);
Is there a way I could store the toggle event inside the editItems object literal and still have it working as expected?
editItems function looks really odd. I guess you just need to define 2 functions: startEdit and endEdit. And bind them on even and odd clicks using toggle.
var shoppingList = {
// Some code ...
init : function() {
// Bind on edit button click
this.$editButton.toggle(this.startEdit, this.endEdit);
},
startEdit : function() {
$(this).attr('value', 'Finish editing');
shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
}),
endEdit: function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
};
$($.proxy(shoppingList, 'init'));
I have a Kendo grid that has links, which I also set to selectable, snippet here:
columns: [{
field: 'link', title: 'Link',
template: 'Click Here'
}],
...
selectable: 'row',
change: function(e) {
var rowUid = this.select().data('uid');
rowDs = this.dataSource.getByUid(rowUid);
console.log('Went (1): ' + rowDs);
return false;
}
When I click on the external link <a>, I also select the row. Is there any way to suppress the selectable event?
You can also detect what element triggered the click by giving the column a CSS class. Then you would put an if-statement in the change event to detect if the column was clicked or not:
columns: [
{
title: ' ',
command: {
text: 'My Button',
click: function (e) {
e.preventDefault();
//GET SELECTED DATA
var data = this.dataItem($(e.currentTarget).closest('tr'));
//DO SOMETHING
}
},
attributes: {
'class': 'actions'
}
}
]
Then in the change you would have this:
change: function (e) {
//GET TRIGGER SOURCE TO DETERMINE IF ACTION CLICKED
var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
var isAction = eventTarget.parent().hasClass('actions');
//SELECT ITEM IF APPLICABLE
if (!isAction) {
var grid = e.sender;
var dataItem = grid.dataItem(this.select());
if (dataItem) {
//DO SOMETHING
}
}
}
I just stumbled across a forum post by a Kendo UI dev stating that "the selection of the grid cannot be prevented" (link). I guess that means I will have to work around this.
Edit: I actually just want to get the row's uid attribute so I can select the selected dataItem from the dataSource. I've discovered that you can get it while you're defining your columns template,
columns: [{
field: 'link', title: 'Link',
template: 'Manual Edit Link'
}],
And use it to retrieve the selected row's dataItem.
var selectedRow = $('#gridId').data('kendoGrid').dataSource.getByUid(rowUid);
Will close this question in a while, in case anyone else can help.