De PHPhulp kroeg
[jQuery] Submit werkt niet.
Ik heb nu een jQuery script geschreven die een adres naar een xml bestand moet ophalen, dat werkt alleen loop ik vast bij die submit knop, als je er op klikt werkt hij, maar zodra ik op enter druk niet meer... Hoe los ik dit op?
alvast bedankt!
Hier mijn script: http://jsfiddle.net/bg9Wv/.
Gewijzigd op 22/05/2013 21:41:56 door Keizer Webdesign
Code (php)
1
2
3
4
5
2
3
4
5
$("#search").keyup(function(event){
if(event.keyCode == 13){
$("#search_button").click();
}
});
if(event.keyCode == 13){
$("#search_button").click();
}
});
maar moet ik die functie nu dubbel schrijven, 1 als ik op enter druk en 1 voor als ik klik?
Ik ben helaas nog niet zo ver met jQuery...
Toevoeging op 22/05/2013 22:13:25:
http://jsfiddle.net/bg9Wv/1/ Het is me gelukt! Ik heb alleen nog 2 problemen. Hij parst hem dubbel als ik een paar keer op enter druk. hoe zorg ik dat hij dat maar 1 keer doet. en als ik een anderen link in voer, hoe zorg ik dan dat hij de vorige weer verwijderd en een nieuwe weer geeft en niet er onder zoals nu?
- script netjes. Spring in per block en zorg dat het duidelijk is waar iets bij hoort.
- je gaat nu elke keer als je op #search_button klikt JavaScript de dom door laten zoeken opzoek naar #search, vervolgens nog een keer de dom door zoeken voor #info, daarna nogmaals voor #info. Dat gaat enorm veel tijd kosten, cache deze elementen in een variabele en gebruik dat.
- gebruik geen inline JS, maar gewoon javascript. Dus $('#search_form').submit(...)
- $(elem).click() registreerd een click event, je wilt het click event triggeren gebruik dan $(elem).trigger('click')
- gebruik gewoon helemaal geen click event, $(elem).submit() geldt voor zowel de enter als de klik (zorg dan wel dat je type="submit" hebt ipv type="button")
De code na het verbeteren: http://jsfiddle.net/bg9Wv/2/
Dan het antwoord op je problemen:
1. Sla de url op in een variabele, als het nog hetzelfde is doe je niks. ( http://jsfiddle.net/bg9Wv/3/ )
2. Gebruik $(elem).html(...) ipv $(elem).append(...) ( http://jsfiddle.net/bg9Wv/4/ )
http://jsfiddle.net/bg9Wv/5/
Gewijzigd op 22/05/2013 23:16:13 door Wouter J
Heel erg bedankt voor de tips Wouter.
Maar nu zal het wel weer aan mij liggen maar kan ik er nou echt geen zak van of zie ik iets over het hoofd.
Die jsfiddle werkt zoals hij moet werken maar dan bouw ik hem in op deze pagina en ineens werkt het niet meer...:
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html><head>
<script type="text/javascript">
$(document).ready(function(){
// cache de elementen
var searchInput = $('#search');
var info = $('#info');
var latestUrl; // gebruiken we om niet dubbel te parsen
// submit event op het formulier
$("#search_form").submit(function( event ) {
var link = searchInput.val();
if (link === latestUrl) {
// zelfde url, stop callback
return;
} else {
latestUrl = link; // sla de url op
}
// gebruik .html, dan override je alle content die erin staat
info.html("<ul></ul>");
$.ajax({
type: "GET",
url: ""+link+"",
dataType: "xml",
success: function(xml){
$(xml).find('Book').each(function(){
var sTitle = $(this).find('Title').text();
var sPublisher = $(this).find('Publisher').text();
$('ul', info).append("<li>" + sTitle + ", " + sPublisher + "</li>");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="search_form">
<input type="text" id="search" placeholder="Station..." />
<input type="submit" id="search_button" value="Bekijk" />
</form>
<div id="info"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
// cache de elementen
var searchInput = $('#search');
var info = $('#info');
var latestUrl; // gebruiken we om niet dubbel te parsen
// submit event op het formulier
$("#search_form").submit(function( event ) {
var link = searchInput.val();
if (link === latestUrl) {
// zelfde url, stop callback
return;
} else {
latestUrl = link; // sla de url op
}
// gebruik .html, dan override je alle content die erin staat
info.html("<ul></ul>");
$.ajax({
type: "GET",
url: ""+link+"",
dataType: "xml",
success: function(xml){
$(xml).find('Book').each(function(){
var sTitle = $(this).find('Title').text();
var sPublisher = $(this).find('Publisher').text();
$('ul', info).append("<li>" + sTitle + ", " + sPublisher + "</li>");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="search_form">
<input type="text" id="search" placeholder="Station..." />
<input type="submit" id="search_button" value="Bekijk" />
</form>
<div id="info"></div>
</body>
</html>
als ik hem wil submit'en dan weergeeft hij niks en reload de page zich weer en krijg ik zn ? in me webbar. Wat doe ik verkeerd?
Open ook je console (Ctrl + J en F12 in IE) om te kijken voor JavaScript errors.
Kan ik met ajax ook url's op halen? Want als ik deze link wil op halen http://papermashup.com/demos/jquery-xml/books.xml (wel eerst de var sPublisher veranderd naar description) lukt dat niet