Hey all I have the following code that's a mix of Prototype JS and Jquery:
var oldZindex = 0;
var theClickID = null;
UIProgressButton.prototype._initEvents = function() {
var self = this;
this.button.addEventListener( 'click', function(param) {
$('#overlay').css({'visibility':'visible'});
theClickID = $('button[data-id="' + param.toElement.attributes[1].value + '"]').parent().attr('id');
oldZindex = $('#' + theClickID).css('z-index');
});
}
This code works just fine in a Chrome Browser but seems to throw the error of:
typeerror param.toelement is undefined
In FireFox.... How would I go about fixing this issue since I know for a fact that it does work since its working in Chrome just fine?
Fixed it by adding the following:
var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
Then using that within my code:
UIProgressButton.prototype._initEvents = function() {
var self = this;
this.button.addEventListener( 'click', function(param) {
$('#overlay').css({'visibility':'visible'});
var Element = ((window.event)?(event.srcElement):(param.currentTarget));
theClickID = $('button[data-id="' + Element.attributes[0].value + '"]').parent().attr('id');
oldZindex = $('#' + theClickID).css('z-index');
});
}
Since you already have jQuery you could use it to bind your event listeners so you don't have the IE trouble in getting the event:
var oldZindex = 0;
var theClickID = null;
UIProgressButton.prototype._initEvents = function() {
var self = this;
$(this.button).on( 'click', function(param) {
$('#overlay').css({'visibility':'visible'});
theClickID = $('button[data-id="'
//you may prefer to get a named attribute
//instead of by index:
//param.getAttribute('attributeName')
+ param.target.attributes[1].value
+ '"]').parent().attr('id');
oldZindex = $('#' + theClickID).css('z-index');
});
}
Related
I would like to understand why in this "loop" I cannot attach the key of element in an event with a closure/inner function. I know what happens with other loops like for,while ... I don't understand the real reason why in this situation this approach doesn't work.
Q: Why can I not pass the key directly?
item.transaction(["itens"], "readonly").objectStore("itens").openCursor()
.onsuccess = function(e) {
var info = e.target.result;
if (info) {
var div = document.createElement("div");
var img = document.createElement("img");
var h2 = document.createElement("h2");
img.src = "../imagens/misc/" + info.value.image;
h2.innerHTML = info.value.title;
div.appendChild(h2);
div.onclick = function() {
//always the lasy key.
console.log(info.key);
};
div.appendChild(img);
box.appendChild(div);
info.continue();
}
};
I know type of solution works...
bt.onclick = (function(index) {
return function (){console.log('iterator: ' + index);}
})(i);
with ({ n: i }) {
bt.onclick = function(index) {
console.log('iterator: ' + n);
};
}
In the example given, you're overwriting div.onclick for each iteration of the cursor.
What's going on might be clearer if you changed it to be:
console.log('overwriting onclick handler to log: ' + info.key);
div.onclick = function() {
console.log(info.key);
};
Or instead, don't overwrite:
console.log('adding onclick listener to log: ' + info.key);
div.addEventListener('click', function() {
console.log(info.key);
});
These will behave differently but perhaps help you to understand what's going on.
My jquery change event of radio button not working after first click and does not give any error please help me. i stuck in this from last week.and also cant count proper value because of this problem.
$('input[name="emailing"]').change(function()
{
checkValue();
});
function checkValue(evt) {
alert('hi');
var package = $("#package_value").val();
var emailing = $('input[name="emailing"]:checked').val();
$('input[name="emailing"]').on("mousedown", function() {
var select = $('input[name="emailing"]:checked').val();
$("#selected").val(select);
}).on("mouseup", function() {
$('input[name="emailing"]').prop('checked', false);
$(this).prop('checked', true).checkboxradio("refresh");
});
var selected = $("#selected").val();
alert(selected);
var update = $("#update").val();
if(update != '')
{
var hiddenPackage = $("#hidden_pricing").val();
var hiddenRadion = $("#hidden_radio").val();
var totalValue = package - hiddenRadion;
if(emailing == 1)
{
$("#package_value").val('');
var value = Number(totalValue) + 38;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
if(emailing == 2)
{
$("#package_value").val('');
var value = Number(totalValue) + 55;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
if(emailing == 0)
{
$("#package_value").val('');
var value = Number(totalValue) + 0;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
}
}
You should use delegate
$(document).delegate( "input[name='emailing']", "change", function() {
checkValue();
});
Use on() function with any element id instead of (document)
$(document).on('change', 'input[name="emailing"]', function() {
checkValue();
});
I'm new to BackboneJs. And I really don't know what hell I'm doing wrong, but the events from my subview doesn't fire. I've been stuck with this problem now a long time, and I've used the google and stackoverflow to find a solution to my problem but I'm still confused. Could someone help\guide me?
var ExerciseList = Backbone.Collection.extend();
var ExerciseView = Backbone.View.extend({
events : {
'click' : "clickFun"
},
clickFun : function(e) {
alert("yamaha");
},
render : function() {
var exerciseList = new ExerciseList();
exerciseList.url = '/api/exercise_bank/' + this.id + '/';
var that = this;
var element = this.$el;
exerciseList.fetch({
success : function() {
var template = _.template($('#exercise-bank-template-exercises').html(), {exercises : exerciseList.models});
$(element).html(template);
}
});
return this;
},
});
// Collection
var MuscleGroupList = Backbone.Collection.extend({
url : '/api/exercise_bank/'
});
// View
var MuscleGroupView = Backbone.View.extend({
el : '#exercise-bank-component',
initialize : function() {
this.exerciseList = new ExerciseList();
this.exerciseView = new ExerciseView();
},
render : function() {
var muscleGroupList = new MuscleGroupList();
that = this;
console.log('MuscleGroup.render');
muscleGroupList.fetch({
success : function(muscleGroupList) {
template = _.template($('#exercise-bank-template-musclegroups').html(), {
musclegroups : muscleGroupList.models
});
that.$el.html(template);
_.each(muscleGroupList.models, function(musclegroup) {
var element = "#eb-exercises-" + musclegroup.get('id');
that.exerciseList.id = musclegroup.get('id');
that.exerciseView.id = musclegroup.get('id');
that.exerciseView.setElement(element).render();
return that;
});
}
});
return this;
},
});
muscleGroupView = new MuscleGroupView();
exerciseView = new ExerciseView();
muscleGroupView.render();
Backbone.history.start();
Questions:
1) Is your view getting rendered on the Dom.
2) Is this element really present inside the dom var element = "#eb-exercises-" + musclegroup.get('id');
3) Why do need the setElement here
that.exerciseView.setElement(element).render();
Solved it!
I just moved:
initialize : function() {
this.exerciseList = new ExerciseList();
this.exerciseView = new ExerciseView();
},
down to:
_.each(muscleGroupList.models, function(musclegroup) {
var element = "#eb-exercises-" + musclegroup.get('id');
var exerciseList = new ExerciseList();
var exerciseView = new ExerciseView();
exerciseList.id = musclegroup.get('id');
exerciseView.setElement(element).render();
return that;
});
and now it works as I want it to do! :)
I'm using this code to debug...
$(document).ready(function() {
$('.slider').slider();
});
$.fn.slider = function() {
return this.each(function() {
var $el = $(this);
var dragging = false;
var startX = $el.offset().left;
var startL = 0;
$el.mousedown(function(ev) {
dragging = true;
startX = ev.clientX;
startL = $(this).css('left');
alert("class: "+ $el.className +" id: " + $el.id);
});
$(document).mousemove(function(ev) {
if (dragging) {
var newLeft = parseInt(startL) + (ev.clientX - startX);
$el.css('left', newLeft );
}
}).mouseup(function() {
dragging = false;
});
});
}
Note: alert("class: "+ $el.className +" id: " + $el.id);
It always returns "undefined" for $el.className and $el.id.
How can I get it to return the id and class of the element (div) that I've clicked on?
I've tried many variant of $el and .id, but nothing seems to work.
You're mixing jQuery and vanilla javascript properties. className is vanilla and $(this) makes a jQuery object.
Either change
$el.className
to
$el.attr('class')
or if you want to use className:
var $el = $(this);
to
var $el = this;
(although that would require changing other parts of code as well)
try like following:
$(function() {
$("div").click(function() {
var name = this.name;
var cls = this.className;
var id= this.id;
alert("Name: " + name + " / Class: " + cls + " / Id: " + id);
});
});
i use jQuery Boilerplate: http://jqueryboilerplate.com/
and now i have a problem to call a function in a function..
i can't call "openOverlay" in "clickEvents", but i can call "openOverlay" in "init".
here is a snippet:
Plugin.prototype = {
init: function() {
var $me = $(this.element);
this.clickEvents($me);
},
clickEvents: function($el, func) {
$el.on('click', function() {
var $me = $(this);
var overlayName = $me.data('overlay');
this.openOverlay(overlayName);
});
},
openOverlay: function(overlayName) {
var $overlayContainer = $(defaults.$overlayContainer);
var $overlay = $overlayContainer.find('[data-overlay="' + overlayName + '"]');
$overlayContainer.fadeIn(500);
$overlay.delay(500).fadeIn(500);
}
};
the problem is that the on click function overrides "this"
try:
var self=this;
$el.on('click', function() {
var $me = $(this);
var overlayName = $me.data('overlay');
self.openOverlay(overlayName);
});