JQuery vragen
Ik heb nu een scriptje geschreven voor het tonenen van gegevens. Eerst moet een form worden ingevuld en aan de hand daarvan worden bepaalde gegevens gegenereerd op een andere pagina de dan in diezelfde div getoond moet worden.
Echter wordt de div niet opnieuw gevuld. Wat doe ik fout?
Groeten,
Olivier
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="controle">
Geef eerst de benodigde gegevens op!<br />
<form>
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> ----> Hier moet ik een datumselector koppelen!<br />
<!-- Ook dit is voor de datepicker => wegens moeilijke gebruikbaarheid wordt dit tijdelijk verboren -->
<!-- <div id="datepicker"></div> -->
<!-- Einde datepicker -->
<input type="submit" value="Controleer" id="Controle">
</form>
<script type="text/javascript">
$("#Controle").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
Geef eerst de benodigde gegevens op!<br />
<form>
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> ----> Hier moet ik een datumselector koppelen!<br />
<!-- Ook dit is voor de datepicker => wegens moeilijke gebruikbaarheid wordt dit tijdelijk verboren -->
<!-- <div id="datepicker"></div> -->
<!-- Einde datepicker -->
<input type="submit" value="Controleer" id="Controle">
</form>
<script type="text/javascript">
$("#Controle").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
Gewijzigd op 26/06/2012 16:17:26 door Olivier Peeters
Wat doe je fout: ga niet 2 keer bijna dezelfde naam gebruiken. Hou id values graag lower case en noem de submit button bijv. controle-submit.
voor de rest lijkt alles goed, behalve dat ik geen jQuery zie ingeladen.
wat krijg je als je in de console kijkt? En als je de JavaScript eens door haalt en die opmerkingen aanpast, waar mogelijk?
Maak anders even een JSfiddle, als je niet weet hoe dat moet, lees dan dit eens: http://wouterj.nl/overig/deel-je-scripts-makkelijk-met-jsfiddle/450/
Dit staat in de head:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Fouten in de JSHint:
Line 2: $.get('lifenr.php', { Lifenr: '......' }, function (data) {
Missing "use strict" statement.
Line 3: $('#controle').html(data);
Mixed spaces and tabs.
Line 4: });
Mixed spaces and tabs.
Line 1: $("#Controle").click(function() {
'$' is not defined.
Line 2: $.get('lifenr.php', { Lifenr: '......' }, function (data) {
'$' is not defined.
Line 3: $('#controle').html(data);
'$' is not defined.
Groeten,
Olivier
Gewijzigd op 26/06/2012 16:25:52 door Olivier Peeters
En wat krijg je in de console? En misschien een live voorbeeldje/jsfiddle?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
$("#controle-button").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
$("#controle-button").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
Olivier, wat doet je andere bestand?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!HTML>
<html>
<head>
<title>Testen!</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<!-- Hieronder word de tabel weergegeven met vraag om de lifenr in te vullen! -->
<!-- Ingeven van de lifenr. -->
<div id="controle">
Geef eerst de benodigde gegevens op!<br />
<form>
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> <!-- Hier moet ik een datumselector koppelen! --><br />
<input type="submit" value="Controleer" id="controle-button">
</form>
<script type="text/javascript">
$("#controle-button").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
</div>
</body>
</html>
<html>
<head>
<title>Testen!</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<!-- Hieronder word de tabel weergegeven met vraag om de lifenr in te vullen! -->
<!-- Ingeven van de lifenr. -->
<div id="controle">
Geef eerst de benodigde gegevens op!<br />
<form>
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> <!-- Hier moet ik een datumselector koppelen! --><br />
<input type="submit" value="Controleer" id="controle-button">
</form>
<script type="text/javascript">
$("#controle-button").click(function() {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
</div>
</body>
</html>
Mogelijks code van de andere pagina (lifenr.php)
// JS Live ding werkt niet (ik blijf het even uitzoeken....
Groeten,
Olivier
Gewijzigd op 26/06/2012 16:36:23 door Olivier Peeters
Probleem: De submit van het form gaat door en die gaat voor de AJAX request.
Snelle Oplossing: plaats als parameter van de callback de variabele e (of event) en doe daaronder e.preventDefault() (stop normale events op dit element).
Betere Oplossing: Maak geen submit.onclick event, maar een form.onsubmit. Hierdoor geef je de form een id mee en doe je:
Code (php)
1
2
3
2
3
$('#controle-form').submit(function(e) {
// AJAX get request
});
// AJAX get request
});
Toevoeging op 26/06/2012 16:41:22:
Beter pak je eerst Wouters opmerking :)
Zou de code zo moeten zijn? (werkt nog altijd niet)...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!HTML>
<html>
<head>
<title>Hier komt de inschrijvingsfiche!</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<!-- Hieronder word de tabel weergegeven met vraag om de lifenr in te vullen! -->
<!-- Ingeven van de lifenr. -->
<div id="controle">
Geef eerst de benodigde gegevens op!<br />
<form id="controle-form" method="POST">
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> ----> Hier moet ik een datumselector koppelen!<br />
<!-- Ook dit is voor de datepicker => wegens moeilijke gebruikbaarheid wordt dit tijdelijk verboren -->
<!-- <div id="datepicker"></div> -->
<!-- Einde datepicker -->
<input type="submit" value="Controleer">
</form>
<script type="text/javascript">
$('#controle-form').submit(function(e) {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
</div>
</body>
</html>
<html>
<head>
<title>Hier komt de inschrijvingsfiche!</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<!-- Hieronder word de tabel weergegeven met vraag om de lifenr in te vullen! -->
<!-- Ingeven van de lifenr. -->
<div id="controle">
Geef eerst de benodigde gegevens op!<br />
<form id="controle-form" method="POST">
<label>Life-nr: </label><input type="text"></input><br />
<label>Geboortedatum: </label><input type="text"></input> ----> Hier moet ik een datumselector koppelen!<br />
<!-- Ook dit is voor de datepicker => wegens moeilijke gebruikbaarheid wordt dit tijdelijk verboren -->
<!-- <div id="datepicker"></div> -->
<!-- Einde datepicker -->
<input type="submit" value="Controleer">
</form>
<script type="text/javascript">
$('#controle-form').submit(function(e) {
$.get('lifenr.php', { Lifenr: '......' }, function (data) {
$('#controle').html(data);
});
});
</script>
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="s"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
}
);
});
</script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="s"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
}
);
});
</script>
Hier wordt de geboortedatum gevraagd (ingegeven)
<label>Geboortedatum: </label><input type="text"></input>
Maar ik zou deze in de zin hieronder willen laten verwerken:
...$.post('lifenr.php', { Geboortedatum: '$_GET['Geboortedatum]' }, function (data)...
Enig idee hoe ik dit doe? Bovenstaande code werkt niet :s
Groeten,Olivier
In JS zal je de input moeten selecteren en dan met $('select input veld').val() de value van het input ophalen.
Ik doe dus:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$("#controle-form").submit(function(e) {
e.preventDefault();
$.post('lifenr.php', { Geboortedatum: '$('Geboortedatum').val()' }, function (data) {
$('#controle').html(data);
});
$("#confirmatie").show();
});
e.preventDefault();
$.post('lifenr.php', { Geboortedatum: '$('Geboortedatum').val()' }, function (data) {
$('#controle').html(data);
});
$("#confirmatie").show();
});
Maar dit werkt niet ö
Groeten,
Olivier
Gewijzigd op 26/06/2012 17:33:13 door Olivier Peeters
Vervolgens, ooit wel eens in de console gekeken? Je moet nu een hele hoop foutmeldingen krijgen. Want JS ziet nu '$(' als een stukje tekst (string), vervolgens Geboortedatum als een variabele en dan weer ').val()' als een stukje tekst (string).
^^ Deze noemt toch geboortedatum?
Deze code die ik geschreven heb klopt inderdaad niet, maar ikzelf zie de oplossing ook niet? Daarom een kleine link of opzet zou handig zijn (ondertussen zoek ik zelf op de (nederlandse) google)
Groeten
En de rest mag je zelf uitvogelen, is het zelfde als in PHP. Wat is er nou echt verboden in PHP? Tipje: .... buiten quotes houden Kijk eens naar wat je hebt getypt.
Nog steeds niet door? Bekijk dan eens het eerste voorbeeld van deze pagina...