id's vanuit foreach (PHP) naar ajax
Als ik in PHP de volgende lus heb:
Code (php)
1
2
3
4
5
2
3
4
5
foreach (Svalues as $value):
...
echo '<td><input type="text" name="price" value="$value->price" data-num="' . $value->id . '" ></td>';
....
endforeach;
...
echo '<td><input type="text" name="price" value="$value->price" data-num="' . $value->id . '" ></td>';
....
endforeach;
en de prijs wil ik posten via ajax.
mijn script ziet er zo uit: Echter als ik een prijs verander doet het, het alleen bij de eerste. Ik zie dat ik geen ID meegeef maar heb geen idee hoe ik die vanuit foreach naar JQuery plaats. Of moet ik het script mee laten lopen in de foreach lus?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
$(document).ready(function() {
$('input[name=price]').live('change', function() {
var id = $('input[name=price]').data('num');
var value = $('input[name=price]').val();
$.ajax({
url: "<?php echo site_url('products/changePrice') ?>",
type: "POST",
data: "priceb2c=" + value,
success: function() {
alert(id);
}
});
});
});
</script>
$(document).ready(function() {
$('input[name=price]').live('change', function() {
var id = $('input[name=price]').data('num');
var value = $('input[name=price]').val();
$.ajax({
url: "<?php echo site_url('products/changePrice') ?>",
type: "POST",
data: "priceb2c=" + value,
success: function() {
alert(id);
}
});
});
});
</script>
Als je een eventlistener aan meerdere elementen hangt, kan je binnen de callback beter $(this) gebruiken:
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$('input[name="price[]"]').on('change', function() {
$.ajax({
url: '/products/changePrice',
type: 'post';
data: {priceb2c: $(this).val(), id: $(this).data('num')},
success: function(d) {
alert(d);
}
});
$.ajax({
url: '/products/changePrice',
type: 'post';
data: {priceb2c: $(this).val(), id: $(this).data('num')},
success: function(d) {
alert(d);
}
});
Je laat dan je PHP script het id teruggeven.
Gewijzigd op 13/06/2015 13:05:01 door Ger van Steenderen
Jennifer Van W op 13/06/2015 11:31:03:
Ik zie dat ik geen ID meegeef maar heb geen idee hoe ik die vanuit foreach naar JQuery plaats.
geen -> een? Je geeft namelijk wel een id mee? data-num.
Deze kun je volgens mij in je change event-callback aanspreken met $(this).attr('data-num') die je vervolgens mee kan geven aan je AJAX-call als prijs-identifier.
(En wat Ger zegt - de veldnaam is op dit moment niet uniek)
Gewijzigd op 13/06/2015 13:10:22 door Thomas van den Heuvel
Ik heb het nu zo en het werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
....
<td><input onchange="changePrice(<?php echo $value->id ?>)" type="text" id="price<?php echo $value->id ?>" name="priceb2c[]" value="11.95" data-num="<?php echo $value->id ?>" ></td>
.....
en script:
<script type="text/javascript">
function changePrice(id) {
$('#price'+id).live('change',function () {
var value=$('#price'+id).val();
var myKeyVals = { id : id, price : value };
$.ajax({
url: "<?php echo site_url('products/changePrice') ?>",
type: "POST",
data: myKeyVals,
});
}
</script>
<td><input onchange="changePrice(<?php echo $value->id ?>)" type="text" id="price<?php echo $value->id ?>" name="priceb2c[]" value="11.95" data-num="<?php echo $value->id ?>" ></td>
.....
en script:
<script type="text/javascript">
function changePrice(id) {
$('#price'+id).live('change',function () {
var value=$('#price'+id).val();
var myKeyVals = { id : id, price : value };
$.ajax({
url: "<?php echo site_url('products/changePrice') ?>",
type: "POST",
data: myKeyVals,
});
}
</script>
Gewijzigd op 13/06/2015 14:11:23 door Jennifer Van W
In HTML voeg je een eventListener toe die de functie changePrice uitvoert.
In die functie doe je dat nogmaals met op dat zelfde element met .live (wat overigens een verouderde methode is). Binnen die laatste wordt de AJAX request uitgevoerd.
Wat er dus feitelijk gebeurt, is dat bij de eerste keer dat de change getriggerd wordt alleen de change eventListener toegevoegd. Met de nadruk op toegevoegd, want die je in de HTML gedefinieerd hebt is er ook nog steeds.
Ik zie wat je bedoelt.
Het werkte wel, maar heb het direct veranderd.
Die tweede er volledig uit gehaald. groetjes en bedankt!!