I'm using smart-table at the moment, and I have input text boxes up the top of each column and I am using st-search. The point of what I am making is something is selected from the table, and then the results in the table are changed.
I am trying to clear the search boxes when the row is clicked. At the moment other business logic is implemented on click, so it's at this point that I am looking to clear these text boxes.
I have tried to associate an ng-model to these text boxes, and to clear them when the row is clicked but the text boxes don't change. I have also googled this issue and I have only found solutions on how to make this work for when you click on a button (by a directive) to clear the predicates. I haven't been able to make these solutions work programatically however.
To resolve this I did the following:
Monkey-patched smarttable.js with the code in this github issue (https://github.com/lorenzofox3/Smart-Table/issues/164). For me this occured at around line 574.
// added from https://github.com/lorenzofox3/Smart-Table/issues/164
ng.module("smart-table").directive("stResetSearch",
function() {
return {
restrict: 'EA',
require: '^stTable',
link: function(scope, element, attrs, ctrl) {
return element.bind('click',
function() {
return scope.$apply(function() {
var tableState;
tableState = ctrl.tableState();
tableState.search.predicateObject = {};
tableState.pagination.start = 0;
return ctrl.pipe();
});
});
}
};
});
Added 'st-research-search' to the element that was calling the function in angularjs. For me, that was the "tr" element. Like below.
<tr ng-repeat="medicine in medicines" ng-click="medicationMatched(medicine)" ng-class="heatmapClass(medicine)" st-reset-search>
This worked fine. Unfortunately, I wasn't able to programatically clear the predicates from the code. But this works well enough for me.
Related
I extend a Control to create a new custom control in UI5 and this control renders a tree as UL items nicely. Now I need to implement a collapse/expand within that tree. Hence my renderer writes a tag like
<a class="json-toggle" onclick="_ontoggle"></a>
and within that _ontoggle function I will handle the collapse/expand logic.
No matter where I place the _ontoggle function in the control, I get the error "Uncaught ReferenceError: _ontoggle is not defined"
I am missing something obvious but I can't find what it is.
At the moment I have placed a function inside the
return Control.extend("mycontrol",
{_onToggle: function(event) {},
...
Please note that this event is not one the control should expose as new event. It is purely for the internals of how the control reacts to a click event.
I read things about bind and the such but nothing that made sense for this use case.
Took me a few days to crack that, hence would like to provide you with a few pointers.
There are obviously many ways to do that, but I wanted to make that as standard as possible.
The best suggestion I found was to use the ui5 Dialog control as sample. It consists of internal buttons and hence is similar to my requirement: Render something that does something on click.
https://github.com/SAP/openui5/blob/master/src/sap.ui.commons/src/sap/ui/commons/Dialog.js
In short, the solution is
1) The
<a class="json-toggle" href></a>
should not have an onclick. Neither in the tag nor by adding such via jQuery.
2) The control's javascript code should look like:
sap.ui.define(
[ 'sap/ui/core/Control' ],
function(Control) {
var control = Control.extend(
"com.controlname",
{
metadata : {
...
},
renderer : function(oRm, oControl) {
...
},
init : function() {
var libraryPath = jQuery.sap.getModulePath("mylib");
jQuery.sap.includeStyleSheet(libraryPath + "/MyControl.css");
},
onAfterRendering : function(arguments) {
if (sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
}
},
});
control.prototype.onclick = function (oEvent) {
var target = oEvent.target;
return false;
};
return control;
});
Nothing in the init(), nothing in the onAfterRendering(), renderer() outputs the html. So far there is nothing special.
The only thing related with the onClick is the control.prototype.onclick. The variable "target" is the html tag that was clicked.
I have a kendo grid with a custom popup:
columns.Command(commands =>
{
commands.Edit();
}
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
Each time I click the edit button the window pops up but when I close it the window is not removed from the DOM.
I saw this post: http://www.telerik.com/forums/popup-windows-do-not-get-removed-from-dom and Telerik says the issue has been fixed.
What are some things that would cause this behavior?
UPDATED
This grid is nested in a Kendo TabStrip if that helps. Other than that I don't see anything out of the ordinary. The popup is entirely managed by the grid.
UPDATED 2
So I got the un-minimized code for the grid (kendo.grid.min.js, version 2013.3.1119, starting at line 1172), slopped it into my project and modified just the following with the two log statements to verify that destroy is being bound and called:
_destroyEditable: function () {
var that = this;
var destroy = function () {
if (that.editable) {
// My edit
console.log("...destroy() called");
that._detachModelChange();
that.editable.destroy();
that.editable = null;
that._editContainer = null;
}
};
if (that.editable) {
if (that._editMode() === "popup") {
// My edit
console.log("Binding destroy() to 'deactivate'...");
that._editContainer.data("kendoWindow").bind("deactivate", destroy).close();
} else {
destroy();
}
}
},
Each time I click edit and then close the window I see the expected two messages yet the window is not removed. Here is a screenshot of the debugger:
The outlined windows are the dom elements generated.
After much trial and error and deep diving it turns out this problem has to do with our scripts in our site's layout. At some point whomever setup the kendo scripts put in not only the 'kendo.all.min.js' but right after it 'kendo.web.min.js', 'kendo.aspnetmvc.min.js' and then about 10 individual kendo.*.js including the grid.
After viewing this link:
http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies
I realized that the site is creating these objects multiple times. Removing the script references in accordance to the link above resolves the issue.
I am building a website using slickgrid and I have these two problems:
I want to select the entire column whenever the user clicks on the column header. I have been able to change the style of the cells as given in this example. I have not been able to figure out how to change the style of the column header
How to get to know when the end of scroll has happened in slickgrid. I am currently doing
$(".slick-viewport").scroll(function () {
if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
handle_end_of_scroll()
}
})
But I am dependent on the css class name of the slick grid body and I might have issues if I end up updating slickgrid later to a newer version. I might have to update this part of the code if the implementation of slickgrid changes.
Change the style of a header
You could force an update to a header which would trigger a onHeaderCellRendered event in which you could then change the class on the header. Pretty messy, though.
grid.onHeaderCellRendered.subscribe(function (e, args) {
var headerCell = args.node;
});
grid.updateColumnHeader('columnID');
Check if scrolled to end
Binding to scroll events directly is always bad. You should subscribe the the onViewportChanged event and getViewport method to check if you have reached the end.
grid.onViewportChanged.subscribe(function () {
var lastRow = grid.getViewport().bottom;
if (lastRow >= grid.getDataLength() - 1) {
console.log('at bottom');
}
});
The drag/drop column reordering is a great feature, but how do I prevent the users from moving particular (non-data) columns?
For example, I am using the Checkbox Selectors for my mutli-select Grid, but this column should always be locked to the left, while the other columns can be freely reordered.
I looked at the sortable demos on jQuery UI and modified the setupColumnReorder function in slick.grid.js to exclude certain items. By excluding the checkbox column I was able to prevent it from getting reordered, even by dragging other columns before it.
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
Since my checkbox column is always first, I just grab the id like so. A bit of a hack, but it worked.
I tried this:
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
but i had problems when dragging other columns before it. Then i tried this:
grid.onColumnsReordered.subscribe(function (e, args) {
if (myGridColumns[0].id != grid.getColumns()[0].id)
{
grid.setColumns(myGridColumns);
}
else
{
myGridColumns= grid.getColumns();
}
});
and it was just fine.
I am developing a website that parses rss feeds and displays them based on category. You can view it here: http://vitaminjdesign.com/adrian
I am using tabs to display each category. The tabs use ajax to display a new set of feeds when they are clicked.
I am also using two other scripts- One called equalheights, which re-sizes all of the heights to that of the tallest item. And the other script I am using is called smart columns, which basically resize your columns so it always fills the screen.
The first problem I am having is when you click a new tab (to display feeds within that category). When a new tab is clicked, the console shows a jQuery error:
$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();
The main problem is that each feed box fills up the entire screen's width (after you click on a tab), even if there are multiple feed boxes in that category.
MY GUESS - although all of the feeds (across all tabs) are loaded on pageload, when a new tab is selected, both jQuery scripts need to be run again. any ideas on how I can make this work properly?
One thing to note - I used the ajaxSuccess method for making equalHeights work on the first page...but it wont work after a tab is clicked.
My jQuery code for the tabs are below:
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
$("#cities li:nth-child(1)").addClass('zebra');
$("#column li ul li:nth-child(6)").addClass('zebra1');
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$(".block").equalHeights();
return false;
});
Thanks to Macy (see answer below), I have brought my jQuery script to the following: (still does not work)
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
I found some small problems in your code. I am not sure that my suggestions will solve all the problems, but I decide to describe my first results here.
1) You should remove comma before the '}'. Currently the call look like $("#column").sortable({/**/,});
2) The function equalHeight is not jQuery plugin. It is the reason why the call $(".block").equalHeights(); inside your 'click' event handler follows to the error "$(".block").equalHeights is not a function" which you described. You should change the place of the code to equalHeight($(".block")); like you use it on other places.
3) The script http://vitaminjdesign.com/adrian/js/equalHeight.js defines the function equalHeight only and not start any actions. Once be loaded it stay on the page. So you should not load it at the end of every ajax request. So I suggest to reduce the script
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
to
$(document).ajaxSuccess(function(){
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
4) I suggest to change the code of http://vitaminjdesign.com/adrian/js/equalHeight.js from
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to eliminate the usage of global variables tallest and thisHeight. I recommend you to use JSLint to verify all your JavaScript codes. I find it very helpful.
5) I recommend you to use any XHTML validator to find some small but sometime very important errors in the markup. Try this for example to see some errors. The more you follow the XHTML standards the more is the probability to have the same results of the page in different web browsers. By the way, you can dramatically reduce the number of the errors in your current code if the scripts included in the page will be in the following form
<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>
I didn't analysed the full code but I hope that my suggestions will solve at least some of problems which you described in your question.
Essentially, when you add a new element to the document, the equalheights script has not attached its behavior to that new element. So, the "quick fix", is probably to re-embed the equalheights script after an ajax request has completed so that it re-attaches itself to all elements on the page, including the elements you just added.
Before this line: $(".block").equalHeights(); , add a line of script which re-embeds/re-runs your equalheights script.
$.getScript('<the location of your equalHeightsScript>');
$.getScript('<the location of your smartColumnsScript>');
$(".block").equalHeights();
or
var script = document.createElement('script');
script.src = '<the location of your script>';
document.body.appendChild(script);
A better solution would be to upgrade the plugin so it takes advantage of live. However, I'm not up to that at the moment :)
Some Error Here
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
Should be re-written like this
$("ul.tabs li").click(function() {
$(this).addClass("active").Siblings("li").removeClass("active");; //Remove any "active" class Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
.
.
.
});
I don't think you need to run the scripts again after the ajax, or at least that's not the "main" problem.
You seem to have some problems in the script smartColumn.js
Right now it seems to only operate on the ul with the id "column" ('#column'), and it is working on the one UL#column you do have, but of course your HTML has many other "columns" all of which have the class "column" ('.column') that you want it to work on as well.
Just to get the beginning of what you are trying to do, change all the selectors in smartColumn.js that say 'ul#column' to say 'ul.column' instead, and then alter the HTML so that the first "column" has a class="column" rather than an id="column".
That should solve the 100% wide columns at least.
That should solve your "Main" Problem. But there are other problems.