Search box, can not click on result 'a' element - javascript

I made an search box that use ajax like this :
$(document).ready(function(){
$('.search-box input[type="search"]').on("keyup", function() {
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $("div.dropdown-menu");
if( inputVal.length) {
$.get("/ajax/search/users", {term: inputVal} ).done( function( data ) {
resultDropdown.empty();
const users = jQuery.parseJSON(data);
users.forEach(element => {
$slug = element['slug'];
resultDropdown.append("<a class='dropdown-item' href='/" + $slug + "'></a>")
});
resultDropdown.dropdown('toggle');
});
} else {
resultDropdown.empty();
resultDropdown.removeClass('show');
}
});
});
but when I try to 'click' on my 'a' that doesn't change my windows.location to the href.
<div class="dropdown show">
<div class="dropdown-menu overflow-auto show" aria-expanded="true">
<a class="dropdown-item" href="/accounttest-1"></a>
<a class="dropdown-item" href="/accounttest-2"></a>
</div>
</div>

Related

Setting and unsetting active class in bootstrap pagination

I have this bit of Javascript that handles clicks on my navbar. It is working for the most part the disable style is being applied where it should be the previous next, first, and last buttons all take you to the correct page. For some reason the same technique applied to the active style is not working. Ideally I never want any buttons to show as active except the current page button. Whichever button I click shows as active though and the current page doesn't get the active style unless you click on it. Any help on the correct syntax to set and unset active on my Navbar buttons would be appreciated.
var current_page;
var total_pages;
function fnPage_click(multiplyer) {
//make all buttons inactive and enabled
for (var i = 0; i < total_pages; i++)
$('#li' + i).removeClass("active");
$('#li.prev').removeClass("active");
$('#li.prev').removeClass("disabled");
$('#li.next').removeClass("active");
$('#li.next').removeClass("disabled");
$('#li.first').removeClass("active");
$('#li.last').removeClass("active");
$.ajax({
url: '/Home/Browsing?' + multiplyer,
type: 'POST',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$("#divLocGrid").html(result);
current_page = multiplyer;
switch (current_page) {
case 1: {
//Previous is disabled/inactive, First is inactive, the current_page is active
$("#li.prev").removeClass("active").addClass("disabled");
$("li.first").removeClass("active");
$('#li' + current_page).addClass("active");
break;
}
case total_pages: {
//Next is disabled/inactive, Last is inactive, the current_page is active
$('#li.next').removeClass("active").addClass("disabled");
$("li.last").removeClass("active");
$('#li' + current_page).addClass("active");
break;
}
default: {
//Previous and Next are enabled but inactive the current_page is active
$('#li.prev').removeClass("active");
$('#li.next').removeClass("active");
$('li' + current_page).addClass("active");
break;
}
}
},
async: true,
processData: false
});
}
function fnPrevNxt(strDir) {
var multiplyer;
if (strDir == 'Nxt') {
multiplyer = current_page + 1;
if (multiplyer > total_pages) {
$('#li.next').removeClass("active").addClass("disabled");
return;
}
}
else {
multiplyer = current_page - 1;
if (multiplyer < 1) {
$('#li.prev').removeClass("active").addClass("disabled");
return;
}
}
fnPage_click(multiplyer);
}
function fnOnNavBtnsLoad(model) {
total_pages = model;
fnPage_click(1);
}
<body onload="fnOnNavBtnsLoad(#Model)">
<div id="dvNavBtns">
<nav class="navbar navbar-expand-lg bg-gray-light navbar-dark" aria-label="Locations pages">
<ul id="ulNavBtns" class="pagination">
<li id="li.first" class="page-item">
First
</li>
<li id="li.prev" class="page-item">
<a href="javascript:void(0)" id="btnPrev" aria-label="<<" class="page-link" onclick="fnPrevNxt('Prev')">
<span aria-hidden="true">«</span>
</a>
</li>
#{int pages = Model;
int num = 0;
while (num < pages)
{
num++;
<li id="li" +#(num) class="page-item">
<a href="javascript:void(0)" aria-label=#num class="page-link" onclick="fnPage_click(#(num))">
#(num)
</a>
</li>
}
}
<li id="li.next" class="page-item">
<a href="javascript:void(0)" id="btnNxt" aria-label=">>" class="page-link" onclick="fnPrevNxt('Nxt')">
<span aria-hidden="true">»</span>
</a>
</li>
<li id="li.last" class="page-item">
Last
</li>
</ul>
</nav>
</div>
Its kind of convoluted but this is the syntax that finally worked for me. I had to go through the document.context.all collection of elements to find the element then add or remove from the classList collection of the element.
$(document).context.all['li.id'].classList.add("classname");
$(document).context.all['li.id'].classList.remove("classname");

Losing context in callback when invoked the second time backbone

The following code works, but I think there's room for improvement. The index check is there because after the first element is removed the next element looks like it has an index of -1, but is actually the previously removed element. Then it iterates again and finds the clicked element and removes it. BUT since the index is -1 on the first go around the wrong group gets deleted.
How do I keep the zombie elements from being iterated on more efficiently? This is in a backbone view with an in page confirmation.Thanks.
EDIT: To add HTML
Group section always has a default group that shouldn't be deleted.
<div class="section-border-top--grey js-favorite-group">
<h4 class="expandable__cta cta--std-teal js-expand-trigger"><span class="icon icon-plus--teal expandable__cta-icon"></span>All Doctors</h4>
<div class="expandable__content js-favorite-doctor-row-container" aria-expanded="true">
<div class="location-section dr-profile">
<div class="section__content js-doctor-row">
<div class="favorite-doctor-manage__row">
DR info
</div>
</div><!--/section__content-->
</div><!--/location-section-->
</div><!--/expandable__content-->
Tag section to remove groups
<div class="js-favorite-doctor-manage-add-remove">
<div class="grid-construct">
<div class="expandable" data-controller="expandable">
<ul class="tag-list js-group-list" tabindex="-1">
<li class="tag tag--teal" >
Lauren's Doctors
<ul class="tag-sub">
<li><button class="tag-icon tag-icon--close-white js-group-remove">Remove group: Lauren's Doctors</button></li>
</ul>
</li>
<li class="tag tag--teal" >
Timmy's Doctors
<ul class="tag-sub">
<li><button class="tag-icon tag-icon--close-white js-group-remove">Remove group: Timmy's Doctors</button></li>
</ul>
</li>
</ul>
</div>
removeGroup: function( evt ) {
var deleteGroup = function() {
if ( $(evt.currentTarget).closest('.tag').hasClass('is-active')){
var clickedTag = $(evt.currentTarget).closest('.tag');
var groupList = this.$el.find('.js-group-list');
var groupTags = groupList.find('.tag');
var index = groupTags.index(clickedTag);
var groupSections = $('.js-favorite-group');
// add one to account for "All" section which is never removed
var groupToRemove = groupSections.eq(index + 1);
console.log(groupToRemove);
var removedGroupName = this.getGroupNameForSection(groupToRemove);
var allDoctors = groupSections.eq(0);
var allDoctorsContainer = allDoctors.find('.js-favorite-doctor-row-container');
if ( index > -1 ){
groupToRemove.find('.js-favorite-doctor-row').appendTo(allDoctorsContainer);
clickedTag.remove();
groupToRemove.remove();
this.updateSectionDropdowns();
this.ariaAlert('Group ' + removedGroupName + ' removed');
this.hideConfirm(evt);
}
}
};
this.showAlert(evt, deleteGroup);
},
showAlert: function (evt, callback) {
that = this;
var clickedTag = '';
clickedTag = $(evt.currentTarget).closest('.tag');
clickedTag.addClass('is-active').attr('data-delete','true');
$('.delete-acct-message').show().focus();
$('.js-remove-yes').on('click', function(evt){
evt.preventDefault();
callback.apply(that);
});
$('.js-remove-no').on('click', function(evt){
evt.preventDefault();
this.hideConfirm(evt);
});
},
I would suggest that you should use custom attributes in your html, this will simplify your javascript logic and make it more effective and efficient.
I have modified your html and javascript to add the support for custom attribute data-doc-group. Have a look at your group sections div here
<div data-doc-group="lauren" class="section-border-top--grey js-favorite-group">
<h4 class="expandable__cta cta--std-teal js-expand-trigger"><span class="icon icon-plus--teal expandable__cta-icon"></span>Lauren's Doctors</h4>
<div class="expandable__content js-favorite-doctor-row-container" aria-expanded="true">
<div class="location-section dr-profile">
<div class="section__content js-doctor-row">
<div class="favorite-doctor-manage__row">
DR info
</div>
</div><!--/section__content-->
</div><!--/location-section-->
</div>
Here are the tags with custom attributes
<li data-doc-group="lauren" class="tag tag--teal">
Lauren's Doctors
<ul class="tag-sub">
<li><button class="tag-icon tag-icon--close-white js-group-remove">Remove group: Lauren's Doctors</button></li>
</ul>
</li>
<li data-doc-group="timmy" class="tag tag--teal">
Timmy's Doctors
<ul class="tag-sub">
<li><button class="tag-icon tag-icon--close-white js-group-remove">Remove group: Timmy's Doctors</button></li>
</ul>
</li>
Here is the javascript to handle this, (this may be a bit buggy, but will give you a general idea)
removeGroup: function(evt) {
this.showAlert(evt, function() {
var $clickedTag = $(evt.currentTarget).closest('.tag'),
dataGroupName,
$groupToRemove,
removedGroupName,
$allDoctors = $('.js-favorite-group').eq(0),
$allDoctorsContainer = $allDoctors.find('.js-favorite-doctor-row-container');
if ($clickedTag.hasClass('is-active')){
dataGroupName = $clickedTag.data('doc-group');
$groupToRemove = $allDoctors.siblings('[data-doc-group="' + docGroupName + '"]');
if ($groupToRemove.length > 0){
$groupToRemove.find('.js-favorite-doctor-row').appendTo($allDoctorsContainer);
$clickedTag.remove();
$groupToRemove.remove();
removedGroupName = this.getGroupNameForSection($groupToRemove);
this.updateSectionDropdowns();
this.ariaAlert('Group ' + removedGroupName + ' removed');
this.hideConfirm(evt);
}
}
});
}

HTML5 Session Storage for list

How would I define sessionStorage for a dropdown list? I have the following, but I get "someTitle is not defined"
Not sure what I'm doing wrong.
Javascript
function save_page(form) {
if (supports_html5_storage()) {
var title = $('.btn-group-month ul li > a').attr('title');
sessionStorage.setItem("someTitle", title);
}
}
function load_page(form) {
if (supports_html5_storage()) {
var title = sessionStorage.getItem("someTitle");
$('.btn-group-month ul li > a').attr('title', title);
}
}
html
<div class="btn-group btn-group-month">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Month</span>
</button>
<ul class="dropdown-menu dropdown-menu-month">
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
</div>
fiddle
In the code, you are reading the incorrect data. This:
var title = $('.btn-group-month ul li > a').attr('title');
will read the title attribute for the first link in the list. But that's not the value that you want. That value will always be "January" and it will corrupt the values of the rest of the list (as specified by metal03326 in the comments).
What you want to read (and set) is the value of the first span in the button, as that is the selected value. To do that, you need to change the selector a little:
var title = $('.btn-group-month button > span:first()').text();
That will read the selected value correctly. Now to set it again when the new page loads, you need to modify that span too:
var title = sessionStorage.getItem("someTitle");
if (title) {
$('.btn-group-month button > span:first()').text(title);
}
You can see the whole code here, but it won't work as it doesn't support sessionStorage while on sandbox mode. So you can see it working on this JSFiddle too.
function supports_html5_storage() {
try {
return 'sessionStorage' in window && window['sessionStorage'] !== null;
} catch (e) {
return false;
}
}
function save_page(form) {
if (supports_html5_storage()) {
var storage = window.sessionStorage;
// AM - new selector
var title = $('.btn-group-month button > span:first()').text();
sessionStorage.setItem("someTitle", title);
form.filter(':input').each(function(ind,elem) {
if (elem.name && elem.value) {
storage.setItem(elem.name,elem.value);
}
else {
//storage.someTitle=$('ul.dropdown-menu-month li').find('a').attr('title');
}
});
} else {
alert("HTML5 storage not available");
}
}
function load_page(form)
{
if (supports_html5_storage()) {
var title = sessionStorage.getItem("someTitle");
// AM - new selector
if (title) {
$('.btn-group-month button > span:first()').text(title);
}
var storage = window.sessionStorage;
form.filter(':input').each(function(ind,elem) {
if (elem.name) {
$('.edit-image-container img.img-verify').attr('src',storage.galleryImg);
elem.value = storage.getItem(elem.name);
} else {
//
}
});
}
}
// Enable dropdown to display chosen value
$('.dropdown-menu li').click(function(){
var elementVal = $(this).text();
$(this).closest('.input-append').find('#appendedInputButton').val(elementVal);
});
// Dropdown picker
$('.dropdown-menu').on( 'click', 'li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
// AM - Save form
save_page($("form"));
return false;
});
// AM - Load form
load_page($("form"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="btn-group btn-group-month">
<button type="button" name="dropdownval" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Month</span><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-month" name="month">
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
</div>
</form>

dynamically create items in drop down list in bootstrap

Small part of my html code :
<div class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Platforms <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id = "buttonsPlace">
</ul>
</div>
In my js file :
for (i = 0; i < platformList.length; i++) {
var li = $("<li/>" , { id : "plat"+i,class : "dropdown" text : platformList[i] } )
//var text = document.createTextNode(platformList[i]);
//li.appendChild(text);
//btn.data("platform", platformList[i] );
$("#buttonsPlace").append(li);
console.log("hiding");
$("#plat" + i).hide();
}
However the menu is appearing but the menu items are not. where am i going wrong
Try This
$(function() {
var change = function( txt ) {
$("#ID").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
Demo
For Li Click
$("ul").on('click', 'li', function () {
var id = this.id;
//play with the id
});
$(function(){
$('.dropdown-toggle').click(function(){
var countRows = $('ul.dropdown-menu li').size();
$('.dropdown-menu').append('<li>Row '+countRows+'</li>');
countRows++;
});
});
Here is the jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/
$('#drowdown-link1').click(function(e){
e.preventDefault();
window.location.href = 'http://example.com';
});
Here is another jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/4/

Toggling button classes and text

I am trying to change text and icons with jquery. When you click at the button it changes, but when you click the button again it struggles. The icon and the text does not change back to default.
Code behind
string box = "<div class=\"alter-Wrp\"> <div class=\"alert alert-danger {0}\">{1}</div></div>";
if(count > 0)
litAlert.Text += String.Format(box);
asp.page
<button class="btn btn-dangerr btn-lg" type="button"><span class="glyphicon glyphicon-bell beee"></span>
<span class="text">Show Alarm</span> </button>
<asp:Literal ID="litAlert" runat="server"></asp:Literal>
Jquery
$('.btn-dangerr').click( function(e) {
var tgl = $('.btn-dangerr');
var box2 = $('.alter-Wrp');
var icon = $('.glyphicon');
var text = $('.text');
var toggleClass = '.beee';
icon.addClass('glyphicon-bell');
text.text('Show Alarm');
box2.slideToggle(function (){
if (tgl.hasClass(toggleClass)) {
icon.removeClass('glyphicon-bell').addClass('glyphicon-fire');
text.text('Hide Alarm');
} else {
e.preventDefault();
}
$('.btn-dangerr').toggleClass(toggleClass);
});
});
http://jsfiddle.net/w8Yjz/25/
Pretty sure this is what you're trying to do:
$('.btn-dangerr').click(function (e) {
$('.alter-Wrp').slideToggle();
$('.beee').toggleClass('glyphicon-bell glyphicon-fire');
if ($('.beee').hasClass('glyphicon-fire')) {
$('.text').text('Hide Alarm');
} else {
$('.text').text('Show Alarm');
}
});
Fiddle

Categories

Resources