JQuery even handler werkt niet meer na plaatsen dropdown attribuut

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

Bekijk vacature »

Henk de Vries

Henk de Vries

23/08/2015 17:32:32
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
            });
        });


formulier:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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
 
PHP hulp

PHP hulp

11/12/2018 18:11:27
 
DavY -

DavY -

23/08/2015 17:51:13
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('#search_video').on('submit',function( event ){


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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 -
 
Henk de Vries

Henk de Vries

23/08/2015 18:56:28
Quote Anchor link
bedankt Davy, hierdoor wordt in ieder geval wel de event handler getriggerd. Nu is alleen het probleem dat ik het dropdown menu niet aan de praat kan krijgen

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
 
Wouter J

Wouter J

23/08/2015 19:11:34
Quote Anchor link
Ik zal proberen uit te leggen wat er hier nou gebeurd: Twitter Bootstrap luistert naar het click event op de submit button. De functie die dan aangeroepen wordt bevat return false. Dit is gelijk aan event.preventDefault() en event.stopPropagation().

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).
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.