JQuery even handler werkt niet meer na plaatsen dropdown attribuut
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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;
});
});
$('#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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
<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.
Gewijzigd op 23/08/2015 17:33:02 door Henk de Vries
Code (php)
1
$('#search_video').on('submit',function( event ){
Code (php)
1
$('button[data-toggle]').on('click',function( event ){
Zo uit mn hoofd, maar niet getest tuurlijk, dus ik ben er niet zeker van of het goed is.
Zie ook: http://lucisferre.net/2012/08/19/three-useful-jquery-event-binding-tips/
Gewijzigd op 23/08/2015 17:52:02 door DavY -
Toevoeging op 23/08/2015 19:08:02:
ik heb het al voor elkaar kunnen krijgen door $(".dropdown-menu").dropdown('toggle'); the gebruiken. nogmaals bedankt
De eerste betekend dat het standaard gedrag, in dit geval het verzenden van het formulier, wordt gestopt. Dit betekend dat jouw listener op form.on('submit') niet aangeroepen wordt.
Wanneer jij nu jouw listener op het click event van de submit button koppelt, zal jouw functie eerder aangeroepen worden dan de functie van bootstrap (heeft met volgorde van de javascripts te maken). Ook jouw functie bevat return false. Het probleem hier is dat deze ook event.stopPropagation() aanroept, dit betekend dat alle volgende listeners voor de click op de submit button niet meer worden uitgevoerd.
Dus, de listener van twitter bootstrap om te "toggelen" wordt niet meer uitgevoerd.
De oplossing is dat jij return false weghaalt en daarvoor in de plaatst alleen event.preventDefault() aanroept (wat precies is wat jij wilt, jij wilt niet dat het formulier verzonden wordt, maar de andere listeners mogen gewoon uitgevoerd worden).