Aktualisieren Sie einen Wert, BEVOR Sie eine Funktion mit ajax ausführen

Question

Beim Laden der Seite führt der folgende Code eine API-Anforderung aus und gibt das Ergebnis zurück. Ich habe dann einen Code, der bei Änderung eines Selektors eine der Variablen mit dem Wert dieses Selektors aktualisiert und dann die API mit der Funktion newsFeed() erneut anfordert;

Mein Problem ist die Variable wird nicht aktualisiert, bevor die Funktion ausgeführt wurde.

Wie aktualisieren Sie einen Wert, bevor Sie eine Funktion mit ajax ausführen?

$(document).ready(function() { 

var api = '//www.url.com' 
var search = 'search?' 
var orderBy = 'newest' 

var url = api + search + orderBy 

//API Call Setup   
function newsFeed(data) { 

    $.ajax({ 
     url: url, 
     success: function results(data) { 
      for (var i =0; i < data.response.total; i++) { 
       var content = '<li>' + data.response.results[i] + '</li>'; 
       $('#news').append(content);  
      //end of for loop 
      };     
     } 
    });  
} 

newsFeed(); 

$("#selector").change(function(){  
    $('#news').empty(); //remove all child nodes 
    orderBy = $("#orderBy :selected").text();   
    newsFeed(); 
}); 
}); 

Answer 1

Sie die Aktualisierung der orderBy Variable, dann aber nicht url mit, dass die Aktualisierung. Verschieben Sie die Deklaration von url so, dass es im selben Block wie der AJAX-Aufruf ist.

$(document).ready(function() { 

    var api = '//www.url.com'; 
    var search = 'search?'; 
    var orderBy = 'newest'; 

    //API Call Setup   
    function newsFeed(data) { 

     var url = api + search + orderBy; // This line has been moved 

     $.ajax({ 
      url: url, 
      success: function results(data) { 
       for (var i =0; i < data.response.total; i++) { 
        var content = '<li>' + data.response.results[i] + '</li>'; 
        $('#news').append(content);  
       };     
      } 
     });  
    } 

    ... 

Answer 2

Sie müssen Ihren Code so arrangieren:

$(document).ready(function() { 

var api = '//www.url.com' 
var search = 'search?' 
var orderBy = 'newest' 

var url = api + search + orderBy 


$("#selector").change(function(){  
    $('#news').empty(); //remove all child nodes 
    orderBy = $("#orderBy :selected").text();   
    newsFeed(); 
}); 


//API Call Setup   
function newsFeed(data) { 

    $.ajax({ 
     url: url, 
     success: function results(data) { 
      for (var i =0; i < data.response.total; i++) { 
       var content = '<li>' + data.response.results[i] + '</li>'; 
       $('#news').append(content);  
      //end of for loop 
      };     
     } 
    });  
} 

    newsFeed(); 

}); 

Answer 3

In Ihrem Ajax-Aufruf, die Sie anfordern url: url

$.ajax({ 
     url: url, 

Mit url definiert als

var url = api + search + orderBy 

Aber var url wird nicht magisch aktualisiert, indem man einen Wert der zusammensetzenden Variablen ändert. Sobald Sie url eingestellt haben (bis Sie es aktualisieren), das wäre die Variable, die Sie aktualisieren müssen.

Der schnellste Update wird nur loswerden var url überhaupt und verwenden Sie die Ajax-Aufruf wie

$.ajax({ 
     url: api + search + orderBy, 

Answer 4

Wie Baao sagte, Ihre url Variable innerhalb newsFeed() nicht aktualisiert. Ich würde vorschlagen, Variablen als Parameter an die newsFeed Funktion übergeben.

$(document).ready(function() { 

    var api = '//www.url.com' 
    var search = 'search?' 
    //API Call Setup   
    function newsFeed(orderBy) { 
    // set url every time function is called 
    var url = api + search + orderBy 

    $.ajax({ 
     url: url, 
     success: function results(data) { 
      for (var i =0; i < data.response.total; i++) { 
       var content = '<li>' + data.response.results[i] + '</li>'; 
       $('#news').append(content);  
      //end of for loop 
      };     
     } 
    });  
    } 

    // First call with default orderBy value 
    newsFeed('newest'); 

    $("#selector").change(function(){  
    $('#news').empty(); //remove all child nodes 
     orderBy = $("#orderBy :selected").text();   
     newsFeed(orderBy); 
    }); 
});