JQuery Checkbox Filter not working and no error message

Hello!
I am using JQuery to create a checkbox filter to filter job data by type (i.e. full time, part time, contract). I have no error message and I am new to JQuery, so I am not sure how to troubleshoot this. Here is what the page looks like: https://codeduchess.github.io/ I am trying to meet a deadline so any guidance would be greatly appreciated!! Here is my code:

HTML:

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Github Jobs API</title>
  <a href="http://href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet"></a>
  <link rel="stylesheet" type="text/css" href="style.css">
       
   <!--JQUERY CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                                             
 </head>
<body> 
                                                                                                          
                                                         
  <!-- Search bar -->
  <div class="wrap">
    <div class="search"><br>
      <input id ="userInput" type="text" class="searchTerm" placeholder="Keywords, Title, Career"/>
      <button type="submit" class="searchButton">
           <i class="fa fa-search"></i>
     </button>
    </div>
  </div><br>
                                  
                                  
   <!-- CHECKBOXES FOR JOB TYPE -->
     <h3>Advanced Filters:</h3>
                                 
    <div>                           
       <input type="checkbox" id= "cbFT" class= "checkbox" value="Full Time Jobs" data-bind="checked: filters" />Full Time Jobs<br/>
       <input type="checkbox" id= "cbPT" class= "checkbox"  value="Part Time Jobs" data-bind="checked: filters" />Part Time Jobs<br/>
       <input type="checkbox" id= "cbCT" class= "checkbox"  value="Contract Jobs" data-bind="checked: filters" />Contract Jobs<br/>
    </div>                                                                                                         
                                                                                                           
      
                           
<!-- DIV FOR CARD DISPLAY -->
      <div id="root"></div>
      <script src="scripts.js"></script>
                              
                              
   </body>
</html>

JavaScript/JQuery:

// USED STRICT MODE TO SOLVE: “UNCAUGHT SYNTAX ERROR: UNEXPECTED TOKEN U IN JSON @ POSITION 0”
'use strict';

var apiData="";
const app = document.getElementById('root');
const container1 = document.createElement('div');
container1.setAttribute('class', 'container1');
app.appendChild(container1);
var request = new XMLHttpRequest();

//GET REQUEST WITH USE OF HEROKU AS A PROXY TO SOLVE CORS ERROR
request.open('GET','https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&location=united+states&page=1&count=20', 
true);

request.onload = function () {  
//CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE
    var apiData = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        apiData.forEach(job => {
        const card = document.createElement('div');
        card.setAttribute('class', 'card');

      // render relevant data: job title, job type, location and description      
        const h1 = document.createElement('h1');
        h1.textContent = job.title;
            
        const h3 = document.createElement('h3');
        h3.textContent = job.type;
            
        const h4 = document.createElement('h4');
        h4.textContent = job.location;   
            
        const p = document.createElement('p');
        job.description = job.description.substring(0, 300);
        p.textContent = `${job.description}...`;
            
        container1.appendChild(card);
        card.appendChild(h1);
        card.appendChild(h3);    
        card.appendChild(h4);      
        card.appendChild(p);
            
        });

  // ERROR HANDLING
    } else {
        const errorMessage = document.createElement('marquee');
        errorMessage.textContent = `It's not working!`;
        app.appendChild(errorMessage);
    }
}


// FILTER BY JOB TITLE

var button = document.querySelector("button");
var userInput = document.getElementById("userInput");
button.addEventListener('click', showResults);
userInput.addEventListener("keyup", function(e){
  if (e.keyCode === 13){
    showResults();
  }
})

function showResults(){
  var searchKeyword = userInput.value.toLowerCase();
  var cards = document.getElementsByClassName("card"); //this is an array
  var regex = new RegExp(searchKeyword, "g");

  for (var i=0; i<cards.length ; i++){
    if (cards[i].textContent.toLowerCase().match(regex)){
      cards[i].style.display = "block";
    } else{
      cards[i].style.display= "none";
    }
  }
}

// FILTER BY JOB TYPE USING JQUERY
$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.checkbox >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.checkbox >div[jobs=' + this.id + ']').show();
        });
    } else {
        $('.checkbox >div').show();

    }
});



request.send();

I am not sure if this is the right place to ask for this kind of help. You are probably getting paid for solving these kind of issues or at least you are gaining a new sparkling point in your résumé.


First of all, if you are working with JavaScript and libraries written in JavaScript please invest few hours in learning how to debug JavaScript. This will be really helpful for you in the future, trust me :slight_smile:


Problems in your code are not related to jQuery. This is basic HTML and CSS (yes, really), you should read few articles about attributes in the HTML and about CSS selectors, let me explain.

From your code I assume that you want to filter out some div elements based on their jobs attribute, but this attribute is never defined, this is part of your rendered page:

<div class="card">
    <h1>Analytics Engineering Manager, Apple Media Products</h1>
    <h3>Full Time</h3>
    <h4>San Francisco, CA</h4>
    <p>Job Summary:
Apple is looking for a talented, passionate and driven engineering manager to lead a Popularity/Charts and Podcast Analytics Team for Apple Media Products in San Francisco. You will be part of the Apple Media Products Analytics Engineering group. Alongside other talented engineers in t...</p>
</div>

you see? jobs attribute is not there. You should do something like this:

const card = document.createElement('div');
if (job.type === "Full Time") {
    card.setAttribute('jobs', 'cbFT');
} else if (job.type === "Contract") {
    card.setAttribute('jobs', 'cbCT');
} else {
    card.setAttribute('jobs', 'cbPT');
}
card.setAttribute('class', 'card');

Is this complete and correct? I don’t know, you should check the GitHub API docs. So when you run your code now you have something like this:

<div jobs="cbFT" class="card">
    <h1>Sr. Associate, Data Scientist, NLP, Financial Services</h1>
    <h3>Full Time</h3>
    <h4>New York</h4>
    <p>Innovate. Collaborate. Shine. Lighthouse - KPMG's Center of Excellence for Advanced Analytics - has both applied data science, AI, and big data architecture capabilities. Here, you'll work with a diverse team of sophisticated data and analytics professionals to explore the solutions for clients in a...</p>
</div>

Much better, right? Now we can select the elements that should be filtered (or not).


Ok, this CSS selector:

$('.checkbox >div[jobs=' + this.id + ']')

is wrong. You want to select div elements with attribute jobs set to id of checkbox that are children of elements with class checkbox… what? :smiley: Here you should simply select all the div elements that have attribute jobs set to this.id, that is all.

This code does nothing:

else {
    $('.checkbox >div').show();
}

because this selector selects nothing. You can delete this.


So now, the best part. You wrote a logic (with errors, but I know what you wanted to do) that shows elements based on the selected checkboxes. So you used show method… but you never hided these elements, so this does not change anything.


Corrected code -> https://repl.it/@factoradic/EcstaticWorkRegression


There is still a lot to improve. This code is not good. If you would like to work on it a bit more let me know, but after the deadline, this will be studying, not working.