JQuery data-href direct toepassen ipv opslaan als variabele
In mijn voorbeeld hieronder doe ik de waarde van data-href doorsturen naar een ander bestand die dit weer gebruikt en hier een actie mee uitvoert en dit weer terug stuurt. Maar om dit werkend te krijgen sla ik eerste de waarde op in een variabele alvorens ik er iets mee kan doen. Kan dit ook sneller? In php hoef je bijvoorbeeld een $_POST[''] ook niet eerst op te slaan in een variabele maar kan je dit direct typen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
$(document).ready(function() {
$("#searchip").click(function(){
href=$(this).data("href")
})
$('#searchip').click(function(){
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + href,
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
}); //document.ready
</script>
$(document).ready(function() {
$("#searchip").click(function(){
href=$(this).data("href")
})
$('#searchip').click(function(){
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + href,
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
}); //document.ready
</script>
Gewijzigd op 09/01/2015 11:22:21 door Danny von Gaal
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).on('click', '#searchip', function() {
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
;);}
});
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
;);}
});
maar ik denk dat het overzichtelijker, en universeler bruikbaar als je
var href = $(this).data('href');
gebruikt de regel voor $.ajax.
Daarmee hang je niet zo vast aan dat ene id van je element.
Toevoeging op 09/01/2015 11:18:06:
sowieso is het onhandig om 2x een onclick functie te maken op 1 element.
Is het wel zeker in welke volgorde ze uitgevoerd worden?
En is dat zo voor elke browser?
Ik heb mijn eigen nu aangepast met je tips en ben er wel tevreden over. Ik hoor graag of het zo goed is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
$("#searchip").click(function(){
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
</script>
$("#searchip").click(function(){
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
}
}); // Ajax Call
}); //event handler
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(document).on('click', '#searchip', function() {
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
});
});
});
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + $('#searchip').data('href'),
success: function(msg){
$('#resultip').html(msg);
});
});
});
effectief zal dat hetzelfde doen als jouw script.
alleen, stel dat je 10 van deze elementen hebt.
Dan zou ik niet zoeken op id="searchip" maar op class="searchip".
Dan is 1 listener efficiënter dan 10 (of 100).
ik zou dan de code voorstellen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).on('click', '.searchip', function() {
var href=$(this).data('href');
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + href,
success: function(msg){
$('#resultip').html(msg);
});
});
});
var href=$(this).data('href');
$.ajax({
type: "GET",
url: "test.php",
data: 'ip=' + href,
success: function(msg){
$('#resultip').html(msg);
});
});
});
Maar mogelijk dat je in zo'n geval ook #resultip dynamischer zou willen maken.
Een id of een class zit toch geen verschil in? Gaat toch alleen maar om of je id= of class= gebruikt en dit verschil komt terug in CSS.
Tevens lijkt het mij makkelijker om de href direct te gebruiken ipv in een variabele omdat het dan weer een stap overslaat. Tenzij ik meerdere functies gebruik met dezelfde waarde.
dan kun je niet 10 stuks met dezelfde id maken: die moet uniek zijn.
dan kun je beter een class gebruiken.
<ul>
<li class="foo">a</li>
<li class="foo">b</li>
<li class="foo">c</li>
</ul>
Code (php)
1
2
3
2
3
$(document).on('click', '.foo', function(){
alert($(this).text());
});
alert($(this).text());
});
dit zou je anders 3 (of als het dynamisch opgebouw wordt) een onbekend aantal stukken met click kosten.
En hier kun je ook niet eenvoudig naar een bepaald element-id verwijzen vanuit je ajax-code.
Is er maar 1 element waar je iets mee moet op je pagina, dan kun je inderdaad gewoon een id gebruiken. Maar zijn het er meerdere, dan moet je op een class (of ander vlaggetje) terug vallen.
En daarop vooruitdenkend, zou ik ook niet graag hard een id van een element hebben staan midden in een function.
Merk op dat ik voor id's gewoon $('#the-id').on('click', function() { }) zou gebruiken. Het heeft geen nut om de click op de document te plaatsen, ik denk dat dat zelfs vertraagt.
in dit geval gaat het kennelijk om een enkele button, maar laten we eens kijken naar een tabel met mogelijk wel 500 rows waarbij achter aan een ikoontje staat waarop geklikt kan worden.
Dan zou dat dus 500 id's zijn, met 500x de javascript regel van jou.
Niet alleen veel sourcecode, maar ook nog een keer 500x een listener die in het geheugen geplaatst moet worden.
Het idee achter $(document) is dat je maar 1 listener hebt (voor het click event, mogelijk ook nog 1 voor change etc).
op http://learn.jquery.com/events/event-delegation/ staat het uitgelegd.
Op zich zou je ook ipv $(document) een wat dieper element kunnen pakken.
Bijvoorbeeld in het voorbeeld hierboven van mij ipv $(document) zou $('ul') ook kunnen.
Nadeel is wel dat het betreffende element op het moment van uitdelen van de event-listeners al aanwezig moet zijn.
Zelf pas ik dit veel toe op elementen die via ajax acties worden toegevoegd aan de pagina. Vandaar $(document).