Javascript delete functie werkt niet in IE

Door Johnny Cash op 09-02-2015 22:42

1.939 views

Goedenavond,

Ik heb een probleem op een website waarop ik aan het testen ben.
Ik heb een eenvoudige aanroep in voor Javascript:


<a href='javascript:confirmDelete(\"/deletethisproduct/87\")' title='Dit product verwijderen'>verwijderen</a>

Vervolgens wordt het volgende script aangeroepen:


function javascript:confirmDelete(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?

Johnny Cash

11-02-2015 17:17

Dat eerste had ik ook al getest inderdaad om te kijken of de waarde veranderd zodra ik elders op de pagina klik. Dat is niet het geval.

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...

Thomas van den Heuvel

11-02-2015 17:26

Dan snap ik niet wat er misgaat, want ik heb eerder code van jou geknipt en geplakt, en bij mij werkt het prima in IE11, of je nu bind() of on() gebruikt:

index.htm

<!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>

whatever.php

<?php
echo time();
?>

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?

Johnny Cash

11-02-2015 17:54

Het lijkt erop dat dat stomme IE iets blokkeert en voor mij is het een raadsel.
Ja, ik heb ook wel een slash voor de bestandsnaam staan...

Einde is zoek, waarom is IE altijd een drama browser :((

[size=xsmall]Toevoeging op 11/02/2015 18:23:18:[/size]

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.


script type="text/javascript">
//<![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:


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...

Thomas van den Heuvel

11-02-2015 19:43 gewijzigd op 11-02-2015 19:56

Nog beter:

zet er het volgende omheen:

$().ready(function() {
  // 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? :)

Ger van Steenderen

11-02-2015 20:09

CDATA is voor inline js in XHTML, in HTML5 is het normaal gesproken niet meer nodig. Maar het kan geen kwaad om het erin te zetten. Het heeft te maken met het parsen van < en &.

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).

Johnny Cash

11-02-2015 22:10

Thnx guys voor jullie reacties.

Dan zet ik er


$().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...?

Thomas van den Heuvel

11-02-2015 22:23 gewijzigd op 11-02-2015 22:40

Als je $().ready( ... ) gebruikt zou dat niet uit moeten maken.

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 :)).

Reageren

Inloggen om te reageren