How to change page content based on user input?
Question
[Conceptually speaking] What I've done so far: A user will type in a word: let's say "dog." After clicking the "submit" button, the page will pop out a table of dog pictures and information about each dog.
What I am hoping to do: If the user decides to search for another animal, let's say "cat", I want my dog pictures to be all removed and basically start from fresh again.
Is this something that can be done in a few lines? This is not part of my project assignment but I did notice when testing my site that I can only search once. After that, I think it calls on everything again and seems to create more columns (but you don't see them because not enough space).
I'm thinking if I can check if my div class="results-playlist" is empty, then somehow I can use .empty() or .remove() to start over again.
Here is a snippet (it doesn't work because it's only to show sorta an outline of my code)
$(document).ready( if ($()) // Query the soundcloud API when clicking the search button $('#searchButton').on('click', function() { var input = $('#input').val(); $('#input').val(''); callAPI(input); $('.results-playlist').append( '<div class="column" id="resultsContainer"><h2>Search Results</h2><div id="results-list"></div></div><div class="column" id="playlistContainer"><h2>My Playlist</h2><div id="play-list"></div></div>'); }));
<head> <title>HW 04 Advanced Javascrip and JQuery</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img id="main-logo" src="assets/soundcloud.png"> </header> <section class="search"> <input type="text" id="input" placeholder="Search for a song or artist"> <button id="searchButton">Search</button> </section> <section> <div class="results-playlist"> </div> </section> </body> <!-- <script type="text/javascript" src=“http://code.jquery.com/jquery-1.7.2.js“></script> --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="startercode_HW4_skeleton.js"> </script> <script type=“text/javascript” src=“http://stratus.sc/stratus.js“></script>
Sorry if this question is asking in an unconventional way! I'm basically interested in learning how search engines can renew the search based on every new user input and model a very basic version of that here if it's relatively simple. Thank you!
1 answers
solution1
2 ACCPTED 2018-02-22 09:36:46
As you said, just use .empty() .
$('#searchButton').on('click', function() {
var input = $('#input').val();
$('#input').val('');
callAPI(input);
$('.results-playlist').empty().append(
'<div class="column" id="resultsContainer"><h2>Search Results</h2><div id="results-list"></div></div><div class="column" id="playlistContainer"><h2>My Playlist</h2><div id="play-list"></div></div>');
}));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.