Javascript delete functie werkt niet in IE

Dit komt mij zo bekend voor....

Ah... Zie dit topic.

Bedankt Thomas voor de reactie, maar dit lost het algehele probleem niet op.

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

<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

$("#amountprod").bind("input", function() {
	 var newprodamount = $(this).val();
	 $.post( "/savenewamount.php", { newamount:newprodamount } );
}); 

Vervolgens stuurt dit stukje script het nieuwe aantal door naar savenewamount.php

   $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));

Al dit werkt dus perfect in Chrome in Firefoxe, maar NIET in IE...
Waar gaat het fout?

Is "input" een geldig event in je bind() functie?

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?

Of input een geldig event is in de bind() functie?
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:

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:

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

Euhm waarom niet?

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

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.

Dit is toch allowed?

Nee.

Bedankt Thomas,

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:

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.

Een input veld van het type "number" is HTML5, ik weet niet in hoeverre IE dat (al) ondersteunt.

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:

<input name="amountprod[]" ...... data-id="87" class="amountprod">

Hetzelfde geldt voor je verwijderen link:

<a href="#" data-id="87" class="delete_product">

Dan in JS/JQuery:
[code lang="js"]
$(".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;
});
[/code]

Bedankt voor jullie input.

Ik ben er mee aan de slag gegaan en probeer het te begrijpen.
Ik heb de volgende dingen nu geprobeerd, zonder resultaat:

$(".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
        }
    });
});

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

   $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));

Ik heb met zowel:

$(".amountprod").on("change", function(){

als

$("#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

Klik eens ergens willekeurig op een lege plek op je pagina nadat je de waarde hebt aangepast. En controleer dan eens of het wel effect had? Zoals ik eerder zei: als je in IE de waarde verandert, maar de focus / cursor blijft op je invoerveld staan, dan vuurt "change" niet.

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.