[ajax] Event om te kijken of form is ge-submit werkt niet - Softwareontwikkeling

woensdag 29 maart 2017 13:37

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

Goedendag,

Ik loop nu al twee dagen vast op het volgende punt:
Ik wil graag via ajax mensen laten inloggen. De ajax doet een oproep naar een php file die de gegevens allemaal checkt. Toen ik hiermee klaar was kwam ik erachter dat hij helemaal geen actie onderneemt.

Nu ben ik verder gaan uitzoeken waardoor dit komt. Ik heb dus een aparte html bestand gemaakt met een simpele alert om te kijken of hij de actie überhaupt wel uitvoer, En tot mijn verbazing kreeg ik dus geen alert.

Wat doe ik fout

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/docs.min.css" rel="stylesheet">
<script href="js/bootstrap-3.3.7.min.js" rel="stylesheet"> </script>
<script href="js/jquery-3.2.0.min.js" rel="stylesheet"></script>

<script type="text/javascript">
$('userloginform').on('submit', function(e) {
e.preventDefault():
alert("test");
});
</script>

<form id="userloginform" method="post">
<input type="submit" name="login_use_input" id="login_use_input" >
</form>

Ik maak gebruik van Bootstrap 3.3 en van jquery 3.2.0

woensdag 29 maart 2017 13:40

Acties:

+1 Henk 'm!

S_tef

Wat is userloginform in je submit event? Een class, id...?
$('#userloginform').on('submit', function(e) {
Zo zal die wel werken.

woensdag 29 maart 2017 13:42

Acties:

+1 Henk 'm!

CH4OS

It's a kind of magic

userloginform is geen tag in HTML(5). Als dat een class is, zet er dan een . voor, is het een id, zet er dan een # voor.

JavaScript:

<script type="text/javascript">
$('.userloginform').on('submit', function(e) {
e.preventDefault():
alert("test");
});
// Of dus
$('#userloginform').on('submit', function(e) {
e.preventDefault():
alert("test");
});
</script>

woensdag 29 maart 2017 13:44

Acties:

+1 Henk 'm!

Devilly

Bovenstaande antwoorden kloppen, maar je moet ook even een puntkomma maken van je dubbelepunt achter preventDefault. Werkend voorbeeld: https://jsfiddle.net/mfceya2g/.

[ Voor 4% gewijzigd door Devilly op 29-03-2017 13:45 ]

woensdag 29 maart 2017 13:48

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

Devilly schreef op woensdag 29 maart 2017 @ 13:44:
Bovenstaande antwoorden kloppen, maar je moet ook even een puntkomma maken van je dubbelepunt achter preventDefault. Werkend voorbeeld: https://jsfiddle.net/mfceya2g/.

Ik denk dat er iets anders aan de hand is. Heb de door jou gemaakte/aangepaste code nu gekopieerd en in mn html file geplakt. En tot mijn verbazing werkt het zelfs nu niet....

Vraag mij echt af wat ik dan fout doe (heb het ook getest in andere browsers)

[ Voor 3% gewijzigd door Jboy1991 op 29-03-2017 13:53 ]

woensdag 29 maart 2017 13:53

Acties:

0 Henk 'm!

mstx

Jboy1991 schreef op woensdag 29 maart 2017 @ 13:48:
[...]

Ik denk dat er iets anders aan de hand is. Heb de door jou gemaakte/aangepaste code nu gekopieerd en in mn html file geplakt. En tot mijn verbazing werkt het zelfs nu niet....

Vraag mij echt af wat ik dan fout doe

Waarschijnlijk plak je de javascript net zoals in de OP boven de html (zonder $(window).ready()), en dan wordt het event dus gebind op het moment dat de html nog niet is gerenderd waardoor hij het element niet kan vinden. Maar dat is een gokje omdat we je broncode niet kunnen zien.

woensdag 29 maart 2017 13:58

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

mstx schreef op woensdag 29 maart 2017 @ 13:53:
[...]

Waarschijnlijk plak je de javascript net zoals in de OP boven de html (zonder $(window).ready()), en dan wordt het event dus gebind op het moment dat de html nog niet is gerenderd waardoor hij het element niet kan vinden. Maar dat is een gokje omdat we je broncode niet kunnen zien.

Daar dacht ik ook al aan dus ik heb al de windows onload functie geprobeerd en document ready maar beide geven geen resultaat. De test code is als volgt:

code:

<head>                               
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/docs.min.css" rel="stylesheet">
    <script href="js/bootstrap-3.3.7.min.js" rel="stylesheet"> </script>
    <script href="js/jquery-3.2.0.min.js" rel="stylesheet"></script>

    <script type="text/javascript">
        $('#userloginform').on('submit', function(e) {
        e.preventDefault();
        alert("test");
        });
    </script>
</head>

<body>
    <form id="userloginform" method="post">
    <input type="submit" name="login_use_input" id="login_use_input" >
    </form>
</body>

woensdag 29 maart 2017 14:00

Acties:

0 Henk 'm!

mstx

Jboy1991 schreef op woensdag 29 maart 2017 @ 13:58:
[...]

Daar dacht ik ook al aan dus ik heb al de windows onload functie geprobeerd en document ready maar beide geven geen resultaat. De test code is als volgt:

code:

<head>                               
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/docs.min.css" rel="stylesheet">
    <script href="js/bootstrap-3.3.7.min.js" rel="stylesheet"> </script>
    <script href="js/jquery-3.2.0.min.js" rel="stylesheet"></script>

    <script type="text/javascript">
        $('#userloginform').on('submit', function(e) {
        e.preventDefault();
        alert("test");
        });
    </script>
</head>

<body>
    <form id="userloginform" method="post">
    <input type="submit" name="login_use_input" id="login_use_input" >
    </form>
</body>

Verander het script gedeelte eens in:

code:

    <script type="text/javascript">
        $(document).ready(function(){
        $('#userloginform').on('submit', function(e) {
        e.preventDefault();
        alert("test");
        });
        });
    </script>

woensdag 29 maart 2017 14:04

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

mstx schreef op woensdag 29 maart 2017 @ 14:00:
[...]

Verander het script gedeelte eens in:

code:

    <script type="text/javascript">
        $(document).ready(function(){
        $('#userloginform').on('submit', function(e) {
        e.preventDefault();
        alert("test");
        });
        });
    </script>

Had het zo ook al geprobeerd, Inmiddels via chrome -> console log de volgende melding

Uncaught ReferenceError: $ is not defined
at test.html:9

daar doelt ie op het volgende:
$(document).ready(function(){

woensdag 29 maart 2017 14:06

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Jboy1991 schreef op woensdag 29 maart 2017 @ 13:48:
[...]

Ik denk dat er iets anders aan de hand is. Heb de door jou gemaakte/aangepaste code nu gekopieerd en in mn html file geplakt. En tot mijn verbazing werkt het zelfs nu niet....

Vraag mij echt af wat ik dan fout doe (heb het ook getest in andere browsers)

Check dan je selector even in de console;

JavaScript:

1	console.log($('je-selector'));

woensdag 29 maart 2017 14:08

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

CH40S schreef op woensdag 29 maart 2017 @ 14:06:
[...]
Check dan je selector even in de console;
JavaScript:
1
console.log($('je-selector'));

Al gedaan zie reactie hierboven

woensdag 29 maart 2017 14:14

Acties:

0 Henk 'm!

mstx

Jboy1991 schreef op woensdag 29 maart 2017 @ 14:04:
[...]

Had het zo ook al geprobeerd, Inmiddels via chrome -> console log de volgende melding

Uncaught ReferenceError: $ is not defined
at test.html:9

daar doelt ie op het volgende:
$(document).ready(function(){

Verander

code:

1 2	<script href="js/bootstrap-3.3.7.min.js" rel="stylesheet"></script> <script href="js/jquery-3.2.0.min.js" rel="stylesheet"></script>

in:

code:

1 2	<script src="js/bootstrap-3.3.7.min.js" type="text/javascript"> </script> <script src="js/jquery-3.2.0.min.js" type="text/javascript"></script>

woensdag 29 maart 2017 14:17

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

mstx schreef op woensdag 29 maart 2017 @ 14:14:
[...]

Verander

code:

1 2	<script href="js/bootstrap-3.3.7.min.js" rel="stylesheet"></script> <script href="js/jquery-3.2.0.min.js" rel="stylesheet"></script>

in:

code:

1 2	<script src="js/bootstrap-3.3.7.min.js" type="text/javascript"> </script> <script src="js/jquery-3.2.0.min.js" type="text/javascript"></script>

Ik zag deze fout ook al. En dit heb ik dus bewerkt. Helaas ook dit hielp niet.

woensdag 29 maart 2017 14:24

Acties:

0 Henk 'm!

Haan

dotnetter

En als je eens de CDN van jquery pakt ipv naar een lokale file te verwijzen?

HTML:

1	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Als je dan nog steeds een melding krijgt dat $ not defined is, is er iets heel raars aan de hand.

Kater? Eerst water, de rest komt later

woensdag 29 maart 2017 14:39

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Jboy1991 schreef op woensdag 29 maart 2017 @ 14:17:
[...]

Ik zag deze fout ook al. En dit heb ik dus bewerkt. Helaas ook dit hielp niet.

Check even je netwerk tab in de Inspector op 404 meldingen. Heb je een 404, dan is het adres naar een van de scripts niet goed.

Dit is toch wel basic debugging hoor.

[ Voor 5% gewijzigd door CH4OS op 29-03-2017 14:39 ]

woensdag 29 maart 2017 14:52

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

CH40S schreef op woensdag 29 maart 2017 @ 14:39:
[...]
Check even je netwerk tab in de Inspector op 404 meldingen. Heb je een 404, dan is het adres naar een van de scripts niet goed.

Dit is toch wel basic debugging hoor.

Ik weet hoe ik moet debuggen en dit is allemaal niet aan de orde. Als het zo simpel was had ik hier deze vraag niet hoeven stellen. Ik denk dat het een fout is in jquery.

Straks als ik weer thuis ben ga ik de oplossing van Haan proberen.

woensdag 29 maart 2017 14:58

Acties:

0 Henk 'm!

Bloemkoolsaus

Jboy1991 schreef op woensdag 29 maart 2017 @ 14:52:
Ik denk dat het een fout is in jquery.

Dat lijkt me sterk. " $ is not defined " betekend gewoon dat je jquery file niet (goed) is ingeladen, of misschien doet zich een andere javascript fout voor waardoor stopt met uitvoeren.

Even in je inspector kijken of de file goed is geladen is dus helemaal niet zo'n gek idee

woensdag 29 maart 2017 15:02

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

Bloemkoolsaus schreef op woensdag 29 maart 2017 @ 14:58:
[...]

Dat lijkt me sterk. " $ is not defined " betekend gewoon dat je jquery file niet (goed) is ingeladen, of misschien doet zich een andere javascript fout voor waardoor stopt met uitvoeren.

Even in je inspector kijken of de file goed is geladen is dus helemaal niet zo'n gek idee

Maar als de file niet goed ingeladen is. Dan neem ik aan dat daar errors over moet in staan in de debugger. Enige error melding die ik te zien krijg is dus " $ is not defined ".

ik ben dus ook erg benieuwd of de oplossing van Haan werkt.

woensdag 29 maart 2017 15:58

Acties:

0 Henk 'm!

DJMaze

Natuurlijk is $ undefined. Het is bad-practice.

Vervang de $() eens door jQuery()

Maak je niet druk, dat doet de compressor maar

woensdag 29 maart 2017 16:35

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Jboy1991 schreef op woensdag 29 maart 2017 @ 15:02:
Maar als de file niet goed ingeladen is. Dan neem ik aan dat daar errors over moet in staan in de debugger. Enige error melding die ik te zien krijg is dus " $ is not defined ".

Dat klopt, als het niet goed kan worden ingeladen krijg je bijvoorbeeld een HTTP error (bijvoorbeeld 404) te zien in de netwerk tab van de inspector / debugger / hoe je hem noemen wilt.

DJMaze schreef op woensdag 29 maart 2017 @ 15:58:
Natuurlijk is $ undefined. Het is bad-practice.

Dat iets "bad-practice" is, verklaard niet waarom het niet werkt natuurlijk, wat meer info hierover, zoals een bron, zou fijn zijn. Want volgens mij wordt $ namelijk nog best ontzettend veel gebruikt.

Naar mijn weten is $ namelijk een shortcut / alias voor jQuery().

Dus $ simpelweg vervangen voor jQuery() gaat niet werken.

[ Voor 55% gewijzigd door CH4OS op 29-03-2017 17:09 ]

woensdag 29 maart 2017 17:20

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

Inmiddels met
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> en het probleem is opgelost. Apart dat als je het als file in je js hebt staan hij het niet doet

woensdag 29 maart 2017 18:29

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

Weet je zeker dat de rest wel goed was? Dus 'src' attribuut ipv 'href', en "text/javascript' als 'type' attribuut. Als je daar een typfout maakt dan werkt het ook niet.

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

woensdag 29 maart 2017 18:37

Acties:

0 Henk 'm!

Jboy1991

Topicstarter

.oisyn schreef op woensdag 29 maart 2017 @ 18:29:
Weet je zeker dat de rest wel goed was? Dus 'src' attribuut ipv 'href', en "text/javascript' als 'type' attribuut. Als je daar een typfout maakt dan werkt het ook niet.

Ja, alleen heb net jquery boven bootstrap gezet en nu werkt het ook ...

dus zo

code:

1 2	<script src="js/jquery-3.2.0.min.js" type="text/javascript"></script> <script src="js/bootstrap-3.3.7.min.js" type="text/javascript"> </script>

ipv zo:

code:

1 2	<script src="js/bootstrap-3.3.7.min.js" type="text/javascript"> </script> <script src="js/jquery-3.2.0.min.js" type="text/javascript"></script>

donderdag 30 maart 2017 09:00

Acties:

0 Henk 'm!

EagleTitan

Dat is niet zo gek, Bootstrap heeft ook jQuery nodig, dus daar zat de error

donderdag 30 maart 2017 14:47

Acties:

0 Henk 'm!

DJMaze

CH40S schreef op woensdag 29 maart 2017 @ 16:35:
Dat iets "bad-practice" is, verklaard niet waarom het niet werkt natuurlijk, wat meer info hierover, zoals een bron, zou fijn zijn. Want volgens mij wordt $ namelijk nog best ontzettend veel gebruikt. Naar mijn weten is $ namelijk een shortcut / alias voor jQuery(). Dus $ simpelweg vervangen voor jQuery() gaat niet werken.

$ is ook een shortcut voor andere JavaScript libraries

Of wat gebeurd met WordPress en Joomla modules/plugins als ze voor de zoveelste keer hun eigen jQuery laden.
https://learn.jquery.com/...onflicts-other-libraries/

Om die reden zie je tegenwoordig nooit meer jQuery extensies die afhankelijk zijn van $.

Maak je niet druk, dat doet de compressor maar

donderdag 30 maart 2017 16:14

Acties:

0 Henk 'm!

Pizzalucht

Snotneus.

DJMaze schreef op donderdag 30 maart 2017 @ 14:47:
[...]

$ is ook een shortcut voor andere JavaScript libraries
Of wat gebeurd met WordPress en Joomla modules/plugins als ze voor de zoveelste keer hun eigen jQuery laden.
https://learn.jquery.com/...onflicts-other-libraries/

Om die reden zie je tegenwoordig nooit meer jQuery extensies die afhankelijk zijn van $.

code:

1
2
3

(function ($) {
  // Code hier
})(jQuery);