JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Fabrice Treve
Fabrice Treve
10,858 Points

ShadowDOM for "cancel button"

Hi, I'm French sorry for my english, i would like to reach the "cancel button in the shadow dom to make the same effect as when we delete the text in the search box;

how to do that (in order to make things correctly) ?

Thank's

my code -->

$(document).ready(function() {

$('form').submit(function(evt) { evt.preventDefault();

// the AJAX part

var $submitButton = $("#submit");
var $searchText = $('#search');

$("#search").on( "click keyup", function() {
    if($searchText.val() === ""){

$("#photos").empty(); } });

$searchText.prop("disabled", true);
$submitButton.attr("disabled", true).val("Searching..");

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var flickrOptions = {
  tags: $searchText.val(),
  format: "json"
};

function displayPhotos(data) {
    //condition to display blank object

    if($.isEmptyObject(data.items) === false) {

  var photoHTML = '<ul>';

  $.each(data.items,function(i,photo) {
    photoHTML += '<li class="grid-25 tablet-grid-50">';
    photoHTML += '<a href="' + photo.link + '" class="image">';
    photoHTML += '<img src="' + photo.media.m + '"></a></li>';
  }); // end each
  photoHTML += '</ul>';
  $('#photos').html(photoHTML);
    $searchText.prop("disabled", false);
    $submitButton.attr("disabled", false).val("Search");

} else {

    $searchText.prop("disabled", false);
    $submitButton.attr("disabled", false).val("Search");
    $("#photos").html('<p> The Search for "' + $searchText.val() + '" has not performed anything. Please Enter something new.');

}
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);

}); // end submit

}); // end ready

6 Answers

Fabrice Treve
Fabrice Treve
10,858 Points
$(document).ready(function() {



$('form').submit(function(evt) {
    evt.preventDefault();

    // the AJAX part

    var $submitButton = $("#submit");
    var $searchText = $('#search');

    $("#search").on( "click keyup", function() {
        if($searchText.val() === ""){
  $("#photos").empty();
        }
}); 

    $searchText.prop("disabled", true);
    $submitButton.attr("disabled", true).val("Searching..");

    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var flickrOptions = {
      tags: $searchText.val(),
      format: "json"
    };

    function displayPhotos(data) {
        //condition to display blank object

        if($.isEmptyObject(data.items) === false) {

      var photoHTML = '<ul>';

      $.each(data.items,function(i,photo) {
        photoHTML += '<li class="grid-25 tablet-grid-50">';
        photoHTML += '<a href="' + photo.link + '" class="image">';
        photoHTML += '<img src="' + photo.media.m + '"></a></li>';
      }); // end each
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
        $searchText.prop("disabled", false);
        $submitButton.attr("disabled", false).val("Search");

    } else {

        $searchText.prop("disabled", false);
        $submitButton.attr("disabled", false).val("Search");
        $("#photos").html('<p> The Search for "' + $searchText.val() + '" has not performed anything. Please Enter something new.');

    }
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);


  }); // end submit

}); // end ready
Rachelle Wood
Rachelle Wood
15,361 Points

Did you figure it out or do you still need help ? C'est bon ou est-ce que tu as toujours besoin d'un coup de main pour ce challenge ?

Fabrice Treve
Fabrice Treve
10,858 Points

No i just put the second code because the first was hard to read, do you have a solution to reach the rounded cross who appears when we type a word in the form ?

thank's

Rachelle Wood
Rachelle Wood
15,361 Points

Hi again Fabrice. The little x in the search when you start to type a word is actually there automatically when you set the input field type to "search" in the HTML file. It looks like this occurs in both Chrome and Firefox. Are you using one of these browsers? If you switch to Explorer or Safari, you might not see it. Check out the following link:

http://www.alsacreations.com/tuto/lire/1406-formulaire-html5-type-search.html

Maybe you can change its default appearance through webkit and changing the appearance to textfield? I admit I have not tried it myself. Good luck in any case!

Re-bonjour Fabrice. La petite croix apparaît dès que tu commences à taper dans le champs de recherche car ce dernier porte l'attribut du type "search". Apparemment c'est un style automatique qui dépend entièrement de ton navigateur : la croix est visible avec Firefox et Chrome mais pas avec Safari, Opera, etc. Le lien que j'ai affiché ci-dessus l'explique assez bien à mon avis.

Tu peux peut-être arriver à la modifier avec le code figurant sur Alsacreations ? J'avoue que je n'ai pas essayé de la faire virer ou quoique ce soit. Bon courage en tout cas !

Fabrice Treve
Fabrice Treve
10,858 Points

Ah Ok (merci) c'est dommage, j'aurais bien voulu en cliquant dessus, modifier le DOM;

je m'y recollerais plus tard je suis passé à autre chose en ayant passé une journée dessus :)

Merci