I am new to jquery. I was creating a dynamic query for generating buttons. Here the problem I am facing is - the button starts firing during the Loading of the button event. The query is given below.
priv.buildFilter = function () {
$.each(priv.buttonsNames, function (index, value) {
var divButton = $("<div>");
if (priv.lineAuditData.endDateTime == null)
priv.filterButtons.buttons[index] = $("<button>")
.attr("Id", "StartAudit").addClass("btn btn-primary")
.addClass("btn-success").append($("<i>").addClass("fas fa-play").css("font-size","25px")
.css("margin-top", "27px"))
//.click("click", function (event) {
// if (event.data !== undefined)
// priv.startAudit();
//})
.click(this, priv.startAudit)
;
}
}
priv.startAudit = function () {
alert("ON");
}
Required OutPut : Button need not fires during the filter button binding. But needs to fire when clicking the button
Kindly help me out, with relevant documents
Related
I am trying to customize the behaviour of Angular Gantt.
On cell click : I have to get the current cell value & corresponding header value.
I gone thru the documentation present in this url : https://angular-gantt.readthedocs.io/en/latest/
but couldn't get the required event.
Is there any event present to achieve this functionality. Any help is much appreciated.
I tried following code
mainApp.controller("TestController", function ($scope, TestService) {
$scope.registerApi = function (api) {
api.tasks.on.change($scope, onTaskChange); //working
//TO handle the cell click & corresponding header value
api.core.getDateByPosition($scope, getHeader)
//api.core.on.ready($scope, getDateByPosition) //not working
//api.core.on.rendered($scope, getDateByPosition) //not working
}
var onTaskChange = function (selected) {
$scope.currCell = selected.model;
console.log("onTaskChange: " + selected.model.name);
};
var getHeader= function (getHeader) {
// I should get the current clicked cell header value. But getting error
};
}
Answering my own question as someone may find it useful.
I am able to achieve this from this link
https://angular-gantt.readthedocs.io/en/latest/configuration/customize/
Following is the code which I used:
$scope.registerApi = function (api) {
api.directives.on.new($scope, function (dName, dScope, dElement, dAttrs, dController) {
if (dName === 'ganttTask') {
dElement.bind('click', function (event) {
debugger;
$scope.RowName1 = dScope.task.row.model;
$scope.currentTask = dScope.task.model;
});
}
else if (dName === 'ganttRow')
{
dElement.bind('click', function (event) {
debugger;
$scope.RowName = dScope.row.model.name;
$scope.Header = api.core.getDateByPosition(event.offsetX, true)
});
}
});
I'm trying to find a way to assign event handlers to each box that I create dynamically. At the moment the user can click "Add above" or "Add below" and 2 rows of boxes will appear wherever they clicked.
I'm trying to make it so that when the user clicks on a specific square, a colorPicker will pop up and that specific square's color can be changed.
However, my program is a bit buggy, it only works for the first square that the user clicks on and the colorPicker never pops up again.
Does anyone know how I can go about fixing this or if there is a better alternative?
My code:
http://codepen.io/anon/pen/bwBRmw
var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)
//var picker = new Picker()
function doSomething(e) {
console.log("gets inside doSomething")
console.log(e.target)
console.log(e.currentTarget)
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
console.log("Hello " + clickedItem);
var k = document.getElementById(clickedItem)
var picker = new Picker(k)
picker.show();
}
picker.on_done = function(colour) {
$(k).css('background-color',colour.rgba().toString());
picker.hide()
}
//e.stopPropagation();
}
I noticed in your CodePen that you didn't post the full code for doSomething. You have a problem because the picker variable is local to the function. If the code execution doesn't land inside the IF-statement, the picker variable is never created. Simply uncomment the code declaring the picker variable outside the function, and remove the var directive from in front of the line of code where you instantiate a new picker. Furthermore, you need to reset the "parent" element of the picker, since there is only one picker on the page: picker.settings.parent = k;
var picker = null; // Initialize global variable
function doSomething(e) {
console.log("gets inside doSomething")
console.log(e.target)
console.log(e.currentTarget)
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
console.log("Hello " + clickedItem);
var k = document.getElementById(clickedItem)
// Reference the global "picker" variable
if (!picker) {
picker = new Picker(k)
} else {
// Set the "parent" element of the picker to the newly clicked element
picker.settings.parent = k;
}
picker.show();
}
picker.on_done = function(colour) {
$(k).css('background-color',colour.rgba().toString());
picker.hide()
}
//e.stopPropagation();
}
I have hit a strange problem. I am using hammer.js to configure long-press events, and attaching the event watcher within the Template.onRendered() callback. This works perfectly on my local development machine. However, when I deploy to a server, it seems that onRendered() is being fired before the template is finished rendering in the browser. The jQuery selector is empty. I've had to resort to setting a timer to make sure the template is rendered before configuring the event handler. Alternatively, I've tried configuring the event handler within a Tracker.afterFlush() in place of setTimeout(), but the template is still not rendered when this fires.
It seems that I shouldn't have to use setTimeout() here. Am I doing something wrong or out of order?
Template.CATEGORIES.onRendered(function () {
Meteor.setTimeout(function () {
console.log('setting up hammer object', this.$('.collapsible'));
var h = this.$('.collapsible').hammer({domEvents:true});
h.on('tap press swipe pan', '.collapsible-header', function (ev) {
// get the ID of the shopping list item object
var target = ev.target;
var $target = $(target);
var type = ev.type;
var $header = $target;
if (Collapse.isChildrenOfPanelHeader($target)) {
$header = Collapse.getPanelHeader($target);
}
console.log('Firing ', type, ' on ', $header);
Kadira.trackError('debug', 'Firing ' + type + ' on ' + $header);
// handler for checkbox
if (type === 'tap' && $target.is('label')) {
var data = Blaze.getData(target);
var TS = data.checkedTS;
ev.preventDefault();
data.checked = !data.checked;
console.log('Checkbox handler', data);
if (data.checked && !TS) {
TS = new Date()
} else if (!data.checked) {
TS = null
}
// Set the checked property to the opposite of its current value
ShoppingList.update(data._id, {
$set: {checked: data.checked, checkedTS: TS}
});
} else if (type === 'tap' && $target.has('.badge')) {
// if the user taps anywhere else on an item that has a child with .badge class
// this item has deals. Toggle the expand.
console.log('badge handler');
$header.toggleClass('active');
Collapse.toggleOpen($header);
} else if (type === 'press' || type === 'swipe' || type === 'pan') {
// remove any selected deals
var itemID, item;
var $label = $header.find('label');
console.log('long press handler');
if ($label) {
itemID = $label.attr('for');
item = ShoppingList.findOne(itemID);
if (item && item.deal) {
Deals.update(item.deal._id, {$set: {'showOnItem': false}});
ShoppingList.update(itemID, {$set: {'deal': null}});
}
}
}
})
}, 2000);
});
Someone answered this the other day but must have withdrawn their answer. They suggested that the template was actually rendered, but that the data subscription had not finished replicating yet. They were right.
I was able to validate that I need to wait until the data subscription finishes prior to setting up my java script events.
I'm trying to make a text based selection for my product variationon on my single product page.
I basically generate a p-tag for every option in every variation and use javascript to select the option in the default Woocommerce select dropdown. The option gets selected fine but the check_variations event doesn't get triggered.
Does anyone know how to trigger the check_variations event from my theme? The check_variations listener is in woocommerce/assets/js/frontend/add-to-cart-variation.js
JS
var ProductVariations = (function () {
function ProductVariations() {
this.$variationClickables = $('.variations .value p');
this.setupClickHandlers();
}
ProductVariations.prototype.setupClickHandlers = function () {
var _this = this;
this.$variationClickables.bind('click', function (event) {
_this.variationsClicked(event);
});
};
ProductVariations.prototype.variationsClicked = function (event) {
var $target = $(event.target);
var targetVariation = $target.attr('value');
$('option[value=' + targetVariation + ']', $target.closest('.variations')).attr('selected', 'true');
$target.closest('.variations_form').trigger('change');
};
return ProductVariations;
})();
Andreas!
Did you try this?
$('.variations_form').trigger('check_variations');
I'm filtering table using jQuery and all is well. This code works nicely:
$("*[id$='EquipmentTypeDropDownList']").change(filterTable);
$("*[id$='StateDropDownList']").change(filterTable);
function filterTable() {
var $equipmentDropDown = $("*[id$='EquipmentTypeDropDownList']");
var $stateDropDown = $("*[id$='StateDropDownList']");
var equipmentFilter = $equipmentDropDown.val();
var stateFilter = $stateDropDown.val();
$("tr.dataRow").each(function () {
var show = true;
var equimpent = $(this).find("td.equipment").text();
var state = $(this).find("td.readyState").text();
if (equipmentFilter != "Any" && equipmentFilter != equimpent) show = false;
if (stateFilter != "Any" && stateFilter != state) show = false;
if (show) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
$("table").promise().done(colorGridRows);
}
function colorGridRows() {
//for table row
$("tr:visible:even").css("background-color", "#DED7D1");
$("tr:visible:odd").css("background-color", "#EEEAE7");
}
colorGridRows function changes background color of even/odd rows for readability
Now, It would be nice if I can replace show/hide calls with fadeIn/fadeOut but I can't because coloring doesn't work (it runs before UI effect completed. If it was just one function parameter - I would just create function for completion and be done with it. But my table has many rows and loop runs through each. How do I wait for ALL to compelete?
EDITED: Code sample updated showing how I try to use promise() but it doesn't work. It fires but I don't get odd/even coloring.
Use the promise object for animations.
$("*[id$='StateDropDownList']").change(function () {
var filtervar = $(this).val();
$('tr td.readyState').each(function () {
if (filtervar == "Any" || $(this).text() == filtervar) {
$(this).parent().fadeIn();
} else {
$(this).parent().fadeOut();
}
}).parent().promise().done(colorGridRows);
//colorGridRows();
});