JavaScript namespaces that include jQuery

Question

Ok so the comma fixed it! Thanks! I have one more question. My jQuery seems to be breaking. Everything else works. When I put the jQuery inside of my SUBCAT it breaks. I am pretty sure this is a syntax error. Here is the code with the jQuery.

<!DOCTYPE html>
    <html>
    <head>    
        <meta charset="UTF-8">
        <title>For the love of cats and JavaScript</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <input id="filter" class="" name="filter" type="text"  value="coffeePreference" onfocus="if (this.value == 'MYCATSPACE.SUBCAT.coffeePreference') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
        <input id="filter2" class="" name="filter2" type="text"  value="breed" onfocus="if (this.value == 'breed') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
        <div id="catTable"></div>
        <script>

            var MYCATSPACE = MYCATSPACE || {};
            var sortCountry;
            var sortBreed;
            var sortCoffee;

            $('input').keyup(function(e) {
                var timeout;
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    criteria = this.value;
                    $.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats(cats, criteria);});
                }.bind(this), 185);
            });

            $("#filter2").keyup(function(e) {
                var timeout;
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    criteria = this.value;
                    $.getJSON('cats.json', function(cats){MYCATSPACE.SUBCAT.filterCats2(cats, criteria);});
                }.bind(this), 185);
            }); 
                MYCATSPACE.SUBCAT = {


                renderData: function(cats){
                    var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
                    output+="<thead>"
                    output+="<tr>";
                    output+="<th> HeadShot </th>";
                    output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedBreedData()'>Breed</button></th>";
                    output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCountryData()'>Country</button></th>";
                    output+="<th><button onclick='MYCATSPACE.SUBCAT.getSortedCoffeeData()'>CoffeePreference</button></th>";
                    output+="</tr>";
                    output+="</thead>"

                    for (var i in cats) {
                        output+="<tbody>" 

                        output+="<tr>";
                        output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
                        output+="<td>" + cats[i].breed + "</td>"
                        output+="<td>" + cats[i].country + "</td>"
                        output+="<td>" + cats[i].coffeePreference + "</td>"
                        output+="</tr>";
                        output+="</tbody>" 

                    }
                    output+="</table>";
                    document.getElementById("catTable").innerHTML=output;
                },     

                getData: function(){       
                    $.getJSON('cats.json', function(cats) {
                        var cats = cats;
                        MYCATSPACE.SUBCAT.renderData(cats);    
                    });
                },

                getSortedCountryData: function(){  
                    $.getJSON('cats.json', function(cats) {
                        var cats = cats;
                        if (sortCountry!=true)
                            MYCATSPACE.SUBCAT.sortData(cats,'country',1);
                        else 
                            MYCATSPACE.SUBCAT.sortData(cats,'country',-1);
                            sortCountry ^= true;   
                    });
                },            

                getSortedBreedData: function(){  
                    $.getJSON('cats.json', function(cats) {
                        var cats = cats;
                        if (sortCountry!=true)
                            MYCATSPACE.SUBCAT.sortData(cats,'breed',1);
                        else 
                            MYCATSPACE.SUBCAT.sortData(cats,'breed',-1);
                            sortCountry ^= true;   
                    });
                },

                getSortedCoffeeData: function(){  
                    $.getJSON('cats.json', function(cats) {
                        var cats = cats;
                        if (sortCountry!=true)
                            MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',1);
                        else 
                            MYCATSPACE.SUBCAT.sortData(cats,'coffeePreference',-1);
                            sortCountry ^= true;   
                    });
                },

                sortData: function(cats, element, direction){
                    switch(element) {
                        case 'breed':
                        var sortedData = cats.sort(function(a,b){return (a.breed < b.breed) ? -1*direction : 1*direction;});
                        MYCATSPACE.SUBCAT.renderData(cats);
                        break;
                        case 'country':
                        var sortedData = cats.sort(function(a,b){return (a.country < b.country) ? -1*direction : 1*direction;});
                        MYCATSPACE.SUBCAT.renderData(cats);
                        break;
                        case 'coffeePreference':
                        var sortedData = cats.sort(function(a,b){return (a.coffeePreference < b.coffeePreference) ? -1*direction : 1*direction;});
                        MYCATSPACE.SUBCAT.renderData(cats);
                        default:
                        MYCATSPACE.SUBCAT.renderData(cats);
                    }

                },

                filterCats: function(cats, criteria){
                    //var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});   
                    var filteredData = cats.filter(function(c){return c.coffeePreference.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});    
                    MYCATSPACE.SUBCAT.renderData(cats);
                },

                filterCats2: function(cats, criteria){
                    //var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});   
                    var filteredData = cats.filter(function(d){return d.breed.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});    
                    MYCATSPACE.SUBCAT.renderData(cats);
                }

            }  

            MYCATSPACE.SUBCAT.getData();

        </script>
    </body>
    </html>

Stryner · Accepted Answer · 2015-08-21 13:34:09Z

2

You're missing a comma in your object. If you show the barebones of your object it becomes apparent:

MYCATSPACE.SUBCAT = {
    renderData: function(cats) {
       // Code...
    }, // <- Missing comma

    getData: function() {
       // Code...
    }
}

answered Aug 21, 2015 at 13:34

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

00robinette Over a year ago

Hi, thanks! I have one more question about adding jQuery to a namespace. I revised code above.

Stryner Over a year ago

@00robinette If you have another question, you should post it as a new question. Modifying an existing question to ask a different question is generally considered bad practice. I would suggest undo-ing your previous edit and posting a new question.

Stryner Over a year ago

@00robinette No worries, we're all new here once!

invernomuto · Accepted Answer · 2015-08-21 13:33:58Z

You have only to correct a missing ',', in the following example I have escluded your ajax call and its work as expected

var MYCATSPACE = MYCATSPACE || {};
              MYCATSPACE.SUBCAT = {
                renderData: function (cats) {
                  
                  var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
                  output+="<thead>"
                  output+="<tr>";
                  output+="<th> HeadShot </th>";
                  output+="<th><button onclick='getSortedBreedData()'>Breed</button></th>";
                  output+="<th><button onclick='getSortedCountryData()'>Country</button></th>";
                  output+="<th><button onclick='getSortedCoffeeData()'>CoffeePreference</button></th>";
                  output+="</tr>";
                  output+="</thead>"

                  for (var i in cats) {
                    output+="<tbody>" 

                    output+="<tr>";
                    output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
                    output+="<td>" + cats[i].breed + "</td>"
                    output+="<td>" + cats[i].country + "</td>"
                    output+="<td>" + cats[i].coffeePreference + "</td>"
                    output+="</tr>";
                    output+="</tbody>" 

                  }
                  output+="</table>";
                  document.getElementById("catTable").innerHTML=output;
                },  // MISSING COMMA HERE   

                getData: function(){       
                  //$.getJSON('cats.json', function(cats) {
                  //  var cats = cats;
                  var cats = [{ picture: '', breed: 'apple', country: 'ITA', coffeePreference: 'pip' }];
                  MYCATSPACE.SUBCAT.renderData(cats);    
                  //}
                  //);
                }, 


              }  

              MYCATSPACE.SUBCAT.getData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" class="" name="filter" type="text"  value="coffeePreference" onfocus="if (this.value == 'coffeePreference') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
            <input id="filter2" class="" name="filter2" type="text"  value="breed" onfocus="if (this.value == 'breed') {this.value = '';}" onblur="if (this.value == '') " /></br></br>
<div id="catTable"></div>

isn't there a comma too many this time, at the end of getData?

Collectives™ on Stack Overflow

JavaScript namespaces that include jQuery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related