hide div depending on ajax response result

Question

I want to hide a div depending on the result of the response from an ajax call to my server. My server is responding with an object {available: yes/no} depending on the domain and username searched for. If the response if yes I want to maintain the div on the available column of my html and hide the corresponding div on the unavailable column and if the response is no hide the div on the available column and maintain the div visible on the unavailable column. My problem is attaching each response to the corresponding div. How could I do this?

html:

  <div id="searchresults">
                <div id="available">
                <h4><span class="username"></span><span class="positive-result">is available</span> as a username on:</h4>
                    <div class="facebook"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://www.facebook.com/"><i class="fa fa-facebook-square"></i>Facebook</a>
                    </div>
                    <div class="pinterest"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://www.pinterest.com/join/"><i class="fa fa-pinterest"></i>Pinterest</a>
                    </div>
                    <div class="twitter"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://twitter.com/signup"><i class="fa fa-twitter"></i>Twitter</a>
                    </div>
                    <div class="instagram"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="http://instagram.com/"><i class="fa fa-instagram"></i>Instagram</a>
                    </div>
                    <div class="github"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://github.com/join"><i class="fa fa-github"></i>GitHub</a>
                    </div>

                </div> <!--End of #available-->

                <div id="unavailable">
                    <h4><span class="username"></span><span class="negative-result">is not available</span>  as a username on:</h4>
                        <div class="facebook-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://www.facebook.com/"><i class="fa fa-facebook-square"></i>Facebook</a>
                        </div>
                        <div class="pinterest-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://www.pinterest.com/join/"><i class="fa fa-pinterest"></i>Pinterest</a>
                        </div>
                        <div class="twitter-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://twitter.com/signup"><i class="fa fa-twitter"></i>Twitter</a>
                        </div>
                        <div class="instagram-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="http://instagram.com/"><i class="fa fa-instagram"></i>Instagram</a>
                        </div>
                        <div class="github-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://github.com/join"><i class="fa fa-github"></i>GitHub</a>
                        </div>

                </div> <!--End of #unavailable-->

Javascript using jQuery

$(document).ready(function(){
  console.log("Ready!");

  var domains=[ ];
    domains.push($(".facebook").find("a").text());
    domains.push($(".github").find("a").text());
    domains.push($(".twitter").find("a").text());
    domains.push($(".instagram").find("a").text());
    domains.push($(".pinterest").find("a").text());
  // console.log(domains);


  $("#searchbutton").on('click', function(event){

    var username = $("#searchname").val().trim(); // store value from searchbox
    console.log(username);

    if(username === ""){
      event.preventDefault();
    }

    if(username){
      var newhtml = "<p>";
      newhtml += username;
      newhtml += "</p>";
      $(".username").html(newhtml);
      $(".username").remove("newhtml");

      var domainCheck = function(domainName){
        $.ajax({
          url: "/"+username,
          type: "get",
          data: {domainName: domainName, username: username},
          success: function(response){
            console.log(domainName);
            console.log(response.available);

//hide show logic here
                var elem = $("#available").find("div"); returns an array of divs for each search result
                console.log(elem); 

            }
        });
      };

      //send ajax request to server for each domain name to check for username availability
        var len = domains.length;
        for(var i = 0; i<len; i++){
          domainCheck(domains[i]);
          console.log(domains[i]+'\n');
        }
    }
  });
});

Answer 1

You can probably adapt this:

on document load -> condition -> show or hide. You would only need to edit 'if ($("#maincontent").width() < 600){'

 '$( document ).ready(function() {
 if ($("#maincontent").width() < 600){
        $( "#toolbarright").hide();
 } else { $("#toolbarright").show();}
 });'

http://jsfiddle.net/ablueman/vdgeLsgL/

Answer 2

Your response data type looks JSON, not simple text. So, first of all you should pass the correct dataType argumento to ajax call:

$.ajax({
      url: "/"+username,
      type: "get",
      data: {domainName: domainName, username: username},
      dataType: "json",
      [...]

then you can easily access the data inside your success() method as follows:

      success: function(response){
         if(response.available === "yes") {
             //show?
         } else if(response.available === "no") {
             //hide?
         } else {
             //wtf?
         }
      }