Variable definiert, bevor der Aufruf der Funktion nicht ändert

Question

ich auf einem JS Projekt arbeitete, und ich habe den folgenden Code:

$(document).ready(function() { 
 

 
    /** 
 
    * Need variables 
 
    */ 
 
    var providers = $("#providers"); 
 
    var pagination = $("#pagination"); 
 
    var url = "/provider/provider_id_to_change/offers"; 
 
\t 
 
    /** 
 
    * When a provider is selected 
 
    */ 
 
    providers.change(function() { 
 
\t 
 
     alert('Before Ajax: ' + url); 
 

 
     var providerID = $(this).val(); 
 

 
     url = url.replace(/provider_id_to_change/, providerID); 
 

 
     updateOffers(function(json) {}); 
 
    }); 
 

 

 
    
 
    function updateOffers(callback, page_to_visit) { 
 

 
     page_to_visit = typeof(page_to_visit) != 'undefined' ? page_to_visit : 1; 
 

 
     $.ajax({ 
 
      dataType: 'json', 
 
      url: url, 
 
      data: {page: page_to_visit} 
 
     }).done(function(json){ 
 

 
      // Do something 
 

 
\t \t \t alert('After Ajax: ' + url); 
 
\t \t \t 
 
      callback(json); 
 

 
     }); 
 
    } 
 
\t 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="providers" style="width: 100%"> 
 
\t <option value="prov_1">Provider 1</option> 
 
\t <option value="prov_2"> Provider 2</option> 
 
\t <option value="prov_3">Provider 3</option> 
 
</select>

Am ersten Ajax-Aufruf der url Variable, die ist Standardmäßig wird /provider/provider_id_to_change/offers erfolgreich geändert, aber danach können alle Ajax-Aufrufe die url nicht wie erwartet ändern. Um die verschiedenen Änderungen an der URL anzuzeigen, gibt es in meinem Code eine alert, die die erste url vor dem Ajax-Anruf und eine andere alert anzeigt, die nach dem Ajax-Anruf angezeigt wird.

Ein JSFIDDLE Demo ist verfügbar.

Bitte helfen Sie mir.

Answer 1

Hier ist eine Lösung. Sie müssen die URL für die Vorlage beibehalten, damit die Ersetzung der Zeichenfolge jedes Mal funktioniert, wenn Sie eine neue URL erstellen möchten.

$(document).ready(function() { 
 

 
    /** 
 
    * Need variables 
 
    */ 
 
    var providers = $("#providers"); 
 
    var pagination = $("#pagination"); 
 
    var url = "/provider/provider_id_to_change/offers"; 
 
    var template_url = url; // SAVE URL TEMPLATE 
 

 
    /** 
 
    * When a provider is selected 
 
    */ 
 
    providers.change(function() { 
 
\t 
 
     alert('Before Ajax: ' + url); 
 

 
     var providerID = $(this).val(); 
 

 
     url = template_url.replace(/provider_id_to_change/, providerID); 
 

 
     updateOffers(function(json) {}); 
 
    }); 
 

 

 
    
 
    function updateOffers(callback, page_to_visit) { 
 

 
     page_to_visit = typeof(page_to_visit) != 'undefined' ? page_to_visit : 1; 
 

 
     $.ajax({ 
 
      dataType: 'json', 
 
      url: url, 
 
      data: {page: page_to_visit} 
 
     }).done(function(json){ 
 

 
      // Do something 
 

 
\t \t \t alert('After Ajax: ' + url); 
 
\t \t \t 
 
      callback(json); 
 

 
     }); 
 
    } 
 
\t 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="providers" style="width: 100%"> 
 
\t <option value="prov_1">Provider 1</option> 
 
\t <option value="prov_2"> Provider 2</option> 
 
\t <option value="prov_3">Provider 3</option> 
 
</select>

Answer 2

das Problem mit dem aktuellen Code ist, dass seine nach einer bestimmten Zeichenfolge suchen und es mit Provider-ID ersetzt. Da diese Zeichenfolge in der nächsten Iteration in der ersten Iteration selbst ersetzt wird, wird die Ersetzungsfunktion nichts bewirken.

Einmal Weg, um dieses Problem anzugehen, wenn der URL-Pfad vor Anbieter-ID immer ähnlich bleiben wird .split() und .join();

Teilen Sie die URL durch "/" und ersetzen Sie den Wert am ID-Index durch Provider-ID.

providers.change(function() { 

    alert('Before Ajax: ' + url); 
    var providerID = $(this).val(); 
    var arr = url.split("/"); 
    arr[5] = providerID; // the id index 
    url = arr.join("/"); 
    updateOffers(function(json) {}); 
    }); 

Geige: https://jsfiddle.net/672nfo1t/

Answer 3

Zum einen kann man - und sollte! - Rückgabe von Ajax-Anfragen von den Funktionen, die sie ausführen. Verwenden Sie keine "Callback" -Semantik für jQuery Ajax-Anfragen mehr, das ist veraltet.

Zweitens, vermeiden Sie globale Variablen, schlicht und einfach. Versuchen Sie, Funktionen zu schreiben, die nicht vom globalen Status abhängen. Auf diese Weise können Fehler durch versehentliches Überschreiben des globalen Zustands (wie bei der Variablen url) vermieden werden.

Ihr Code kann in komprimiert werden:

$(function() { 
    $("#providers").change(function() { 
     var providerId = $(this).val(), 
      page = $("#pagination").val(); 

     getOffers(providerId, page).done(function (data) { 
      // use data ... 
     }); 
    }); 

    function getOffers(providerId, pageNum) { 
     var url = "/provider/_/offers".replace("_", encodeURIComponent(providerId)); 
     return $.get(url, { page: pageNum || 1 }); 
    } 
}); 

Drittens gibt es keinen Grund, dataType: 'json' in einer Ajax-Anfrage angeben. Stellen Sie sicher, dass der Server den richtigen Content-Type-Header sendet und jQuery automatisch das Richtige tut.

Schließlich befassen Sie sich nicht mit JSON. Sie haben mit Daten (zum Beispiel ein Objekt oder ein Array). JSON ist rein ein Übertragungsformat. Es hört auf, JSON zu sein, nachdem JSON.parse() aufgerufen wurde. Bezeichne es nicht nach diesem Zeitpunkt als JSON.