I have a table that gets populated with data after a search. I would like to run a script to hide some of the columns after the table is loaded.
I know of ngAfterViewInit() but don't want to use that because the script needs to run after the search button has been clicked and data populated, not after the page load
I have the function where the code to hide columns after the data is supposed to be loaded but when I step through in the browser debugger, the function is getting hit before there's actual data displayed in the table which is why it's not working
//not working
this.customerService.getCustomers(query).toPromise().then(data => {
this.customers = data;
this.hideColumns();
});
hideColumns() {
$('.addressOld').hide()
}
Where can I call this function instead?
You can do what you need this way (and don't need to use jQuery to only hide/show elements, use Angular and pure html properties):
.html
<button (click)="doSearch()">search</button>
<div [hidden]="customers"></div>
.ts
class YourComponent {
customers = null;
doSearch() {
const query = 'something';
this.customerService.getCustomers(query).toPromise().then(data => {
this.customers = data;
});
}
}
Use the [hidden] property from html element to hide it, as explained here.
Related
I have a table for loading data and i wrote a code which assigns each table an href with javascript since the serverside enabled i can't assign each td a href. Therefore, each time page changes or search query invoked i need to assign href to client side table rows.
Here is what i put so far:
function assign_href_to_tables() {
console.log("Run assign_href_to_tables");
// access all td variables when serverside enabled.
$('#table').on( 'order.dt', function () {
var table_rows = $('#table').find('tbody tr');
console.log(table_rows)
// scan through table rows and assign onclick event to each row.
table_rows.each(function(index, element) {
$(this).click(function() {
var id = $(this).find('td:nth-child(1)').text();
// reidrect to the edit page with the id of the clicked row
window.document.location = '/detail/' + id;
});
});
} );
}
I invoke the assign_href_to_tables function in initComplete e.g.:
"initComplete": function( settings, json ) {
assign_href_to_tables();
},
If i call the function on document ready it will affect only the first page. When page changes or search request queried href stops working.
I tried to follow this link but i did not understand it nor i could implement it.
As long as i understand, the problem arise initComplete does not wait for the table data to load. I don't know what is missing in my work. Thank you.
I have a drop down list (telerik dropdownlist) and for every option i call a different partial view from my controller.
onChange = function (e)
{
var product = e.value;
if (product)
{
$.post( myUrl,
{ CodigoProduto : product }, // passing the product to my controller
function (retorno) {
// insert the partial view in a div
$('#AreaGenerica').html(retorno);
}
);
}
}
the first option returns a partial view that contains a javascript code
<script type=\"text/javascript\">
function PartialViewFunction () {
alert("test");
}
</script>
<h2>Option A</h2>
and the second option returns a partial view without any javascript code.
In my view i call the function inside the partial view
ViewFunction = function () {
// check if the function 'PartialViewFunction' exists.
if (typeof PartialViewFunction === "function")
{
PartialViewFunction();
}
};
My problem is that if i choose the first option and then the second the 'PartialViewFunction' is still being called but it shouldn't because it doesn't exists inside the second partial view.
I tried to remove the div containing my partial view following this answer but it didn't work.
Thanks in advance and i hope you can understand my english.
EDIT:
#(Html.Telerik().DropDownList()
.Name("grpAutorizacaoPublicacao")
.SelectedIndex(0)
.Effects(e => e.Opacity())
.ClientEvents(e =>
{
e.OnChange("onChange");
})
.DataBinding(db => db.Ajax().Select("_ListaGrupoAutorizacao", "Publicador")))
As a general rule I would avoid including JavaScript in partial views. You can search for advice about that. This might mean refactoring your JS to be generic and always included from the view proper. Such a design pattern would, I think, solve your problem, or at least make it easier to understand and fix.
Alternatively, it seems like you may need to limit onChange function to just the first select element. The code you have shown does not make it clear what calls the onChange event. You could include the html of the select element before and after the first selection is made.
Let me try explaining things again. I have an app running in a javascript framework on Node.js w/ Bootstrap. In one of the bootstrap panels I embedded an Angular Elasticsearch search client. Here's some code that displays the results:
<section class='results'><article class='result' ng-repeat='result in results track by $id(result)' /><div id="addThisInfo" ng-repeat='ng-repeat='result in results track by $id(result)' style="display: none;"> {{$id}},{{result.code}},{{result.expression}},{{result.source}}</div>Code:{{result.code}}<br>Description: {{result.expression}}<br>div ng-if='result.source ==4'> Type: Source 1</div><div ng-if='result.source ==10'> Type: Source 2</div></article> </section>
There are 5 results per page.
Note that the only portion of this app written in Angular is this search mechanism.
Ultimately I want the user to be able to click on either the text of the desired result or click on a button that would add their choices to a separate table.
Here's how it works rignt now. When I click on any of the 5 results per page it invokes this:
document.addEventListener("click", function() {
var packy = document.getElementById("addThisInfo").innerHTML; //div above
addInfo(packy);
});
It doesn't matter which ever one of the results I click, it always sends the "first" result of the active page. Even though the div "addThisInfo" has been repeated and is part of the result, it doesn't
The web socket call looks something like this:
{"params":"0ij,I77.812ZZ,"Full Expression","100"}
I'm not having any luck uploading an image of the Inspect Element. But there you can see that all of the data is there.
I'd like to schedule a http://join.me session with someone so I could show you how it's currently working. Help is greatly appreciated!!
Thanks!
why must you pass them individually? I'm unsure of what you're trying to accomplish, exactly, but I'd handle it something like this:
for the markup:
<button ng-click="addInfo(result)">
then in the controller
$scope.addInfo = function(result) {
var foo = result.code,
bar = result.source;
etc...
}
Angular. directive('notNgClick', function () { return {
restrict: 'A',
scope: {
values: '&'
},
link: function (scope,elem, attr) {
elem.addEventListener(function () {alert (scope.values.someValue ) } )
}
}
}
I'm using the Win8 Grid View Template to display infos from a news site. In the lower menu bar i have implemented a function wich shuts off the titles, so that only the pictures are still visible.
This function is in a "global.js" file which is included in the "default.html" so it's available everywhere and it looks like this:
//function to turn titles off and on
function titleToggle() {
var titles = document.getElementsByClassName("item-overlay");
for (var i = 0; i < titles.length; i++) {
if (Global.titlesAreOn) {
titles[i].style.display = "none";
}
else {
titles[i].style.display = "";
}
}
Global.titlesAreOn = !Global.titlesAreOn;
};
So when i call this function from the menu bar it works for the first items, but when i scroll the end of the groupedItems view (hubview) the titles are still there. When i then scroll back to the beginning the titles are there again too.
I'm also calling the titleToggle function from the ready() function of the "groupedItems.js" to check whether or not to display the titles depending on a global variable. When i do that (whenever i come back to the hubpage) it works all the way, just as expected.
ui.Pages.define("/pages/groupedItems/groupedItems.html", {
navigateToGroup: function (key) {
nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: key });
},
ready: function (element, options) {
appbar.winControl.disabled = false;
appbar.winControl.hideCommands(["fontSizeBt"]);
appbar.winControl.showCommands(["titleToggle"]);
if (Global.titlesAreOn == false) {
Global.titlesAreOn = true;
Global.titleToggle();
}
I made a short video to show the problem, because its kinda hard to explain --> http://youtu.be/h4FpQf1fRBY I hope you get the idea?
Why does it work when i call it from the ready() function?
Does anyone have an idea? Is it some kind of automatic item caching in order to have better performance? And how could this be solved?
Greets and thanks!
First, here is why this might be happening - WinJS is using single page navigation for the app experience. This means that when you navigate to a new page, actually you don't. Instead the content is removed from the page and the new content is loaded in the same page. It is possible that at the moment you press the button not all elements have been loaded in the DOM and therefore they cannot be manipulated by your function. This is why when you call it from the ready() function it works - all contents are loaded in the DOM. It is generally better to do things in the ready() function.
About the behavior when you slide back left and the items are again reloaded with titles - for some reason the listView items are reloading. Maybe you are using live data from the news site and they are refreshing with the listView control's template again. I cannot know, but it doesn't matter. Hiding the elements is not the best approach I think. It is better to have two templates - one with a title element and one without. The button click handler should get the listView controls(they have to be loaded) and change their templates.
ready: function (element, options) {
var button = document.getElementById('btn');
button.addEventListener("click", btnClickHandler);
}
And the handler:
function btnClickHandler(e) {
var listView = document.getElementById("listView").winControl;
var template2 = document.getElementById("template2");
listView.itemTemplate = template2;
};
I'm trying to use Phantom.JS to do some page automation on this page: https://reserve.apple.com/GB/en_GB/reserve/iPhone
I know how to use document.getElementById('store') = "R363" to choose the first option. But it seems after I've chosen the first option, the DOM element of the original page will change and I don't know how to achieve that using Phantom.JS
Instead of using document.getElementById('store') = "R363" try using jQuery instead like so:
var page = require('webpage').create();
// open the page
page.open('https://reserve.apple.com/GB/en_GB/reserve/iPhone', function() {
//inject jQuery
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// run the following code in the context of the page
page.evaluate(function() {
// change the value of the combobox
$("#store").val( newval );
// do stuff in the page
});
phantom.exit()
});
});