Refer to this JSFiddle demo.
http://jsfiddle.net/MalcollmS/kLt3pfrc/2/
Why isn't my window.onload running?
How do I run the code editor.initialise?
Malcolm
var editor = (function () {
var editorData = {"Weeks":[{"Days":[{"Date":"\/Date(1417611600000)\/","DayIndex":1,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417698000000)\/","DayIndex":2,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417784400000)\/","DayIndex":3,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417870800000)\/","DayIndex":4,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1417957200000)\/","DayIndex":5,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1418043600000)\/","DayIndex":6,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0},{"Date":"\/Date(1418130000000)\/","DayIndex":7,"StartHour":0,"StartMin":0,"FinishHour":0,"FinishMin":0,"LunchHour":0}]}],"NumWeeks":1,"WeekEnding":"\/Date(1418130000000)\/","StartDate":"\/Date(1417611600000)\/"}
initialise = function (data) {
//editorData = data;
$("#starthourselector div").live("click", function () { updateEditor("#starthourselector div", this); });
};
function updateEditor(selector, div) {
alert(selector);
$(selector).css('background-color','red');
$(div).css('background-color','white');
//var idx = $(selector).index(div));
}
return {
initialise: initialise
};
}());
window.onload = function() {
alert('hi');
editor.initialise(null);
}
In the jsfiddle option click no wrap head option and it should work properly
select no wrap head on the left hand side under on the same dropbox as onLoad
JSFIDDLE
Related
I found a codepen.io example (https://codepen.io/srees/pen/pgVLbm) I want to play around with in the context of a .vue app I'm working on, and I need some help transferring the <script> section over.
I copied the HTML chunk into a <template> and the CSS into a <style>. I've confirmed the .vue file works within the broader context (content loads when the <script> is commented out. I also placed <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> immediately before my <script> to resolve the $ not defined error I was getting. Is there something I need to import into App.vue or into this particular .vue file? When I leave <script> uncommented, I simply get a blank page loaded.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script>
var hidWidth;
var scrollBarWidths = 40;
...
you could define a method like this:
methods: {
renderStuff: function () {
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.list li').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-
scrollBarWidths;
};
var getLeftPosi = function(){
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize',function(e){
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
}
}
and run the method on mount like this:
mounted() {
this.renderStuff();
}
Side note, var is not ideal in this day and age. Recommend converting these to let.
Trying to make a component in Vue.js, which first shows image via thumbnail, loading full image in background, and when loaded, show full image.
The thing which does not work, component does not react on change of showThumb flag in watch section. What is wrong?
Vue.component('page-image',
{
props: ['data'],
template:
'<img v-if="showThumb == true" v-bind:src="thumbSrc"></img>'+
'<img v-else v-bind:src="fullSrc"></img>',
data: function()
{
return { thumbSrc: '', fullSrc: '', showThumb: true };
},
watch:
{
data: function()
{
this.thumbSrc = data.thumbImg.url;
this.fullSrc = data.fullImg.url;
this.showThumb = true;
var imgElement = new Image();
imgElement.src = this.fullSrc;
imgElement.onload = (function()
{
this.showThumb = false; // <<-- this part is broken
} );
}
}
} );
Note: there is a reason why I do it via 2 img tags - this example is simplified.
Your onload callback will have a different scope than the surrounding watch function, so you cannot set your data property like this. Change it to an arrow function to keep scope:
imgElement.onload = () =>
{
this.showThumb = false;
};
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
What to use in element(by.css("") for writing tests in protractor if the class am referring to is <a class="button button-large button-secondary has-shield download-btn"
var HomePage = function() {
this.centerStageButtons = element(by.css(".text-center"));
this.tryTheAngular = this.centerStageButtons.all(by.css(".button.button-large.button-primary.has-shield.has-shadow")).get(0);
this.downloadButton = this.centerStageButtons.element(by.css("..button.button-large.button-secondary.has-shield.download-btn"));
describe('angularjs.org', function() {
var homePage = new HomePage();
beforeEach(function() {
browser.get('https://angularjs.org/');
});
it('should have two buttons', function() {
//expect(homePage.tryTheAngular.isDisplayed()).toBe(true);
expect(homePage.downloadButton.isDisplayed()).toBe(false);
});
});
};
It is giving me a false positive as test is passed
This worked
this.downloadButton = element(by.css(".button.button-large.button-secondary.has-shield.download-btn"));
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.
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.