2017-10-19 16 views
0

Ich bin neu in Javascript. Ich versuche, mit JavaScript-Muster zu arbeiten. Ich habe Konzepte gut verstanden. Aber ich habe keine Ahnung, wie ich die Funktion schon im Objekt aufrufen soll.JavaScript Muster zeigt keine Funktion Fehler

var productValues = 0; 
    var cart = function(){ 
    this.method = "get"; 
    } 

cart.prototype ={ 
ajax : function(obj,Url){ 
    console.log("into ajax call"); 
    $.ajax({ 
     url: Url, 
     type :"Get", 
     headers : { 
      'Accept':'Application/json', 
      'Content-Type' : 'Application/json' 
     }, 
     data : "jsonObj="+JSON.stringify(obj), 
     success : function(response) { 
      productValues= response; 
      console.log(productValues); 
      cart.run(); 
     }, 
     error : function() { 
      alert('Error while request..'); 
     } 
    }); 
}, 
remove : function(number){ 
    var obj={"identity": number }; 
    this.ajax(obj,"Cartremove"); 
    window.location.href="mycart.jsp"; 
}, 

delivery : function(number){ 
    var obj={"identity": number }; 
    this.ajax(obj,"delivery"); 
    window.location.href="delivery.jsp"; 
}, 

run : function(){ 
    console.log("into run"); 
      var count=1; 
      if(typeof productValues.obj1 === "undefined"){ 
       var h3 = document.createElement('h3'); 
       var t1 =document.createTextNode("Nothing to display"); 
       h3.appendChild(t1); 
       h3.setAttribute("align","center"); 
       document.getElementById("addtable").appendChild(h3); 
      } 
      else{ 
      $.each(productValues, function (index, value) { 
        var cell, row, table; 
        table = document.createElement('table'); 
        table.setAttribute('align','center'); 
        table.style.width= '60%'; 
        table.style.cellpadding ="19px"; 

        table.setAttribute("class","table table-bordered"); 
        row = table.insertRow(0); 
        row.setAttribute('align','center'); 
        var x= row.insertCell(0);x.innerHTML = "Type"; 
        x.style.color="white"; 
        var y= row.insertCell(1); 
        y.innerHTML = "Description"; 
        y.style.color="white"; 
        row.style.backgroundColor ="#006064"; 
        row = table.insertRow(1); row.setAttribute('align','center'); 
        var prod= row.insertCell(0); prod.innerHTML = "ProductName"; 
        prod.setAttribute("value",value.id); 
        prod.setAttribute("id","nn"); 
        row.insertCell(1).innerHTML = value.productname; 

        row = table.insertRow(2); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Price"; 
        row.insertCell(1).innerHTML = value.price; 

        row = table.insertRow(3); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Quantity"; 
        row.insertCell(1).innerHTML = value.quantity; 

        row = table.insertRow(4); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Discount"; 
        row.insertCell(1).innerHTML = value.discount; 
        var br =document.createElement("br"); 
        var add= document.getElementById("addtable"); 
        add.setAttribute("align","center"); 
        add.appendChild(br); 
        add.appendChild(br); 
        add.appendChild(table); 
        var buyBtn = document.createElement("Button"); 
        buyBtn.setAttribute("class","btn btn-primary"); 
        buyBtn.innerHTML="Buy"; 
        buyBtn.setAttribute("value",count); 
        buyBtn.setAttribute("id","deliveryBtn"); 
     buyBtn.addEventListener("click",function(){this.delivery(value.id);}); 
        add.appendChild(buyBtn); 

        var removeBtn = document.createElement("Button"); 
        removeBtn.setAttribute("class","btn btn-primary"); 
        removeBtn.innerHTML="remove"; 
        removeBtn.setAttribute("id","removeBtn"); 
        removeBtn.setAttribute("value",count); 
     removeBtn.addEventListener("click",function(){this.remove(value.id);}); 
        add.appendChild(removeBtn); 
        var div =document.createElement("div"); 
        var linebreak= document.createElement("br"); 
        div.appendChild(linebreak); 
        add.appendChild(div); 
        count++; 
      }); 
     } 
     } 
} 
function call(){ 
    console.log("into call function"); 
    var cartDetails = new cart(); 
    cartDetails.ajax("","myCart"); 
} 

Zur Klarstellung:

-I have 3 ajax calls For Remove , Delivery , Also for the page loading

In der Run-Methode Ich erstelle eine DOM-Tabelle. Wenn der Benutzer drücken Sie die Schaltfläche Entfernen Remove-Methode sollte aufgerufen werden. Und der Ajax-Ruf sollte funktionieren.

But its showing --> Uncaught TypeError: cart.run is not a function at Object.success (mycart.jsp:89)

Hinweis: Ich habe auch versucht this.run(); und das.run; mit gleichem Ergebnis .. Danke!

+0

Well 'cart.run' * ist * keine Funktion. Es gibt 'cartDetails.run' (was von' cart.prototype.run' übernommen wird). Ja, Sie sollten versuchen, 'this.run' aufzurufen, aber Sie müssen [berücksichtigen, dass es in einem Callback passiert] (https://stackoverflow.com/q/20279484/1048572) nicht die'Ajax'-Methode direkt. – Bergi

+0

** das ** hat im DOMEventlistener auch nicht funktioniert .. Möchte mehr darüber wissen. –

Antwort

0

Weil Wagen die "Klasse" ist, während cartDetails die "Instanz" dieser "Klasse" ist. Sie sollten "run" für die Instanz ausführen und nicht die Klasse selbst, weshalb cart.run() nicht funktioniert. Wenn Sie this.run verwenden, bezieht sich "this" nicht auf die Instanz, da der an den Ajax-Aufruf übergebene Callback nicht als Eigenschaft der Cart-Klasse selbst definiert wurde.

Ich habe nicht versucht, aber ich glaube, dass die folgenden sollte funktionieren:

Ihre Ajax-Funktion als Eigenschaft der Wagen Klasse definiert ist, so „dies“ auf die Instanz verweisen. Speichern Sie zu Beginn der Ajax-Funktion "this" in einer Variablen, auf die Sie später im Erfolgsrückruf zugreifen können:

ajax : function(obj,Url){ 

    var myself = this; 

    console.log("into ajax call"); 
    $.ajax({ 
     url: Url, 
     type :"Get", 
     headers : { 
      'Accept':'Application/json', 
      'Content-Type' : 'Application/json' 
     }, 
     data : "jsonObj="+JSON.stringify(obj), 
     success : function(response) { 
      productValues= response; 
      console.log(productValues); 

      myself.run(); 

     }, 
     error : function() { 
      alert('Error while request..'); 
     } 
    }); 
}, 
+0

Danke .. Es hat funktioniert. Aber das this.remove() und this.delivery() zeigten ebenfalls Fehler. Also änderte ich alles auf cart.prototype.funcName() ** und es funktionierte wie ein Zauber. Ihre Erklärung zu (diesem) hat es geklärt. –

Verwandte Themen