We Keep Coding

How to fix Javascript no longer working after converting to core 2.2

I convert an application from Core 1.1 to 2.2. Now some of my JS is not working
After conversion I noticed that my columns were no longer sorting when I clicked on them. I added some JS code and now it works. This is when I found that there was a custom JS lib with the sorting code in there but it no longer worked.
I also found that the filtering (client side) is not working.
I converted the code following the instructions in https://learn.microsoft.com/en-us/aspnet/core/migration/1x-to-2x/?view=aspnetcore-1.1
Here is the JS script to perform the filtering.
(function ($) {
$.fn.appgrid = function appgrid() {
function configureFilter() {
$("[data-update-departments]").on("change", function () {
var triggerControl = $(this);
var connectedControl = $(triggerControl.data("update-departments"));
if (!connectedControl.data("default")) {
connectedControl.data("default", connectedControl.children());
}
var triggerValue = triggerControl.find(":selected").val();
if (triggerValue) {
$.getJSON("/ManageNomination/GetDepartments?company=" + triggerValue, function (data) {
if (data) {
connectedControl.children().remove();
connectedControl.append('<option value=""></option>');
for (var i = 0; i < data.length; i++) {
connectedControl.append('<option value="' + data[i] + '">' + data[i] + '</option>');
}
connectedControl.removeAttr("disabled");
}
});
} else {
connectedControl.children().remove();
connectedControl.attr("disabled", "disabled");
}
})
$("#applyFilter").on("click", function () {
filter = $.extend({}, defaultFilter);
$("[id^=filter-]").each(function () {
var control = $(this);
var controlId = control.attr("id").substr(7);
if (this.type === "text" || this.type === "date") {
filter[controlId] = control.val();
} else if (this.type === "select-one") {
filter[controlId] = control.find(":selected").val();
}
});
localStorage.setItem('filter', JSON.stringify(filter));
refreshData();
$("#filter-applied-message").show();
});
$(".clearFilter").on("click", function () {
filter = $.extend({}, defaultFilter);
localStorage.removeItem('filter');
localStorage.removeItem('currentPage');
refreshData();
$("#filter-applied-message").hide();
setFilterControlValues();
});
setFilterControlValues();
}
function setFilterControlValues() {
// repopulate the filter fields with the saved filter values
$("[id^=filter-]").each(function () {
var control = $(this);
var controlId = control.attr("id").substr(7);
control.val(filter[controlId] || defaultFilter[controlId] || "");
if (this.type === "select-one" && control.data("update-departments")) {
if (control.find(":selected").val()) {
// control is a connected dropdown and has a selected value
$(control.data("update-departments")).removeAttr("disabled");
} else {
$(control.data("update-departments")).attr("disabled", "disabled");
}
}
// open the filter panel automatically
//$(".filterPanel").collapse("show");
});
}
So the dropdowns for the filtering are populated but when I select a value to filter on, nothing happens.
TIA
HaYen

Solution for Javascript Multi-tasked Buttons Not Working Correctly in CodePen

I created, with some help, some javascript code to enable multiple operations to be accomplished when I press some buttons in my web app. It is working perfectly with the solution provided at the following link: One of Multiple Tasks Operated by Button Won't Execute provided by brk), but it is not working when I import the code into my CodePen text editor. There are three buttons, "online, offline, and all, which are upon being pressed, supposed to
switch the blue screen to black
hide the text that says, "PRESS BUTTONS BELOW"
hide the blinking --:-- symbol
However, when I press the "online", "offline", and "all" buttons, it almost seems as if nothing happens, because there is a short delay. Why does this delay happen? Also, the blinking --:-- symbol doesn't terminate blinking as it should...can you tell me why this is? Thanks so much in advance for the help!
See CodePen link here: https://codepen.io/IDCoder/pen/mXMqGV
Here is my javascript code:
var twitchTvStreamers;
var loaded = false;
$(document).ready(function(){
//GET TWITCH TV STREAMERS' STATUS AND API CALL
twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
});
//filter online offline and all
var filterchannel = filterch => {
if(!loaded)
{
for(channel of twitchTvStreamers){
getChannelInfo(channel, filterch);
}
}
else
{
setTimeout(function(){
$('.display-output-here div').each(function(idx, item) {
if($(item).hasClass(filterch))
{
$(item).show();
}
else
{
$(item).hide();
}
});
}, 100);
}
if(!loaded)
{
for(channel of twitchTvStreamers){
getChannelInfo(channel, filterch);
}
}
{
setTimeout(function(){
$('.text1 div').each(function(idx, item) {
if($(item).hasClass(filterch))
{
$(item).hide();
}
});
}, 100);
}
};//end of var filterChannel
$('button').click(function(e) {
filterchannel(e.target.id);
})
var getChannelInfo = (channel, filterch) => {
loaded = true;
$.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
.done(function(info) {
console.log(channel);
if (info.stream === null) {
appendInfo(channel,'offline',filterch);
}
else {
appendInfo(channel,'online', filterch);
}
});
}
var appendInfo = (channel,target, filterch) => {
$.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
.done( function(ch){
channelID = ch.display_name;
channelLogo = ch.logo;
channelUrl = ch.url;
streamContent = ch.content;
$('.display-output-here').append('<div class="' + target + ' all">'+channel+' is '+target);
if(twitchTvStreamers[twitchTvStreamers.length - 1] === channel) {
filterchannel(filterch);
}
});
//BUTTONS OPERATIONS (ALL BUTTONS TARGETED BY USING CLASS THEY COME UNDER)
$(".user-status").on('click', function() {
$(".text1").hide();
$(".text2").hide(function() {
clearInterval(x);
});
$('.display-output-here').css("background", "black");
$('.TV-screen').css("background", "black");
});
var element = $(".text2");
var shown = true;
var x = setInterval(toggle, 500);
function toggle() {
if (shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
}
//make part of video-screen text blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
//share-links code:
$('.Linkedinbutton').click(function() {
var shareurl = $(this).data('shareurl');
window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://codepen.io/IDCoder/full/mXMqGV/' + escape(shareurl) + '&title=' + document.title + '&source=SourceTitle&target=new');
return false;
});
//Facebook
var facebookShare = document.querySelector('[data-js="Facebookbutton"]');
facebookShare.onclick = function(e) {
e.preventDefault();
var facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
if(facebookWindow.focus) { facebookWindow.focus(); }
return false;
}
/*
//user status button operations
*/
//search bar operation
$("#searchStreamers").on("keypress",function(e){
var typeStreamer = $('input').val();
if(e.which===13){
$('input').submit(function(e){
e.preventDefault();
});
}
});

Make Vue aware of data changed using jQuery

I've made a little script that appends some 'a' tags to a 'div', in order to enable the user to select the right value from a fixed list (too many options, so options will appear after user has written 3 letters or more).
I have a hidden field that is updated with the ID the user chose from the list.
I'm adding an onclick event with jQuery.
My problem is that Vue isn't aware of the values jQuery sets for the hidden fields, and I'm not sure how to fix it.
Code below:
$('#form_product').on("click", ".choiceOptions a-participant", function (e) {
var id = $(this).data("id"),
participant = $(this).data("participant"),
inputId = $(this).data("visualcontainer"),
$visualInput = $('#' + inputId);
// Set values for the shown input and the hidden input
$visualInput.siblings('input').val(id);
$visualInput.val(participant);
// Stop showing the participants
$visualInput.siblings('div').css('display', 'none');
})
vm = Vue.component('input-participant', {
template: '#input_participant',
props: ['id', 'label', 'value', 'maxlength', 'required', 'readonly'],
methods: {
findParticipants: function (visualId) {
var visualContainer = $('#' + visualId);
var value = visualContainer.val();
var list = visualContainer.siblings('div');
if (value.length > 0 && value.length < 3) {
list.html('<div>Keep typing...</div>');
this.toggleParticipants(true, visualId);
}
else if (value.length > 2) {
this.toggleParticipants(true, visualId);
list.html('<div>Loading...</div>');
this.$http.get(hazaar.url('api', 'participantLookup') + '?name=' + value
).then(function (response) {
list.html('');
$.each(response.data, function (key, value) {
list.append('<a-participant data-id="' + value.data.id + '" data-participant="' + value.data.participantName + '" data-visualcontainer="' + visualId + '">' + value.data.participantName + '</a-participant>');
});
});
}
else {
this.toggleParticipants(false, visualId);
}
},
toggleParticipants: function (doShow, visualId) {
var $visualInputOptionsContainer = $('#' + visualId).siblings('div');
if (doShow) {
if ($('#' + visualId).val().length > 0) {
$visualInputOptionsContainer.css('display', 'block');
}
}
else {
// A bit of a hacky way to do it, but it seems to work fine so far.
window.setTimeout(function () {
$visualInputOptionsContainer.css('display', 'none');
}, 150);
}
}
}
});

var vm = new Vue({
el:"#form_product"},
data:{
list:[]
})，
$(el).click（
function（）｛
vm.list=[]
})
For example, if you need to dynamic change the image here, you can use vue's proxy instead of jQuery.
<div id="page" #click="proxyImage">
</div>
script
var vm = new Vue({
el: '#page',
data: {
topic: {}
},
method: {
proxyImage: function (e) {
if (e.target.tagName.toUpperCase() === 'IMG') {
// do something
}
}
}
});

jQuery filter select options by text input

I have a select list where I want to filter the options from a text input.
I wrote this jQuery code:
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if (e.text().indexOf(filterText) != -1) {
e.show();
console.log("show");
} else {
e.hide();
console.log("hide");
}
});
});
However I get the error Uncaught TypeError: e.text is not a function. I get into the each loop so there should be some option for e.
What am I doing wrong?

You must use the current value in a jQuery object to have access to the .text() method. Try:
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if ($(this).text().indexOf(filterText) != -1) {
$(this).show();
console.log("show");
} else {
$(this).hide();
console.log("hide");
}
});
});

Try to change your selector within loop :-
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if ($(e).text().indexOf(filterText) != -1) {
$(e).show();
console.log("show");
} else {
$(e).hide();
console.log("hide");
}
});
});
It may help you.

You need object variable, but accessing event variable. So please use this one
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
$(this).text()
if ($(this).text().indexOf(filterText) != -1) {
$(this).show();
console.log("show");
} else {
$(this).hide();
console.log("hide");
}
});
});

jQuery .hide(), then .show() based on text input

Using a jQuery filter example I found. Here is my live example. Here is the CodePen, (also the Fiddle if you don't like CodePen).
After typing something in the input, the boxes do realign and the numbers dissapear. However, when you delete the text you inputted, the numbers do not reappear unless you refresh the page. I tried messing around with the code below but wasn't having any luck. Thanks for you help!
$('#sortable').change(
function(){
if ($(this).val().length) {
$('#number').hide();
}
else {
$('#number').show();
}
});

Try this out:- http://jsfiddle.net/adiioo7/nYYBU/10/
JS:-
(function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function listFilter(header, list) {
var form = $("<form>").attr({
"class": "filterform",
"action": "#"
}),
input = $("<input>").attr({
"class": "filterinput",
"type": "text",
});
$(form).append(input).appendTo(header);
$(input).change(function () {
var list = $("#sortable");
var filter = $(this).val();
console.log(filter.length);
if (filter.length > 0) {
$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(".number").hide();
$(".numberstwo").hide();
} else {
console.log($(".number"));
$(".number").show();
$(".numberstwo").show();
$(list).find("a").parent().slideDown();
}
return false;
}).keyup(function () {
$(this).change();
});
}
$(function () {
listFilter($("#header"), $("#sortable"));
});
}(jQuery));

Here's updated js...
Checkout Demo Fiddle
(function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function listFilter(header, list) {
var form = $("<form>").attr({
"class": "filterform",
"action": "#"
}),
input = $("<input>").attr({
"class": "filterinput",
"type": "text",
});
$(form).append(input).appendTo(header);
$(input).change(function () {
var filter = $(this).val();
if (filter) {
$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(list).find("a:Contains(" + filter + ")").parent().slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
}).keyup(function () {
$(this).change();
if ($(this).val().length) {
$('.number').hide();
} else {
$('.number').show();
}
});
}
$(function () {
listFilter($("#header"), $("#sortable"));
});
}(jQuery));

To check the entered text I normally use keyup.
Change is not triggered when the user types something but when he types and exits the box.

$('#sortable').blur(function(){
var len = $(this).val().length;
if (len) {
$('#number').hide();
}
else {
$('#number').show();
}