We Keep Coding

Modifying the value of a href attribute of an anchor element

I have a script that modifies the value of a href attribute of an anchor <a> element. It supposed only triggers below a certain browser window size for mobile development. Below is the script I'm currently working on.
JS - http://jsfiddle.net/eof8kpsj/1/
(function($){
'use strict';
var mobileMenuDrawer = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
$(this).closest('.mobile-menu-item').toggleClass('-active');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
// console.log($(this).attr('href'));
let currentUrl = $(this).attr('href');
if($(this).prop('href') != '#' + currentUrl) {
$(this).prop('href', '#' + currentUrl);
}
});
}
else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
$(this).removeAttr('#');
});
}
}
}
$(document).ready(function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
}
else {
mobileMenuDrawer.clear();
}
addHash.init();
});
$(window).on('resize', function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
addHash.init();
}
else {
mobileMenuDrawer.clear();
}
});
})(jQuery)
This logic right here basically modifies the href attribute value on an anchor <a> element. It only adds a hash to the existing href value. The only problem is whenever I try resizing it keeps firing the logic or event. I've already added a condition to the check value if it has a hash contained within the href attribute but the problem still persists.
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
// console.log($(this).attr('href'));
let currentUrl = $(this).attr('href');
if($(this).prop('href') != '#' + currentUrl) {
$(this).prop('href', '#' + currentUrl);
}
});
}
else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
$(this).removeAttr('#');
});
}
}
}

Here you go with the solution
(function($){
'use strict';
var mobileMenuDrawer = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item > .link').off('click').on('click', function() {
$(this).closest('.mobile-menu-item').toggleClass('-active');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
var addHash = {
init : function() {
if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
let currentUrl = $(this).attr('href');
if(currentUrl.indexOf('#') === -1) {
$(this).prop('href', '#' + currentUrl);
}
});
} else {
$('.primary-mobile-menu .mobile-menu-item > .link').each(function() {
let currentUrl = $(this).attr('href');
currentUrl = currentUrl.replace('#', '');
$(this).attr('href', currentUrl);
});
}
}
}
$(document).ready(function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
} else {
mobileMenuDrawer.clear();
}
addHash.init();
});
$(window).on('resize', function() {
if ($(window).outerWidth() <= 1024) {
mobileMenuDrawer.init();
addHash.init();
} else {
mobileMenuDrawer.clear();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="region-primary-menu primary-mobile-menu">
<li class="mobile-menu-item">
Link
</li>
<li class="mobile-menu-item">
Link
</li>
<li class="mobile-menu-item">
Link
</li>
</ul>
Hope this will help you

How to display all child elements in JQuery/Javascript?

I am trying to display multiple child elements in jQuery but only the first child element gets displayed. I can force the browser to show all of them through Inspect and changing the css display from none to block. Can anyone help me find the problem in my code.I use Radio buttons, this is the code :
<script type="text/javascript">
$(document).ready(function () {
$('##radioButtonListSectionId input[type="radio"]
[checked="checked"]').each(function () {
ShowRadioButtonListDependentField(this, false);
});
});
$('##radioButtonListSectionId input[type="radio"]').change(function
() {
var result = $(this).val();
$('##uniqueID-hidden').val(result);
ShowRadioButtonListDependentField(this, false);
});
function ShowRadioButtonListDependentField(element, show) {
debugger;
var fieldKey = $(element).val(), children;
var currentId = element.attributes["currentid"].value;
if (currentId != 0) {
if ($('.main-dialogbox.modal.fade.in').length > 0)
children = $('.modal-body .control-group[parentid=' +
currentId + ']');
else if ($('.idea-task.open').length > 0)
children = $('.idea-task .control-group[parentid=' +
currentId + ']');
else
children = $('.control-group[parentid=' + currentId +
']');
if ($(element).is(":checked") && $(element).is(":visible"))
show = true;
else
show = false;
children.hide();
children.each(function () {
var keys =
this.attributes["parentOptionKey"].value.split("</br>");
var haschildren = this.attributes["haschildren"].value;
for (var i = 0; i < keys.length; i++) {
if (keys[i] == fieldKey) {
if (show) {
$(this).show();
show = false;
$(this.getElementsByClassName("ishidden")).val("False");
} else {
$(this).hide();
$(this.getElementsByClassName("ishidden")).val("True");
if (haschildren.toLowerCase() == "true") {
ShowCheckListDependentField(this,
false);
}
}
}
else {
$(this.getElementsByClassName("ishidden")).val("True");
}
}
});
}
}
</script>

how to display "no result found" list search in jquery?

this is work fine..any idea about how to display "no result found"..
Here my code http://jsfiddle.net/UI_Designer/8p426fog/4/
$(".my-textbox").keyup(function() {
var val = $(this).val().toLowerCase()
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide()
} else {
$(this).show();
}
});
});
Thank You..

More elegant and the simplest way it to add extra variable and add <div class="no-results" style="display:none">no results found</div> into DOM, and then toggle visibility of the block jsFiddle
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});

Use the below code for no result found.
$(".my-textbox").keyup(function() {
var val = $(this).val();
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
$(".personsMenu").html("<ul><li><label> NO RESULT FOUND!</label></li></ul>");
}
else {
$(this).show();
}
});
});
Hope this fullfill your requirement.

Row count error after filter(with if statement)

I have this jsfiddle which hide and show the according to keyword input (#search-criteria). Most are working fine but there is this bug which I am not sure where it is coming from (even after looking at console.log).
Problem:
when search result should be "0", it shows as "1"
example A: keyword="apple", search result="2"
example B: keyword="applee", search result="0"
example C: keyword="appleee", search result="1" *this should be "0", and there is no row showing but it counts "1"!?
NOTE: I append a new row when search is not found but remove it later.
$("#search-criteria").on("keyup", function () {
var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
}).toLowerCase();
var row = "table#table-body tbody>tr";
if (keyword !== "") {
$(row).each(function () {
var td_word = $(this).text().toLowerCase();
var srowCount = $(row).filter(":visible").length;
//shorthand if function
$(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
document.getElementById('count').innerHTML = srowCount;
console.log(srowCount);
if (srowCount === 0) {
$("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
$("tr.s_empty").show();
} else {
$("tr.s_empty").remove();
}
});
} else {
$(row).show();
document.getElementById('count').innerHTML = $(row).length;
}
});
Thank you in advance.

Working fine
//search function
$("#search-criteria").on("keyup", function () {
var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
}).toLowerCase();
var row = "table#table-body tbody>tr";
if (keyword !== "") {
$(row).each(function () {
var td_word = $(this).text().toLowerCase();
//shorthand if function
$(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
});
var srowCount = $(row).filter(":visible").length;
document.getElementById('count').innerHTML = srowCount;
if (srowCount === 0) {
if(!$(row).last().hasClass('s_empty'))
{
$("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
}
$("tr.s_empty").show();
} else {
$("tr.s_empty").remove();
}
} else {
$("tr.s_empty").remove();
$(row).show();
document.getElementById('count').innerHTML = $(row).length;
}
});

Problem is that you are taking rowCount first and then you are doing show hide, try this
$("#search-criteria").on("keyup", function () {
var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
}).toLowerCase();
var row = "table#table-body tbody>tr";
if (keyword !== "") {
$(row).each(function () {
var td_word = $(this).text().toLowerCase();
var srowCount;
//shorthand if function
$(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
srowCount = $(row).filter(":visible").length;
document.getElementById('count').innerHTML = srowCount;
console.log(srowCount);
if (srowCount === 0) {
$("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5">Search not found</td></tr>');
$("tr.s_empty").show();
} else {
$("tr.s_empty").remove();
}
});
} else {
$(row).show();
document.getElementById('count').innerHTML = $(row).length;
}
});

Too much recursion Error in jQuery-1.7.2,is jquery error?

too much recursion error occur when i execute autocomplete.js today.Before today i never see like this error in jquery when i execute autocomplete.js. i am using jQuery 1.7.2
$(function(){
$("#search_text").keyup(function(e){
var sVal = $(this).val();
if(e.which == 27) {
$('#sresult_container').remove();
return;
}
if(e.which != 40 && e.which != 38) {
$("#search").removeAttr('disabled');
$.post('http://localhost/website/index.php/search/ajaxResults',{Search:sVal},function(data){
if(data != "$$$" && data.length != 0) {
var sData = data;
var flag1 = 0;
var flag2 = 0;
var tabindex = -1;
var aFarray = sData.split('$$$');
$('#sresult_container').remove();
var $sresult_container = $('<div id="sresult_container"></div>')
.css({'position':'absolute','border':'1px solid','background-color':'white','z-index':'10000000','width':'309px'});
for(var i=0;i<aFarray.length;i++) {
var a = aFarray[i].split('|||');
if(i == 0 && a[0] != "") {
flag1 = 1;
$pages = $('<div id="pages"></div>');
$text1 = $('<p></p>').css({'background-color':'silver','text-align':'center','padding':'3px'}).text("Pages");
$pages.append($text1);
if(a.length > 5) {
a = a.slice(0,5);
}
for(var j=1;j<a.length+1;j++) {
tabindex++;
$('<div>/div>').css({'padding':'5px','text-align':'center'}).text(a[j-1]).attr({'tabindex':tabindex,'class':'result'}).appendTo($pages);
}
}
if(i == 1 && a[0] != "") {
flag2 = 1;
$articles = $('<div id="articles"></div>');
$text2 = $("<p></p>").css({'background-color':'silver','text-align':'center','padding':'3px'}).text("Articles");
$articles.append($text2);
if(a.length > 5) {
a = a.slice(0,5);
}
for(var j=0;j<a.length;j++) {
tabindex++;
$('<div></div>').css({'padding':'5px','text-align':'center'}).text(a[j]).attr({'tabindex':tabindex,'class':'result'}).appendTo($articles);
}
}
}
if(flag1 == 0)
{
$articles.children().first().remove();
$div = $sresult_container.append($articles);
}else if(flag2 == 0)
{
$pages.children().first().remove();
$div = $sresult_container.append($pages);
}else
{
$div = $sresult_container.append($pages,$articles);
}
tabindex++;
$allresluts = $('<div id="allresults"></div>').css({'padding':'5px','text-align':'center','background-color':'#FBEE92','color':'#CC3333'}).text("See All Results").attr('tabindex',tabindex).appendTo($div);
var bottom = $('#search_text').offset();
var height = $('#search_text').outerHeight();
var left = bottom.left;
var top = bottom.top+height;
$div.offset({'top':top,'left':left});
$('body').append($div);
}
else
{
$('#sresult_container').remove();
$("#search").attr('disabled','true');
}
});
}
else
{
$con_div = $('#sresult_container').children().children('div').add($('#sresult_container').children().last());
var tabindex = $con_div.length - 1;
if(e.which == 40)
{
$con_div.first().addClass("selected").focus();
var index = $con_div.first().index(this)+1;
$con_div.bind({
keydown: function(e) {
e.preventDefault();
var key = e.keyCode;
var target = $(e.target);
switch(key) {
case 38: // arrow up
if(index == 0)
{
index = tabindex+1;
}
$con_div[--index].focus();
break;
case 40: // arrow down
if(index > tabindex-1)
{
index = -1;
}
$con_div[++index].focus();
break;
case 13: //Enter
if(target.hasClass('result') == true)
{
$("#search_text").val(target.text());
$("#search").focus();
}
else
{
$('#search').click();
}
$div.remove();
break;
case 27://Esc
$div.remove();
$("#search_text").focus();
break;
}
},
focusin: function(e) {
$(e.currentTarget).addClass("selected");
},
focusout: function(e) {
$con_div.removeClass("selected");
$(e.currentTarget).removeClass("selected");
}
});
}
}
setTimeout(function()
{
$con_div = $('#sresult_container').children().children('div').add($('#sresult_container').children().last());
$con_div.live({
click : function(e){
var $target = $(e.target);
if($target.hasClass('result') == true)
{
$("#search_text").val($target.text());
$("#search").focus();
}
else
{
$('#search').click();
}
$('#sresult_container').remove();
},
mouseover : function(e){
var $target = $(e.target);
if($target.hasClass('result') == true || $target.is('#allresults'))
{
$(e.target).css('cursor','pointer');
$con_div.removeClass("selected");
$(e.target).addClass("selected");
}
},
mouseout : function(){
$con_div.removeClass("selected");
}
});
}, 200 );
});
$("#search_text").blur(function(e){
$con_div = $('#sresult_container').children().children('div').add($('#sresult_container').children().last());
if($con_div.hasClass('selected') != true)
{
$("#sresult_container").remove();
}
});
});
I got error in $('#search').click(); inside the code.