I'm trying to create a chart with D3 that will update when a submit button is clicked, however instead of firing when the button is clicked, the event happens as the page is loaded.
For example:
d3.select("#updatedata").on("click", alert('test'));
The alert happens immediately and does not happen when the button is clicked.
Am I missing something obvious?
Any advice appreciated.
Thanks.
You need to wrap the handler in a function:
d3.select("#updatedata").on("click", function() { alert('test'); });
Related
I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai
I have a modal which has a link to another modal. When I opened the second modal and close the first modal, I can't scroll the second modal, only the background content scrolls. Can any one help me to solve this? I am using bootstrap 3.3.7
Try to use Modal Events to be sure your modals will not overlap. In this case you must open the second modal after the first one, like this:
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
});
If .button is the selector for those things that close the first modal to open the second one, you should have something like this
$('#first-modal').on('click', '.button', function() {
// [...] Whatever you need to do after pushing one of those buttons
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
$('#first-modal').off('hidden.bs.modal');
// This will remove ANY event attached to 'hidden.bs.modal' label
}).modal('hide');
});
If you want to use the first cleaner example, oyu should be able to test from the event object where it came from (if it's not one of your button, event.preventDefault(); and quit)
I have a dynamic angular-datatable something similar to this https://l-lin.github.io/angular-datatables/#/withFixedHeader, also table got horizontal scroll bar. Currently fixed header datatable plugin not supporting scroll. Any idea how to implement this ?
Check the scroll event of datatable and initialize it in angular,
angular.element(document).on('init.dt', function() {
document.querySelector('.dataTables_scrollBody').onscroll = function(e) {
// dtInstanceCallback
// call the dtInstance again.
}
})
so, whenever a scroll event happens in angular datatable then it will recreate the table which in turn works as expected.
Note: This makes datatable too compatible with scroll events in angular way :)
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});