On my search books page, I have implemented a feature where clicking the search tab displays results based on the search criteria in the adjacent block. However, I have noticed that when I click it a second time, it does not work as expected.
Below is the relevant HTML code of the page:
<form action="#" method="post" ng-controller = "OptionsController as oCtrl">
<select class="selectpicker btn btn-default" name="SearchCriteria" id ="sOptions">
<option value="1">Title</option>
<option value="2">Author</option>
</select>
<label class="searchbox">
<span><br></span>
<textarea id="searchBox" name="searchBox" value="" type="text" autocomplete="on" placeholder="search books"></textarea>
</label>
<input type="button" value="Search" id = "bsearch" class="submit button" ui-sref = ".searchResults">
</form>
<div id = "spaceforresults" ui-view = "" autoscroll="false"> </div>
This is how my AngularJS routing is set up:
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('books.searchResults', {
url: '',
templateUrl: 'html/searchResults.html',
controller: 'BookController',
});
After clicking the search button and getting the initial results, if I modify the options and click the search button again, the view is not updating with new results. Any ideas on what might be going wrong here?