I have a search input #submit
, once an ISBN is submitted a div fades in below showing the results (from Google Books Api). I then have a button 'Add to Library' #add
- this successfully adds the info into my db via Ajax and fades out the div, all good so far.
However when I input another ISBN and click #submit - nothing appears. The div is still hidden (or faded out). How can I make the div 'reset' to it's default setting after it has faded-out? I have to manually refresh the page each time I want to search.
I am most likely doing something very silly as I am new to JS, however any help/direction is much appreciated. I have been looking at the jQuery fadeToggle() Method - is this correct?
My Code
$(document).ready(function() {
$('#submit').click(function(ev) {
ev.preventDefault();
$.getJSON(url,function(data){
$("#add").prop('disabled', false);
$.each(data.items, function(entryIndex, entry){
var html = '<div class="results well">';
html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';
html += '<hr><button id="add" name="add">add to library</button>';
$(html).hide().appendTo(".result").fadeIn(1000);
$('#add').click(function(ev) {
ev.preventDefault();
$.ajax({
type: 'POST',
url: 'addIsbnScript.php',
data: {
'isbn' : isbn,
'title' : entry.volumeInfo.title
},
success: function () { //when form has been submitted successfully do below
$('.result').fadeOut(1000); //fade out the results div
}//end success function
});//end ajax
});//end add button funct
});//end of each function
});//end getJSON
});// end submit.click
});//end