Javascript delete functie werkt niet in IE
Ik heb een probleem op een website waarop ik aan het testen ben.
Ik heb een eenvoudige aanroep in voor Javascript:
Code (php)
1
<a href='javascript:confirmDelete(\"/deletethisproduct/87\")' title='Dit product verwijderen'>verwijderen</a>
Vervolgens wordt het volgende script aangeroepen:
Code (php)
1
2
3
4
5
2
3
4
5
function javascript:confirmDelete(delUrl) {
if (confirm("Weet u zeker dat u dit product wilt verwijderen?")) {
document.location = delUrl;
}
}
if (confirm("Weet u zeker dat u dit product wilt verwijderen?")) {
document.location = delUrl;
}
}
Na bevestiging (confirm) wordt de actie van verwijderen uitgevoerd.
Dit werkt, zoals het hoort, goed in Chrome en Firefox, maar in IE (versie 11) niet!
Wat werkt er dan niet?
Er gebeurd niets, er wordt geen confirmation gevraagd...
Hoe kan dat? Ik weet dat IE waardeloos is maar dit zou toch gewoon moeten werken?
Kun je mijn post over aantallen aanpassen in een winkelwagen met daarbij de verwerking via jquery?
Dat doet het ook perfect in Chrome en Firefox, maar NIET in IE.
Een product heeft bij het toevoegen aan de winkelwagen een $currentamount (van 1), men kan het aantal aanpassen met een getal tussen de 1 en de 30. Vervolgens drukken ze op wijzgen waardoor feitelijk de winkelwagen pagina opnieuw wordt getoond.
Stukje in winkelwagen.php
Code (php)
1
<input type='number' name='amountprod' value='$currentamount' class='amountprod' min='1' max='30' id='amountprod' /> <a href='/winkelwagen' class='editamount'>wijzig</a>
Stukje in javascripts.js
Code (php)
1
2
3
4
2
3
4
$("#amountprod").bind("input", function() {
var newprodamount = $(this).val();
$.post( "/savenewamount.php", { newamount:newprodamount } );
});
var newprodamount = $(this).val();
$.post( "/savenewamount.php", { newamount:newprodamount } );
});
Vervolgens stuurt dit stukje script het nieuwe aantal door naar savenewamount.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$checkamount = mysqli_real_escape_string($verbinding, $_POST['newamount']);
if($checkamount <= 1){
$amount = 1;
}elseif($checkamount >= 30){
$amount = 30;
}else{
$amount = $_POST['newamount'];
}
$sql = "UPDATE winkelwagen SET aantal='$amount WHERE sessie_id='". $_SESSION["sessionid"] ."'";
$result = mysqli_query($verbinding, $sql) or die ("Query mislukt: " . mysqli_error($verbinding));
if($checkamount <= 1){
$amount = 1;
}elseif($checkamount >= 30){
$amount = 30;
}else{
$amount = $_POST['newamount'];
}
$sql = "UPDATE winkelwagen SET aantal='$amount WHERE sessie_id='". $_SESSION["sessionid"] ."'";
$result = mysqli_query($verbinding, $sql) or die ("Query mislukt: " . mysqli_error($verbinding));
Al dit werkt dus perfect in Chrome in Firefoxe, maar NIET in IE...
Waar gaat het fout?
Gewijzigd op 10/02/2015 20:43:34 door Johnny Cash
Tevens:
- om waarden van properties moeten "dubbele quotes"
- de naam "wijzig" is een beetje misleidend, want dat is al gebeurd zodra je iets wijzigt in je input veld, althans ik neem aan dat dat de bedoeling is?
Euhm waarom niet? Het werkt in Chrome en Firefox, maar niet in IE...
De waarden van properties moeten tussen "dubbele quoates"
Het staat er officieel zo in:
Code (php)
1
echo "<input type='number' name='amountprod' value='$currentamount' class='amountprod' min='1' max='30' id='amountprod' /> <a href='/winkelwagen' class='editamount'>wijzig</a>";
Dit is toch allowed?
De naam "wijzig" gebruik ik omdat aan de achterkant wel de actie wordt uitgevoerd, maar niet via jquery wordt terug gepost in de wnkelwagen pagina.
De winkelwagen.php wordt al ingeladen via een bestel.php pagina:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function berekentotaal()
{
$.post("/winkelwagen.php", $('#shoppingcartform').serialize(), function(html)
{
$('#showwinkelwagentotaal').html(html);
});
}
berekentotaal();
{
$.post("/winkelwagen.php", $('#shoppingcartform').serialize(), function(html)
{
$('#showwinkelwagentotaal').html(html);
});
}
berekentotaal();
Op de pagina bestel.php staat: echo "<div id='showwinkelwagentotaal'></div>";
Ik kreeg het niet voor elkaar om in de winkelwagen.php ook een dergelijke functie zoals hierboven te bouwen.
Ik heb het idee dat wanneer ik dat doe (jquery post in een jquery post) dat het niet goed gaat...
Quote:
Euhm waarom niet?
Quote:
The standard events in the Document Object Model are: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup.
bron
Wijs het "input" event eens aan? En/of bekijk de definitie van bind() nog eens...
Quote:
Het werkt in Chrome en Firefox, maar niet in IE...
Dat maakt niet uit. Als je iets niet volgens de standaard doet, hoef je niet te verwachten dat het altijd werkt, zoals nu ook blijkt. Los bovenstaande eerst op, en kijk of je probleem dan nog steeds speelt.
Quote:
Dit is toch allowed?
Nee.
Gewijzigd op 11/02/2015 00:13:29 door Thomas van den Heuvel
Ik heb ipv INPUT nu het event CHANGE gebruikt. Dat is namelijk het meest logische event. Er moet namelijk iets gebeuren zodra er iets veranderd.
Ik heb dit met het nieuwe CHANGE event getest, maar helaas... het gaat nog steeds niet goed in IE.
Ook heb ik de input echo gewijzgid in:
Code (php)
1
echo '<input type="number" name="amountprod" value="$currentamount" class="amountprod" min="1" max="30" id="amountprod" /> <a href="/winkelwagen" class="editamount">wijzig</a>';
Het blijft dus niet werken.
Toevoeging op 11/02/2015 12:49:38:
Vanochtend alweer vroeg begonnen, maar ik ben het spoort bijster...
Ik heb deze pagina meerdere malen over gelezen:
http://api.jquery.com/bind/
Ik heb alles opgegeven zoals het hoort met dubbele quotes etc.
Het werkt niet. Ben zo benieuwd of iemand hier een logische verklaring voor heeft.
Los daarvan: als je je netwerktab in de gaten had gehouden dan had je gezien dat het "change" event in IE pas vuurt als het inputveld van waarde is veranderd, en de focus heeft verloren.
Het werkt dus wel, alleen wellicht niet op het moment dat jij verwachtte.
JQuery docs:
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Niet dat het je probleem oplost, maar toch ;-)
Wat Thomas ook al aangeeft, niet alle browser reageren hetzelfde als bepaalde zaken niet op orde zijn.
Wat ik uit jou andere topic kan opmaken is dat je meerdere inputs kan hebben, en als dat het geval is mogen ze niet dezelfde name en id hebben.
De name kan je oplossen door er een array van te maken en de id kan via het data- attribuut:
Code (php)
1
<input name="amountprod[]" ...... data-id="87" class="amountprod">
Hetzelfde geldt voor je verwijderen link:
Code (php)
1
<a href="#" data-id="87" class="delete_product">
Dan in JS/JQuery:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(".amountprod").on("change", function(){
$.ajax({
url: "/savenewamount.php",
type: "post",
data: {newamount: $(this).val(), product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
});
$(".delete_product").on("click", function(e){
e.preventDefault();
$.ajax({
url: "/deleteproduct.php",
type: "post",
data: {product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
return false;
});
$.ajax({
url: "/savenewamount.php",
type: "post",
data: {newamount: $(this).val(), product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
});
$(".delete_product").on("click", function(e){
e.preventDefault();
$.ajax({
url: "/deleteproduct.php",
type: "post",
data: {product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
return false;
});
Ik ben er mee aan de slag gegaan en probeer het te begrijpen.
Ik heb de volgende dingen nu geprobeerd, zonder resultaat:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(".amountprod").on("change", function(){
$.ajax({
url: "/savenewamount.php",
type: "post",
data: {newamount: $(this).val(), product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
});
$.ajax({
url: "/savenewamount.php",
type: "post",
data: {newamount: $(this).val(), product_id: $(this).data("id")},
success: function(html){
// hier wat je wilt doen
}
});
});
- Ik heb het INPUT TYPE veranderd in TEXT, ik het TYPE attribuut zelfs al weggehaald voor de test;
- Ik heb alle dubbele INPUT NAME verwijder zodat ik het nu maar met één INPUT NAME="amountprod" doe;
De verwerkingspagina is nog steeds goed (want in Chrome en Firefox werkt het!!):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$checkamount = mysqli_real_escape_string($verbinding, $_POST['newamount']);
if($checkamount <= 1){
$amount = 1;
}elseif($checkamount >= 30){
$amount = 30;
}else{
$amount = $_POST['newamount'];
}
$sql = "UPDATE winkelwagen SET aantal='$amount WHERE sessie_id='". $_SESSION["sessionid"] ."'";
$result = mysqli_query($verbinding, $sql) or die ("Query mislukt: " . mysqli_error($verbinding));
if($checkamount <= 1){
$amount = 1;
}elseif($checkamount >= 30){
$amount = 30;
}else{
$amount = $_POST['newamount'];
}
$sql = "UPDATE winkelwagen SET aantal='$amount WHERE sessie_id='". $_SESSION["sessionid"] ."'";
$result = mysqli_query($verbinding, $sql) or die ("Query mislukt: " . mysqli_error($verbinding));
Ik heb met zowel:
Code (php)
1
$(".amountprod").on("change", function(){
als
Code (php)
1
$("#amountprod").on("change", function(){
getest!
Ook heb ik verschillende EVENTS geprobeerd: change, focus, onclick etc.
Het blijft aan het einde van de rit NIET in IE (versie 11) werken maar wel in Chrome en Firefox, ook bovenstaande aanpassingen werken in Chrome en Firefox.
Toevoeging op 11/02/2015 15:57:06:
En ik gebruik jQuery v1.11.1
Controleer ook in de developer tab van IE (F12) of er uberhaupt iets gePOST wordt. Druk daartoe wel op het "play" knopje om netwerkverkeer te volgen.
Ik heb ook de IE developer tool zojuist gebruikt (bedankt voor de tip). Maar ik merk op dat wanneer ik de waarde voor aantallen verander dat er niets gebeurd...
index.htm
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
<!DOCTYPE html>
<html>
<head>
<title>lala</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form action="" method="">
<input type="text" name="amountprod" value="12" class="amountprod" min="1" max="30" id="amountprod" />
</form>
<script type="text/javascript">
//<![CDATA[
$("#amountprod").on("change", function() {
var newprodamount = $(this).val();
$.post( "whatever.php", { newamount:newprodamount } );
});
//]]>
</script>
</body>
</html>
<html>
<head>
<title>lala</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form action="" method="">
<input type="text" name="amountprod" value="12" class="amountprod" min="1" max="30" id="amountprod" />
</form>
<script type="text/javascript">
//<![CDATA[
$("#amountprod").on("change", function() {
var newprodamount = $(this).val();
$.post( "whatever.php", { newamount:newprodamount } );
});
//]]>
</script>
</body>
</html>
whatever.php
Kijk eerst eens of dat werkt. Blokkeert IE op een of andere manier iets? Ik weet het anders ook niet.
Je hebt wel een "slash" voor "/savenewamount.php" staan, wellicht loopt er iets met paden mis?
Ja, ik heb ook wel een slash voor de bestandsnaam staan...
Einde is zoek, waarom is IE altijd een drama browser :((
Toevoeging op 11/02/2015 18:23:18:
Ok... ik heb nu iets gedaan waarbij het in zowel Chrome, Firefoxe als IE werkt...!
Ik heb hier wel vragen over, want ik wil snappen waarom het het één nu wel werkt en het ander niet.
Ten eerste heb ik nu de javascript functie uit het .js bestand gehaald en onderaan de pagina neergezet zoals ik ook bij Thomas zijn vorige post zag.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
script type="text/javascript">
//<![CDATA[
$("#amountprod").on("change", function() {
var newprodamount = $(this).val();
$.post( "whatever.php", { newamount:newprodamount } );
});
//]]>
</script>
//<![CDATA[
$("#amountprod").on("change", function() {
var newprodamount = $(this).val();
$.post( "whatever.php", { newamount:newprodamount } );
});
//]]>
</script>
Dit stukje code, met andere filename.php uiteraard, staat onderaan de winkelwagen pagina en nu werkt het in IE wel.
Waarom kan ik niet gewoon een javascript bestand .js includen zoals ik eerst had:
Code (php)
1
echo "<script type='text/javascript' src='/javascripts/winkelwagen.js'></script>";
In dit bestand staat EXACT hetzelfde als wat ik nu als los stukje onderaan het winkelwagen script hebt gezet.
En wanneer gebruik ik:
//<![CDATA[
Wat is hier precies de functie van. Want het werkt zowel met als zonder dezeze CDATA.
Ik begrijp nog steeds niet waarom het nu wel werkt in IE, maar het feit is dat het werkt...
zet er het volgende omheen:
Code (php)
1
2
3
2
3
$().ready(function() {
// je code hier
});
// je code hier
});
Dat zorgt ervoor dat je JavaScript code pas uitgevoerd wordt als je document volledig geladen is.
Misschien probeer je in IE events te koppelen aan HTML-elementen die nog niet bestaan omdat je HTML-document nog niet (volledig) is (in)geladen.
EDIT: als je die ready check eromheen zet kun je het wel in een js bestand zetten en includen in je head-tag zonder problemen waarschijnlijk.
CDATA-blokken moeten bij mijn weten om inline JavaScript gezet worden. De reden ben ik inmiddels vergeten. Je zou eens kunnen googlen op de correcte manier, volgens mij kom je dan nog een heleboel andere varianten tegen.
EDIT2: stond dit javascript bestand waar je je code uitgehaald had NA de regel waarin je jQuery had ingeladen, of ERVOOR? :)
Gewijzigd op 11/02/2015 19:56:38 door Thomas van den Heuvel
Overigens is het helemaal niet nodig om externe javascript bestanden in de head te zetten, dit kan ook op elke willekeurige plek binnen de body (maar bij voorkeur net voor de body endtag).
Dan zet ik er
Code (php)
1
$().ready(function() {
omheen, want dan kan ik in ieder geval comment lines kwijt.
Het javascript bestand stond eerst bovenin de winkelwagen pagina.
Nu staat het onderin de winkelwagen pagina en werkt het.
Wanneer zet ik een javascript onderaan en wanneer bovenaan...?
EDIT: maar het is handig / verstandig om inline JavaScript (als je om een of andere reden hier niet omheen kan) aan het einde van je document te zetten (voor je </body> tag) buiten andere HTML-elementen (zoals Ger al aangaf zie ik net :)).
Gewijzigd op 11/02/2015 22:40:09 door Thomas van den Heuvel