I have several articles on my page, only one article will have class="playing" at a time. This changes depending on user interaction. So I need to somehow check when user clicks or does something like that I need to find article with class="playing" and get it's id in a global variable.
I tried this but it doesn't seem to work
$(document).on("click", function() {
nowPlaying = $('article').hasClass('playing');
nowPlaying = nowPlaying.atrr('id');
});
every time I click I get this error in console:
TypeError: 'undefined' is not a function (evaluating 'nowPlaying.atrr('id')')
atrr is not the name of the function; use attr instead.
Additionally, your can shorten your code like this:
nowPlaying = $('article.playing').attr('id');
Related
I am using Animate to create an animation. I am on the process of getting all the buttons to do what they are supposed to. Right now, I am stuck with the following. I would like to assign multiple buttons the same action, this is because the buttons appear on many different frames, so this is what I have got but I am getting an error.
var btns = ["btncasco","btncasco1","btncasco2"];
btns.forEach( btnsIteratee.bind(this));
function btnsIteratee(item){
this[item].addEventListener("click", function(event){
this.gotoAndStop(0);
});
}
I want to be able to click on any of the referenced button names and make them go to frame 0. Any idea about of what is wrong?
This is the error I get:
"Uncaught TypeError: Cannot read property 'addEventListener' of undefined"
It's a little hard to tell from the small amount of code you have provided what else is going on that could cause unexpected behaviour of this. However. The following:
btns.forEach( btnsIteratee.bind(this));
Could benefit from being bound once, as the reference to this won't change for each instance of the forEach loop. Then having the array item passed in. Something like:
var btns = ["btncasco", "btncasco1", "btncasco2"];
function btnsIteratee(item) {
item.addEventListener("click", function(event) {
this.gotoAndStop(0);
});
}
btnsIteratee = btnsIteratee.bind(this);
btns.forEach(btnsIteratee);
The above is pseudo code as there isn't much provided by your example
thanks for the posts. I finally sorted this out using this chunk of code for each series of buttons.
var btntres = ['btnlumbrera2' , 'btnlumbrera3' ,'btnlumbrera4' ,'btnlumbrera5' ,'btnlumbrera6' ,'btnlumbrera7', 'btnlumbrera8', 'btnlumbrera9', 'btnlumbrera10', 'btnlumbrera11', 'btnlumbrera12', 'btnlumbrera13', 'btnlumbrera14', 'btnlumbrera15', 'btnlumbrera16', 'btnlumbrera17', 'btnlumbrera18'];
btntres.forEach( btnsIteratee3.bind(this) );
function btnsIteratee3(item){
if (this[item] && !this[item].hasEventListener('click')) {
this[item].addEventListener("click", hyandler.bind(this));
} else {
console.log('item no existe', item);
}
function hyandler(event){
this.gotoAndStop(4);
}
}
I am using the kendo kendoNumericTextBox.
The kendo js libraries are included before the following.
I am trying to store a reference to the actual input for later use like this:
$(document)
.ready(function () {
//Wire up the elemets with selectors
$eventGrid = $("#jsGrid");
$bedInput = $('#bed');
$dateInput = $('#date');
$operatingTimeInput = $("#operatingTime").data("kendoNumericTextBox"); <-- ERROR OCCURS HERE
$plannedDowntimeInput = $("#plannedDowntime").data("kendoNumericTextBox");
fetchDayData(currentBed(), currentDate());
})
Uncaught TypeError: Cannot read property 'value' of undefined
However when stepping through, both $operatingTimeInput and $plannedDowntimeInput are undefined. If I later do these assigments manually in the console, everything works as expected.
Now, I seem to remember there being an event similar to document.ready() but specifically for kendo. Though, For the life of me, I can't find it...
Any thoughts?
EDIT 1
The fields are being initialized in a razor view like this:
#(Html.Kendo().NumericTextBox()
.Name("operatingTime")
.Max(24)
.Min(0)
.Step(0.05)
.HtmlAttributes(new { #id = "operatingTime" })
)
So as you can see, I have no control over when the textbox is actually "created". That's why I'm looking for a way to get the instance created by the html helper.
One way which I tried to accomplish is like :
$(document)
.ready(function () {
$("#operatingTime").ready(function(){
setTimeOut(function(){
if($("#operatingTime").data("kendoNumericTextBox")){
//Wire up the elemets with selectors
$eventGrid = $("#jsGrid");
$bedInput = $('#bed');
$dateInput = $('#date');
$operatingTimeInput = $("#operatingTime").data("kendoNumericTextBox"); <-- ERROR WILL NOT OCCUR HERE
$plannedDowntimeInput = $("#plannedDowntime").data("kendoNumericTextBox");
fetchDayData(currentBed(), currentDate());
}
},1000);
});
})
Since I had comfort of waiting for 1 second, I went with this logic. let us know if something else has worked out for you.
I have the follwing javascript code that it triggers an IronPython script when I load the report.
The only issue I have is that for a reason I don't know it does it (it triggers the script) a couple of times.
Can some one help me? below is the script:
var n=0;
$(function () {
function executeScript() {
if (n==0){
n=n+1;
now = new Date();
if (now.getTime()-$('#hiddenBtn input').val()>10000){
$('#hiddenBtn input').val(now.getTime());
$('#hiddenBtn input').focus();
$('#hiddenBtn input').blur();
}
}
}
$(document).ready(function(){executeScript()});
strong text});
Please, let me know if you need more information.
Thanks in advance!!!
I have had similar issues with Javascript executing multiple times. Spotfire seems to instance the JS more than once, and it can cause some interesting behavior...
the best solution, in my opinion, only works if users are accessing the document via a link (as opposed to browsing the library). pass a configuration block to set a document property with a current timestamp, which would execute your IP script. this is the most solid implementation.
otherwise, you can try something like this:
// get a reference to a container on the page with an ID "hidden"
var $hidden = $("#hiddenBtn input");
// only continue if the container is empty
if !($hidden.text()) {
var now = Date.now();
$hidden.text(now)
.focus()
.blur();
|}
this is essentially the same as the code you posted, but instead of relying on the var n, you're counting on the input #hiddenBtn > input being empty. there is a caveat that you'll have to ensure this field is empty before you save the document
one addtional solution is using a Data Function to update the document property, like #user1247722 shows in his answer here: https://stackoverflow.com/a/40712635/4419423
I have a template that looks like this:
<p ng-repeat="item in myobj.items" class="toAnimate">{{item}}</p>
and I would like to use the animate module do a jQueryUI addClass/removeClass animation on the element using the JavaScript method described in the docs:
ngModule.animation('.toAnimate', function() {
return {
enter: function(element) {
element.addClass('pulse').removeClass('pulse', 2000);
}
};
});
This works beautifully, but the problem is that, since I want to use the p.toAnimate element to display status messages, it will not change the content according to angular.
To break it down a little further, say I have a name field. When I click Save the message Name was saved successfully. is displayed. Now if I modify the name and click save again, assuming the save was successful, the message should be re-displayed to give the user feedback of the newly edited name. The pulse does not happen, however, because the items in myobj.items didn't technically change.
I realize that I could remove the item after a period of time (and that is probably the route I will take to implement the real solution), but I'm still interested to see if this sort of thing can be done using AngularJS.
What I want to do is register with angular that the message should be treated as new even though it is not. Is there any way to do this?
A fiddle to go along with this: http://jsfiddle.net/Jw3AT/
UPDATE
There is a problem with the $scope.$$phase approach in my answer, so I'm still looking for the "right" way to do this. Basically, $scope.$$phase is always returning $digest, which causes the conditional to fail. Removing the conditional gives the correct result in the interface, but throws a $rootScope:inprog.
One solution I found is to add a $apply in the middle of the controller function:
$scope.updateThingy = function () {
$scope.myobj.items = [];
if (!$scope.$$phase) {
$scope.$apply();
}
$scope.myobj.items = ['Your name was updated.'];
};
Updated fiddle: http://jsfiddle.net/744Rv/
May not be the best way, but it's an answer.
I am trying too keep two instances of an Ace editor in sync. So when the user types in one, the other is updated.
Looking at their docs I see that the EditSession change event says that it returns a delta of the change, and the Document has an applyDeltas method.
So I have hooked into that change event, and when it is fired I call the other document.applyDeltas and pass it over, but it doesn't work.
I have been poking around their docs (and Google for an hour), but I am not seeing how to keep them in sync. Does anyone know how I can do that?
Ok, I figured it out. Nothing beats looking at src :)
The applyDeltas method on the document wants an array, AND you need to grab the data from the change event.
//on editor1.change
this.handleEditor1Changed = function (e) {
var deltas = new Array();
deltas[0] = e.data;
this.editor2.getSession().getDocument().applyDeltas(deltas);
};
If you looked at the source, you should have seen that applyDeltas just calls applyDelta in a loop for each element in the array. Thus, you could simply do this:
editor1.on('change', function(delta) {
editor2.session.doc.applyDelta(delta);
})
or, in more modern JavaScript
editor1.on('change', delta => editor2.session.doc.applyDelta(delta))