I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list
Related
I have a quandary that I can't seem to resolve - any pointers would be hugely welcome.
When the tab link is clicked, the new tab opens, but the datatable within tabs 2 & 3 doesn't resize - tab1 is always ok.
I'm using datatables within boostrap tabs and the following code, which I've used on other sites and they work. This site i'm working in however, isn't playing ball - wondering if it's because it's BS5 causing a conflict ??
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function (e) {
$.fn.dataTable.tables({ visible: true})
.columns.adjust()
.responsive.recalc();
});
I've also tried the code provided by Datatables, and that doesn't seem to work either - in this case. https://datatables.net/examples/api/tabs_and_scrolling.html
The Problem
I think the line
$.fn.dataTable.tables({ visible: true})
is not valid DataTables syntax - and I would expect it to generate an error in your browser's console:
$.fn.dataTable.tables(...).columns is undefined
Suggested Solutions
You can re-write your approach in a couple of different ways (assuming you are using a recent version of DataTables).
The first two examples assume all your tables use a common CSS class name in their HTML <table> tags. In my case, I am using this:
<table id="example2" class="display dataTable cell-border" style="width:100%">
And therefore I will use the .dataTable class selector in the following examples.
Example One
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$.fn.dataTable.Api('.dataTable')
.columns.adjust()
.responsive.recalc();
} );
Example Two
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$('.dataTable').DataTable()
.columns.adjust()
.responsive.recalc();
} );
Note that the above example uses DataTable() with a capital "D".
Example Three
The above examples operate on all data tables in the page - it's just that the only one which is affected is the one you see in the selected tab.
If you want to explicitly target only one table in your tab event, you can use the approach shown in this question:
How to make DataTable responsive in Bootstrap tabs
In that answer, the approach retrieves the specific table name from a unique attribute value 'data-bs-target' defined for each tab, for example:
data-bs-target="#home"
See the API reference page for details.
I am using ionic 4. I want to do search function in my apps. I am using search bar and get the result from API.
My problem is it always output duplicate result.
One problem is I haven't typing the word finish it already match the result that I want to search, then it will output the result.
Another problem is when I finish typing it output again the result.
How can I solved or avoid this problem?
Here is my html code:
<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>
Here is my home.page.ts
Search() {
this.myService.getSearch(this.name);
}
The second one sounds like you are not wiping the data in your this.myService.getSearch call - check what it does in there, is it starting from a new list or just returning more results? If that doesn't solve that issue then post the code for that section.
The first issue is by design.
You can slow this down with the debounce option:
<ion-searchbar debounce="1500"></ion-searchbar>
There are two input events you can experiment with ionChange and ionInput - they act differently but I cannot remember exactly which does which, you will have to try them both. A third option would be to handle neither of them and just use a submit button.
I have various buttons and several buttons with the same name "Start". I need to click on the first found button with this name (innerHTML).
With jQuery this works with :
$('button:contains(Start):first').click()
How does it work with I.click()-Selector in CodeceptJS? I can't find the right syntax and always getting:
"invalid selector: An invalid or illegal selector was specified"
Here is the API for this function: https://github.com/Codeception/CodeceptJS/blob/master/docs/webapi/click.mustache
The only working solution I found is:
I.click('//button[1]');
But this solution is confusing, because you need to know the exactly number in the order of this element - and I have a lot of buttons with different names. Also this not allows me to search by innerHTML such as "Start".
You could use the I.executeScript like this:
I.executeScript("var elements = document.getElementsByName('Start');elements[0].click();"); or
I.executeScript("var elements =
document.querySelector(\"button[name*='Start']\");elements[0].click();");
You need using XPath for that
//button[1][contains(text(), 'Start')]
locate("//button[contains(text(), 'Start')]").first()
or
locate("//button[contains(text(), 'Start')]").at(1)
Works fine.
In the fifth column of my table which is populated from ajax, outside of the code is ==$0 which is not part of the html.
Screenshot from Chrome: http://i.imgur.com/vRioSrh.png
This breaks the whole table... I have no idea where this code is coming from.
Using datatables 1.10.12.
Oh, this appears to be a Chrome debugging value? I suppose it is not part of the actual document. There must be another issue in my table.
Goal:
Display the result without using any line between column and row
Problem:
I can't remove these line
The picture below is taken in preview mode
// Fullmetalboy
In the textbox properties for each cell of the grid, just make sure you set the BorderWidth property to 0.
Due to very limited info in the question maybe try Results-to-text instead of Results-to-grid?
I think that we need more info here... are you showing these results in a HTML page, through some dynamic language (ASP, PHP, Ruby)? or are you using reporting tools like Crystal Dynamics?
If you're doing in HTML, I guess the css rule border-collapse:collapse on the table would do the trick