Ik loop tegen het volgende probleem aan in mijn applicatie.
Ik heb een formulier met daarin een invoerveld, die resultaten D.M.V AJAX ophaald zodra er op submit wordt geklikt.
Nu werkt dat prima, maar ik wil graag de resultaten in een Bootstrap dropdown lijst onder het invoerveld laten zien.
Het probleem zit hem in het moment dat ik de data-toggle="dropdown" attribuut op de button plaats, waardoor hij ineens niet meer reageert op de event handler.
Jquery:
$(document).ready(function(){
$('#search_video').on('submit',function( event ){
var str = $("#str").val();
$.ajax({
url: "ajax/searchVideosOnYT.php",
method: "post",
success: function(data){
alert(data);
},
error: function(data){
alert("fout!!!");
},
dataType: "json",
data: {SearchString: str}
});
return false;
});
});
formulier:
<form id="search_video" action="" method="POST">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search" name="str" id="str">
<span class="input-group-addon">
<button class="dropdown-toggle" data-toggle="dropdown" type="submit" value="search">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</form>
Weet iemand wat hier fout gaat? Dus zodra ik de data-toggle="dropdown" plaats, dan wordt de event handler niet meer gebruikt, en wordt er ook geen dropdown menu getoond.
Alvast bedankt.
