aria-autocomplete / typeahead not auto selecting - asp.net

I have implemented aria-autocomplete and twitter/bloodhound typeahead.
Problem: It is partially working in the sense that it retrieves the value, but I want it to be automatically selected.
When I type in a Member ID, I want it to automatically select the name in a div below, and in a hidden textbox (which is later checked if there is a value, before allowing user to go to next screen)
What I've tried:
I have read the following:
https://msdn.microsoft.com/en-us/ie/hh968240(v=vs.94)
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
I then changed "aria-autocomplete": "list" to "both" as well as "inline" and neither had an affect.
I then changed my textbox from autocomplete off to autocomplete on with no effect:
I then read about typeahead, but I am not understanding why the autocompleted is not having an affect either. Here is the code for that:
.
displayKey: function (item) { return item.Subscriber_ID },
templates: {
//Template to show if there are no results
empty: function (context) {
// console.log(1) // put here your code when result not found
$(".tt-dataset").text('No Results Found');
},
suggestion: function (item) {
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>';
}
}
})
.

I resolved this by adding some code to the suggestion function, to add a TextBox that the c# should look at , instead of having it look at it after the click:
$('#suggestionName').val(item.First_Name + " " + item.Last_Name); //used to check whether there is a value when hitting submit (hidden field)
$('#divDisplayMemberName').html(item.First_Name + " " + item.Last_Name); //displays it in a <p> tag underneath the TextBox
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>'; //displays the actual suggestion

Related

FullCalendar - Getting both HTML and arg in eventContent

I am trying to create a custom event tile in FullCalendar. I want to show the title on one line and an extendedProps entry on the next one. Now I found 2 ways to achieve either HTML or using args:
eventContent: (arg) => ( arg.event.title + ' ' + arg.event.extendedProps.places + ' Places')
or
eventContent: { html: 'Title <br> places'}
What I am wondering is if there is a way to use both.
You can inject into the HTML with properties of the event as follows:
eventContent: function(eventInfo) { return { html: eventInfo.event.title + "<br> " + eventInfo.event.extendedProps.places + " Places" } }

How to Automatically Detects User's Location and Display in Wordpress Page

I have developed a Custom wordpress Theme and i want to detect the user's location and get inside dropdown?
To locate a users position you can use the HTML Geolocation API. Check out the documentation:
https://www.w3schools.com/html/html5_geolocation.asp
Like in the example of w3schools you only need something to trigger the javascript function. This can be your dropdown element, just give the attribute onclick="getLocation()" to it. Give the element where you want to output the location an ID, so you can put the result of the function in it.
Then you can put the following javascript in the footer.php file of your wordpress theme, or anywhere you think it fits your setting best.
Taken from: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation
<script>
var x = document.getElementById("your_dropwdown_id");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
So on click of the element with the onclick="getLocation()" attribute, the getLocation() function is fired. The function gets the browser location data and outputs the result inside of the element with the id your_dropdown_id.
Hope this helps!

How to add hyperlink inside ClientTemplate with IF condition- Ajax Bound Kendo UI for ASP.NET MVC

I am using ASP.NET MVC. I want to make the Account_Number column as HTML link in the Ajax Bound Kendo UI grid, when it is not searched by Account_Number from previous page. And when clicked on the Account_Number link, it should pass the Account_Number to the Customer controller method 'QuickCheckSearch'.
The below code does not populate the grid in view and also do not call/pass the value to the controller. Could someone please correct the following code?
Thanks in Advance.
columns.Bound(p => p.Account_Number)
.ClientTemplate("<#if (item.Account_Number == Model.AccountNumber){>Account_Number <# }" + "else{#><a href='" + Url.Action("QuickCheckSearch", "Customer") + "?Account_Number=#=Account_Number#'>#= Account_Number #</a> <# } #>")
.Title("Account Number");
Read http://docs.telerik.com/kendo-ui/framework/templates/overview
You have way too many angle brackets all over the place. You should only have them on the actual HTML markup of the template, not as part of the template syntax itself. Try:
.ClientTemplate(
"# if (Account_Number ==" + #Model.AccountNumber + "){ #" +
"#= Account_Number #" +
"# }" +
"else { #" +
"<a href = '" + Url.Action("QuickCheckSearch", "Customer") + "?Account_Number=#=Account_Number#'>#= Account_Number#</a>" +
"# } #"
)
I find it really helps to format it on separate lines just like you would write actual code instead of all on one line so you can see the structure visually.
You could also do it this way, which may be cleaner:
.ClientTemplate("#= accountLinkTemplate(data) #")
....
<script>
function accountLinkTemplate(data) {
var template = data.Account_Number;
if (data.Account_Number == " + #Model.AccountNumber + ") {
template = "<a href = '" + "#Url.Action("QuickCheckSearch", "Customer")" + "?Account_Number=" + data.Account_Number+ "'>" + data.Account_Number+ "</a>";
}
return template;
}
</script>

Stop loading posts when no more exist

I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.

how to add a "next fieldset" button to an add/edit form for a Dexterity Plone type

I have a Dexterity type that has multiple fieldsets, and the built-in Javascript that allows showing one fieldset at a time when adding or editing is wonderful.
But I'd like to invite the user to walk through the fieldsets in sequence, so my ideal situation would not present the "Submit" button until the last fieldset was visible, instead presenting NEXT> or <PREV and NEXT> buttons until that last fieldset.
I gather that this is a behavior? But I'm at a bit of a loss as to how to add it and how to control it. I'm currently using the default EditForm, and I'd much prefer to just make a tiny tweak, but if it means dropping down to building the form myself, that's OK. I just need to know whether that's the only way to get this addition, which seems unlikely.
The fieldsets can be rigged up to add 'previous' and 'next' buttons with some extra JavaScript magic. Here's what I use in a current project:
var prevnext = {
formTabs: null,
next: function() { prevnext.formTabs.data('tabs').next(); prevnext._scrollToTop(); },
prev: function() { prevnext.formTabs.data('tabs').prev(); prevnext._scrollToTop(); },
_scrollToTop: function() {
$(window).scrollTop(prevnext.formTabs.closest('form').offset().top);
},
showButtons: function(event, index) {
var tabs = prevnext.formTabs.data('tabs'),
index = typeof(index) === 'undefined' ? tabs.getIndex() : index,
current = tabs.getTabs()[index],
count = tabs.getTabs().length;
$('#prevnext_previous').toggle(index !== 0);
$('#prevnext_next').toggle(index !== (count - 1));
$('.formControls:last :submit[name=form_submit]').toggle(index === )count - 1));
},
init: function() {
var tabs;
prevnext.formTabs = $('.formTabs');
tabs = prevnext.formTabs.data('tabs');
if (tabs.getTabs().length > 0) {
if ($('fieldset#fieldset-distribution').length === 0)
return;
$('.formControls:last :submit:first')
.before($('<input id="prevnext_previous" class="context" ' +
' type="button" value="" />')
.val('< Previous')
.click(prevnext.prev))
.before(document.createTextNode(' '));
$('.formControls:last :submit:first')
.before($('<input id="prevnext_next" class="context" ' +
' type="button" value="" />')
.val('Next >')
.click(prevnext.next))
.before(document.createTextNode(' '));
prevnext.showButtons();
tabs.onClick(prevnext.showButtons);
}
}
};
$(prevnext.init());

Resources