dojo1.8 - Need on.pausable(fire, 'change', function()) to trigger select toggleDropdown and focus methods - dojo

Hi I have a problem and the error stated:- "Error: Target must be an event emitter."
If there is a change in fire variable and selectHandler is resumed, shouldn't the methods be triggered - toggleDropDown and focus?
Here's my code below:-
var fire = false;
var toggle1, toggle2 = true;
var select = new Select
({
store:storeA
}, 'node_Select');
select.startup();
fire = true;
var switchStore = new button
({
onClick: function()
{if (toggle1)
{
select.setStore(storeB);
toggle1 = false;
}
else
{
select.setStore(storeA);
toggle1 = true;
}
fire = true;
}
}, 'node_switchStore');
switchStore.startup();
var selectHandler = on.pausable(fire, 'change' function()
{
if(fire)
{
select.toggleDropDown();
select.focus();
fire=false;
}
})
var switchPause = new button
({
onClick: function()
{if (toggle2)
{
selectHandler.resume();
toggle2 = false;
}
else
{
selectHandler.pause();
toggle2 = true;
}
}
}, 'node_switchPause');
switchPause.startup();
What is event emitter? Only input change, button and DOM elements' events?
It seems that the fire variable is not event emitter, isn't it?
Please advise
Clement

It has to do with this line:
var selectHandler = on.pausable(fire, 'change' function()
You're trying to listen to one of javascripts primitive types, Boolean. In order for "dojo/on" to work, it has to listen to something that can fire off events. From what I'm seeing in your code sample, what you probably need is a function that handles the changing of the "fire" variable. How about something like this:
var openFire = function() {
select.toggleDropDown();
select.focus();
fire = false;
}
now instead of setting
fire=true;
you can just call
openFire();

Related

How to preview image in element ui?

I am using element ui el-image. And I want to preview my image when clicked with (:preview-src-list). But When I click first time it doesnt preview anything. just add's my downloaded image. So I need to click 2 times. But I want to click 1 time.
Here is my template code:
<el-image :src="src"
:preview-src-list="srcList"
#click="imgClick"></el-image>
ts code:
src = null;
srcList = [];
product = 'shoe1';
imgClick() {
prevImg(product).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.srclist = [url];
});
}
#Watch("product")
changed(value) {
getProductImage(value).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.src = url;
}).catc(e => {
alert(e);
});
}
mounted() {
this.changed(product);
}
I think these things happen because when you click on that image it will trigger clickHandler:
...
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
...
}
...
From source
And the preview is the computed property:
...
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
...
From source
So nothing happened in the first click but after that you set preview-src-list and click it again then it works.
If you code is synchronous you can use event like mousedown which will trigger before click event.
<el-image
:src="url"
:preview-src-list="srcList"
#mousedown="loadImages">
</el-image>
Example
But if you code is asynchronous you can use refs and call clickHandler after that.
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
Example

How to select batch rows by clicking shift key down in element-ui table?

I want to implement batch selection by clicking shift key. My solution is to implement keydown and keyup listening event. Set a var to determine whether shift key is down. And then loop the data to make the batch selection.
But I met the problems
1. I cannot get the right value of isShift, why?
2. If some column is sortable, it will be a problem to get the data after sorting.
https://codesandbox.io/s/editable-table-idea-g1pil
Any suggestion? Great thx!
I think you need to change code. In method creaed event onKeydown you using anonymous function so this.isShift out of Vue data
created() {
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key === 16) {
this.isShift = true;
}
};
document.onkeyup = function(e) {
this.isShift = false;
};
},
It should be
created() {
document.onkeydown = this.onKeyDown;
document.onkeyup =this.onKeyUp;
},
methods: {
onKeyDown() {
var key = window.event.keyCode;
if (key === 16) {
this.isShift = true;
}
},
onKeyUp() {
this.isShift = false;
},
}
Sorry if my English is bad

Data table on click on dynamic controls

I have a jquery data table that I am populating from a drop down on change event. I have two check boxes in the data table and I am running an onclick on the check boxes. But on the first click the jquery does not fire only when I click it a second time does the jquery fire, also happens on switching pages.I added the .on() for the click, because I researched and saw that dynamic controls would work that way. Is there something I'm missing also to get this click function to work on first click? Below is some of my code.
data table click on check box control no jquery click event on first click
data table click on check box control on second click
$('#my-table').on('click', function () {
var i = -1;
$("input[id*='secondary']:checkbox").on("click", function () {
if ($(this).is(':checked')) {
i = selectedIds.indexOf($(this).val());
if (i === -1) {
selectedIds.push($(this).val());
}
CheckedSecondary(this);
}
else {
jQuery(this).closest("tr").css("background-color", "");
if (selectedIds.length > 0) {
i = selectedIds.indexOf($(this).val());
if (i != -1) {
selectedIds.splice(i, 1);
}
}
if (!primaryChecked)
$(this).closest('tr').find('input[type="checkbox"]').not(this).attr('disabled', false);
}
});
$("#my-table").find("input[id*='primary']:checkbox").on("click", function () {
if ($(this).is(':checked')) {
primaryChecked = true;
primaryID = this.value;
CheckedPrimary(this);
}
else {
primaryID = "";
primaryChecked = false;
$(this).closest('tr').find('input[type="checkbox"]').not(this).attr('disabled', false);
$('input:checkbox[id^="primary"]').each(function () {
if (!$(this).closest('tr').find('input[type="checkbox"]').is(':checked'))
$(this).attr('disabled', false);
});
jQuery(this).closest("tr").css("background-color", "");
}
});
});
You're attaching click handler inside another click handler which doesn't make sense.
Remove first click handler:
$('#my-table').on('click', function () {
});
Attach the click handler to the checkboxes as follows:
$('#my-table').on('click', "input[id*='secondary']:checkbox", function () {
});
and
$('#my-table').on('click', "input[id*='primary']:checkbox", function () {
});

Triggering remove event of kendo upload on click of button is not working

I want to remove selected file of kendo upload control on click event of another button and I followed the below link
Triggering OnCancel event of kendo upload on click of button the remove event fired but not clear the file below is my code. please can any one help me what i am doing wrong.
$(document).ready(function () {
$("#files").kendoUpload({
"multiple": false,
select: function (event) {
console.log(event);
var notAllowed = false;
$.each(event.files, function (index, value) {
if ((value.extension).toLowerCase() !== '.jpg') {
alert("not allowed! only jpg files!");
notAllowed = true;
}
else if (value.size > 3000000) {
alert("file size must less than 3MB ");
notAllowed = true;
}
if (event.files.length > 1) {
alert("Please select single file.");
e.preventDefault();
}
});
var breakPoint = 0;
if (notAllowed == true) event.preventDefault();
var fileReader = new FileReader();
fileReader.onload = function (event) {
var mapImage = event.target.result;
$("#sigimage").attr('src', mapImage);
document.getElementById("sigimage").style.display = 'block';
}
fileReader.readAsDataURL(event.files[0].rawFile);
},
remove: function (e) {
alert("remove");
e.preventDefault();
},
});
$("#closewindow").click(function (e) {
$("#files").data("kendoUpload").trigger("remove");
});
});
You can use the following code for removing the file inside your click function.
$(".k-delete").parent().click();
Please visit the fiddle here for a working example
You can create your custom function like this:
function remove(){
$(".k-upload-files").remove();
$(".k-upload-status").remove();
$(".k-upload.k-header").addClass("k-upload-empty");
$(".k-upload-button").removeClass("k-state-focused");
};
It will delete trigger delete of uploaded files.

different ways of assigning onclick events dojo

The second approach, where I hardcode the input id's and connect them to onclick events works properly.
But, when I use the first approach, it doesn't work.
The code executes in this manner.
select1.on('change',function(evt) {
requiredFunction(select8.id);//select9 is not present (so I changed loop end value from inputs.length -1 to inputs.length -2 )
}
Am I missing some event handling principles in dojo?
Approach1:
function assignOnClickEvents(table) {
var inputs = document.getElementById(table).getElementsByClassName('classname');
for (var i = 0; i < (inputs.length - 1); i++) {
dijit.byId(inputs[i].id).on('change', function (evt) {
requiredFunction(inputs[i+1].id);
});
}
}
Approach2:
function assignOnClickEvents() {
var select1 = dijit.byId('select1');
var select2 = dijit.byId('select2');
var select3 = dijit.byId('select3');
var select4 = dijit.byId('select4');
var select5 = dijit.byId('select5');
var select6 = dijit.byId('select6');
var select7 = dijit.byId('select7');
var select8 = dijit.byId('select8');
var select9 = dijit.byId('select9');
select1.on('change', function (evt) {
requiredFunction('select2');
});
select2.on('change', function (evt) {
requiredFunction('select3');
});
select3.on('change', function (evt) {
requiredFunction('select4');
});
select4.on('change', function (evt) {
requiredFunction('select5');
});
select5.on('change', function (evt) {
requiredFunction('select6');
});
select6.on('change', function (evt) {
requiredFunction('select7');
});
select7.on('change', function (evt) {
requiredFunction('select8');
});
select8.on('change', function (evt) {
requiredFunction('select9');
});
}
You're mixing DOM node IDs and Dijit IDs. This could be a possible reason why your code isn't working.
To fix this, you could try the following approach:
var inputs = dijit.findWidgets(table); // Returns widgets, not DOM nodes
for(var i = 0;i < inputs.length - 1;i++) {
inputs[i].on('change', function(evt) {
// Remind: this returns the widget ID, not the DOM ID
requiredFunction(inputs[i+1].id);
});
}
In dojo there is a difference between widgets and DOM nodes. So using DOM functions (to retrieve a DOM node by ID or by classname) will not always work. They could work, but that's not always the fact.
You can also call your function requiredFunction() as follow :
<input data-dojo-attach-event="onChange:requiredFunction"></input>
This will reduce your time of looping and work similar as you want.
All the best.