success - jQuery COMO? ¿Pasar parámetros adicionales a devolución de llamada exitosa para $.ajax call?

jquery ajax example

Question

Estoy intentando, en vano que parece, poder volver a pasar parámetros adicionales al método de devolución de llamada exitosa que he creado para una llamada ajax exitosa. Un poco de historia. Tengo una página con una cantidad de pares de cuadros de texto / selectbox creados dinámicamente. Cada par que tiene un nombre único asignado dinámicamente como name = "unique-pair-1_txt-url" y name = "unique-pair-1_selectBox" entonces el segundo par tiene el mismo pero el prefijo es diferente.

En un esfuerzo por reutilizar el código, he creado la devolución de llamada para tomar los datos y una referencia al cuadro de selección. Sin embargo, cuando se activa la devolución de llamada, la referencia al cuadro de selección vuelve a aparecer como "no definido". Leí here que debería ser factible. Incluso he intentado tomar ventaja de la opción ''contexto'' pero todavía nada. Aquí está el bloque de script que estoy tratando de usar:

<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
    $j.ajax({
        type: "GET",
        url: $j(urlValue).val(),
        dataType: "jsonp",
        context: selectBox,
        success:function(data){
         loadImagesInSelect(data)
        } ,
        error:function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }

    });
}

function loadImagesInSelect(data) {
var select = $j(this);
select.empty();
$j(data).each(function() {
    var theValue = $j(this)[0]["@value"];
    var theId = $j(this)[0]["@name"];
    select.append("<option value=''" + theId + "''>" + theValue + "</option>");
});
select.children(":first").attr("selected", true);

}    
</script>

Por lo que he leído, siento que estoy cerca, pero simplemente no puedo señalar el enlace que falta. Por favor ayuda en tus típicas formas de sigilo ninja. TIA

**** ACTUALIZACIÓN **** Nick es un verdadero Ninja. ¡Deberían inventar una nueva insignia para eso! Su respuesta a continuación hace el truco. Como él menciona es 1.4 específico pero puedo vivir con eso. Aquí está mi código final que está funcionando para cualquier Ninjas en entrenamiento (y mi futura referencia):

<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
    $j.ajax({
        type: "GET",
        url: urlValue+ ''?callback=?'',
        dataType: "jsonp",
        context: selectBox,
        success: jQuery.proxy(function (data) {
            var select = $j(this);
            select.empty();
            $j(data).each(function() {
                var theValue = $j(this)[0]["@value"];
                var theId = $j(this)[0]["@name"];
                select.append("<option value=''" + theId + "''>" + theValue + "</option>");
            });
            select.children(":first").attr("selected", true);
        }, selectBox),
        error:function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
}
</script>

Answer 1

this está fuera de alcance

Solo para que usted (o cualquier otra persona) entienda (s) ¹ , la razón por la que this no estaba definido en loadImagesInSelect() en su ejemplo original fue porque esa función estaba bajo un alcance diferente, y los ámbitos no "caen en cascada" como ese ² .

Cuando especificó un "contexto" de selectBox en su llamada AJAX, configuró el contexto ( this ) para las funciones asignadas a "éxito" y "error". (Da la casualidad de que ambas eran funciones anónimas). En este punto, this se define en ambas funciones, como el valor de selectBox . Ahora, en la función pasada a "éxito", llamas a loadImagesInSelect() . Cuando llamas a una función, crea un nuevo ámbito. En este ámbito, this window será en modo no estricto y undefined en modo estricto.

Poner gráficamente (en modo estricto ³ ):

// this = window (global scope)

$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {

    // this = undefined (function scope level 1)

    $j.ajax({
        type: "GET",
        url: $j(urlValue).val(),
        dataType: "jsonp",
        context: selectBox,
        success: function(data) {

            // this = selectBox (function scope level 2)

            loadImagesInSelect(data);
        },
        error: function(xhr, ajaxOptions, thrownError) {

            // this = selectBox (function scope level 2)

            alert(xhr.status);
            alert(thrownError);
        }
    });
}

function loadImagesInSelect(data) {

    // this = undefined (function scope level 3)

    var select = $j(this);
    select.empty();
    $j(data).each(function() {
        var theValue = $j(this)[0]["@value"];
        var theId = $j(this)[0]["@name"];
        select.append("<option value=''" + theId + "''>" + theValue + "</option>");
    });
    select.children(":first").attr("selected", true);
}

$.proxy() es redundante

El uso de $.proxy() en su código actualizado es redundante. Utiliza $.proxy() para llevar this a la función que antes se llamaba loadImagesInSelect() , pero de todos modos la movió a "éxito" (en lugar de llamarlo desde "éxito"). Ya tiene acceso ahora al valor de this especificado por "contexto".

Podría eliminar el $.proxy() su función de "éxito" en su código actualizado y aún funcionaría.

Sé que han pasado años desde que hiciste tu pregunta, pero espero que esto ayude.

1. Espero que esto no parezca condescendiente; No debería ser.
2. Al menos, no cuando llamas a una función, y no con contexto. Si define una función dentro de una función (es decir, un cierre), entonces cualquier variable en la función externa estará disponible en la función interna. Sin embargo , el contexto de la función externa (la variable) todavía no está disponible en la función interna.
3. Reemplace undefined con window para modo no estricto.
4. O el Function.prototype.bind() nativo en ECMAScript 5.

Answer 2

Esto es lo que hice, y también funcionó bien:

$.ajax(''URL'', {
    myCustomControl: selectBox,
    myCustomVariable: ''teste'',
    data:
    {
       myData: 1
    },
    success: function (data, textStats, jqXHR) {
        myFunction(data, textStats, jqXHR, this.myCustomControl, this.myCustomVariable);
    }   
});

Puede agregar controles y variables a los parámetros de su llamada ajax.

Answer 3

Ponga esto en sus parámetros $ .ajax.

invokedata: {
    data1: "yourdata",
    data2: "moredata"
}

En la función de éxito utilízalo así.

this.invokedata.data1;
this.invokedata.data2;

Tu llamada $ .ajax y la función de éxito también deben ser parte del mismo objeto. Pon tus funciones en un objeto y defínelas así.

function myObject {
    var getImage = function(..) { }
    var loadImagesInSelect = function(..) { }
}

Answer 4

Puedes usar el atributo indexValue para pasar:

var someData = "hello";

jQuery.ajax({
    url: "http://maps.google.com/maps/api/js?v=3",
    indexValue: {param1:someData, param2:"Other data 2", param3: "Other data 3"},
    dataType: "script"
}).done(function() {
    console.log(this.indexValue.param1);
    console.log(this.indexValue.param2);
    console.log(this.indexValue.param3);
}); 

Answer 5

Actualizado: si está utilizando jQuery 1.4, use esto para simplificar un poco las cosas:

success: jQuery.proxy(function (data) {
    var select = $j(this);
    select.empty();
    $j(data).each(function() {
        var theValue = $j(this)[0]["@value"];
        var theId = $j(this)[0]["@name"];
        select.append("<option value=''" + theId + "''>" + theValue + "</option>");
    });
    select.children(":first").attr("selected", true);
}, selectBox)