Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Fabrice Treve
10,858 PointsShadowDOM 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
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
15,362 PointsDid 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
10,858 PointsNo 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
15,362 PointsHi 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
10,858 PointsAh 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
Rachelle Wood
15,362 PointsNo problem!
Jonathan Ankiewicz
17,901 PointsWhy use a shadow dom?