I'm running into an issue with JqueryUI autocomplete in which the span that is being returned is rendering as text in the drop down (as seen below).
I'm using Jquery Ui 1.8.17 and Jquery 1.6.4
The autocomplete function:
$('#search').autocomplete({
source: '/Search/AutoComplete',
html: true,
delay: 0
});
The browser is not loading the span into the DOM. The reason i assume is because it needs to HTML encode the text. Here is the markup. As you can see it isn't encoded.
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1"><span class="autocomplete cat">Cat</span></a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1"><span class="autocomplete carbon">Carbon</span></a>
</li>
I had read a few thing of an HTML extension but I didn't find anything concrete. Is this issue fixable with J Query or do I need to modify my source data?
the solution posted in Using HTML in jQuery UI autocomplete was the solution for this.
My JS ended up looking like:
$('#searchPhrase').autocomplete({
source: '/Search/AutoComplete',
html: true,
delay: 0,
minLength: 2
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
Related
I'm trying to make a navigation bar that has some CSS code for the current tab and it only works for the elements that don't have a page to load.
This is my HTML code:
<ul class="nav-menu" id="nav-menu">
<li>
<a class="current" href="home">Home</a>
</li>
<li>
Cars
</li>
<li>
T&C
</li>
<li>
Prices
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
And this is my jQuery code:
$('ul li a').click( function(){
if ( $(this).hasClass('current') ) {
$(this).removeClass('current');
} else {
$('li a.current').removeClass('current');
$(this).addClass('current');
}
});
As I mentioned above, for the last elements that have href="#" it works just fine, but when I press one that has a link, it just doesn't work.
Any suggestion is appreciated :)
When you click the href="home" or href="cars" ones, the browser follows the link, loading a completely new page. When you click ones that just have an anchor (href="#"), that's navigation within the page, so the page isn't reloaded.
To highlight those navigation entries when the home or cars page loads, you'll need to run code on those new pages that finds and highlights them once the DOM is loaded.¹
For instance, on the home page:
$("ul li a[href=home]").addClass("current");
¹ If you're targeting even semi-modern environments, you can have top-level code in a <script src="..." defer> tag. In modern environments, you can use <script type="module"> instead. In old environments, just put the script tag at the end of the body, just prior to </body>.
It's not entirely clear what you meant, but I think you need to disable the default link click behavior with event.preventDefault().
Declare event as an argument in the click function. Like this:
$('ul li a').click( function(event){
...
And write event.preventDefault() at the very beginning of the function.
Here is the complete code:
$('ul li a').click( function(event){
event.preventDefault();
if ( $(this).hasClass('current') ) {
$(this).removeClass('current');
} else {
$('li a.current').removeClass('current');
$(this).addClass('current');
}
});
I have a <li> element and I'm changing the css class of the <li> element upon click, using the ng-click (setting its controller highlighted holder variable) and ng-class (checking whether the <li> is highlighted in the controller and applying two types of classes for the true/false cases).
however I also need to change the class of the <a> which is a sub-element of the <li> based on the highlighting flag as I need a different text color.
do I create two ng-class tags for the <li> and the <a> inside of it and repeat the condition? or is there a better way?
I mean, it seems excessive to do this:
<li ng-click="navCtrl.setNav(1)" ng-class="{ 'nav_items_selected': navCtrl.isNavPage(1) , 'nav_items': !navCtrl.isNavPage(1) }"><a ng-class="{ 'nav_selected_a': navCtrl.isNavPage(1) , 'nav_a': !navCtrl.isNavPage(1) }" href="#">Dashboard</a></li>
You can use directive for changing the class of li and child a. I think its much better to use directive for handling DOM stuffs. it is also reusable for your future codes. documentation for directive: https://docs.angularjs.org/guide/directive
you can do something like this:
app.directive('changeClass', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.bind('click', function(event) {
var aChild = elem.children('a');
if(!elem.hasClass('active-li')){
elem.addClass('active-li');
aChild.addClass('active-link');
} else {
elem.removeClass('active-li');
aChild.removeClass('active-link');
}
});
}
}
}]);
html
<li change-class class="">
<a href="#" class="">
Dashboard
</a>
</li>
working demo here here
You can probably target your <a> in css without applying another class to it, since you've already done that to its <li> ancestor.
https://jsfiddle.net/tvbL877w/
Let's say you've got this css code:
.selected {
background-color: red;
}
.selected .some-child {
background-color: blue;
}
and your html is something like this:
<ul>
<li ng-class="{selected: myBoolean}">
Let's get some <a href="#" class="some-child" ng-click="myBoolean = !myBoolean" >CAKES!!!</a>
</li>
</ul>
When I write the following inside my <template>-tag, everything works fine:
<ul id="breadcrumbList" class="breadcrumb">
<li><a on-click="{{breadcrumbClick}}">{{overviewName}}</a></li>
</ul>
I dynamically generated a new <li>-element of the same structure, like this:
crumb = document.createElement("li");
crumb.innerHTML = '<a on-click="{{breadcrumbClick}}">'+category+'</a>';
But when I click this element, the event-handler isn't called.
The event-handler looks like this:
breadcrumbClick: function(event, detail, sender) {
/*reaction*/
}
I did not find any documentation about whether it's possible or impossible to use data binding for dynamically generated content.
This is possible with injectBoundHTML(). We haven't documented it yet, but you can see the method signature and demo here: https://github.com/Polymer/docs/issues/607
Example:
<li id="myli></li>
this.injectBoundHTML('<a on-click="{{breadcrumbClick}}">...</a>', this.$.myli);
Below code is for navigating to the Google Webpage when the element <li> is clicked.
<li onclick="window.location='http://www.google.com';" style="cursor:pointer;">Google</li>
Now I have another <li> which goes to different websites depending on a parameter. I tried this
<script>
document.write('<li onclick="window.location='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';" style="cursor:pointer;">Google</li>');
</script>
This isn't working fine. What am I doing wrong?
You don't want to use document.write. Instead you can change the attributes of the tags themselves. onClick is just javascript inside your code so you can replace variables
<li onclick="location.href='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';">Google</li>
It's a little messy. I'd personally do it with jQuery and a regular <a> tag
Javascript/jQuery
$(document).ready(function() {
$('#someid').click(function(e) {
e.preventDefault()
location.href= 'http://google.com/' + random_variable;
});
});
Or if your random variable is available onload you could just replace the href attribute
$(document).ready(function() {
$('#someid').attr('href','http://google.com/' + random_variable);
});
HTML
<li>Google</li>
var targetElement = document.getElementById("id");
targetElement.appendChild('<li>...</li>';
The first line find the existing element, where you want to insert the <li>.
The second line insert it.
I'd like to add tabindex to all form elements. The form is dynamic and I can't add it to the HTML. I would like to run it as a function.
If there are several radio buttons with the same name, each must have it's own tabindex value. Most of the form elements on page start as <input>, except <select>. How do I account for that?
I guess I will need to run a loop and add the attribute, right?
var n = 1;
$('input, select').each(function() {
$(this).attr('tabindex', n++);
});
Strange question, but yes that's the basic idea:
$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });
This uses :input to get everything including buttons and text areas. :not(:hidden) will just exclude the hidden inputs to avoid unnecessary tabs.
Might be better to avoid n++ to set different tabindex numbers.
Instead, try setting tabindex to 0:
$(':input:visible').each(function() {
$(this).attr('tabindex', '0');
});
tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.
~ developer.mozilla.org
The :input selector basically selects all form controls.
The :visible selector basically selects all elements that are visible.
or as suggested in the comments, if you have no other changes to apply to each visible input, then this should be enough:
$(':input:visible').attr('tabindex', '0');
Here, I described how can add aria-selected and tabindex value dynamically via jquery. I also want to see that how accessibility work with tablist, tab, and tabpanel role and how aria attributes work.Hope helps this code :
var $tabs = $('.tabs');
var $panels = $('.panel');
$tabs.on('click', 'a', function (e) {
e.preventDefault();
var id = $(this).attr('href');
// Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
'aria-selected': false,
'tabindex': -1
});
$(this).attr({
'aria-selected': true,
'tabindex': 0
});
});
Tab Wrapper:-
<ul class="tabs" role="tablist">
<li role="presentation">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 3</li>
</ul>
<div class="tab-panels">
<div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…</div>
<div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…</div>
<div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…</div>
</div>
One approach is to move an element higher in the DOM. The element at the top of the DOM tree will be focused first using Tabs as compared to lower ones.
For what's it's worth, I don't think you actually need to use an each loop here or even $(this).
jQuery is configured to execute functional arguments in place of plain values and runs the function once per loop, similarly to how an each loop would work.
You can read more on how that works in the official jQuery documentation here: .val( function )
So rather than using an each loop, you can accomplish the same effect using just this:
let n = 1;
$(':input:visible').attr('tabindex', function() { return n++; });
or if you're okay using the modern ES6 arrow function syntax—
let n = 1;
$(':input:visible').attr('tabindex', () => n++);
Using () => n++ instead of just n++ here allows jQuery to run the function for each instance's value rather than taking in the initial value of n++ and applying it to all matching elements.