JQuery even handler werkt niet meer na plaatsen dropdown attribuut

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior, Medior and Junior SAP HANA Developer

Vacature details Vakgebied: Software/IT Opleiding: Medior Werklocatie: Veldhoven Vacature ID: 12696 Introductie Our client is the world's leading provider of lithography systems for the semiconductor industry, manufacturing complex machines that are critical to the production of integrated circuits or chips. Our purpose is “unlocking the potential of people and society by pushing technology to new limits”. We do this guided by the principles “Challenge”, “Collaborate” and “Care”. Wat verwachten we van jou? SAP Certified Application Associate - SAP HANA Cloud Modeling (training and/or certification) Bachelor degree or higher Excellent understanding of SAP HANA (2.0 / Cloud), Data Modelling and writing

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

28/03/2024 22:35:46
 
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.