name - jquery selector

jquery-devuelve valor usando ajax resultado en caso de éxito

Question

Tengo un pequeño problema con la función jquery $ .ajax ().

Tengo un formulario donde cada clic en el botón de opción o selección en el menú desplegable crea una variable de sesión con el valor seleccionado.

Ahora - tengo uno de los menús desplegables que tienen 4 opciones - el primero (con la etiqueta Ninguno) tiene un valor = "" otros tienen sus identificadores.

Lo que quiero que suceda es una opción Ninguno (con valor en blanco) para eliminar la sesión y otra para crear una, pero solo si la sesión con este nombre de selección específico no existe ya que todas las demás opciones tienen la misma cantidad asignada. - solo indica cuál fue seleccionado.

No estoy seguro si eso tiene sentido, pero eche un vistazo al código, quizás esto lo aclare:

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children(''option'').attr(''label'');
        var name = $(this).attr(''name'');
        var val = $(this).val();


        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            if(isSession(name) == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession(''order_price_addon'', price);         
        updateTotal();
});

así que, antes que nada, cuando el menú de selección #add_ons desencadena "cambiar", obtenemos algunos valores de unos pocos elementos para los cálculos.

obtenemos el atributo de etiqueta de la opción de nuestra selección que almacena el valor que se agregará al total, nombre de la selección para crear una sesión con este nombre y valor para luego verificar cuál fue seleccionado.

ahora - verificamos si val == "" (lo que indicaría que la opción Ninguno ha sido seleccionada) y deducimos la cantidad del total, así como también eliminamos la sesión con el nombre del selecto.

Después de esto es donde comienza el problema - declaración else.

De lo contrario, queremos verificar si la función isSession () con el nombre de nuestro selector devuelve 0 o 1 - si devuelve 0, entonces agregamos al total el valor almacenado en el atributo de etiqueta, pero si devuelve 1 - eso sugeriría esa sesión ya existe, entonces solo cambiamos el valor de esta sesión recreándola, pero la cantidad no se agrega.

Ahora la función isSession se ve así:

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            return data;
        },
        error: function() {
            alert(''Error occured'');
        }
    });
}

Ahora - el problema es - que no sé si el uso de "retorno" devolverá el resultado de la función, ya que no parece funcionar, sin embargo, si pongo los "datos" en la sección de éxito en el alerta: parece devolver el valor correcto.

¿Alguien sabe cómo devolver el valor de la función y luego compararlo en la siguiente declaración?

Gracias chicos. Lo probé de la siguiente manera:

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            updateResult(data);
        },
        error: function() {
            alert(''Error occured'');
        }
    });
}

luego la función updateResult ():

function updateResult (data) {result = data; }

resultado - es la variable global - que estoy tratando de leer:

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children(''option'').attr(''label'');
        var name = $(this).attr(''name'');
        var val = $(this).val();


        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            isSession(name);
            if(result == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession(''order_price_addon'', price);         
        updateTotal();
    });

pero por alguna razón, no funciona, ¿alguna idea?

Answer 1

Agregue async: false a su lista de atributos. Esto fuerza al hilo de JavaScript a esperar hasta que se recupere el valor de retorno antes de continuar. Obviamente, no querría hacer esto en todas las circunstancias, pero si se necesita un valor antes de continuar, esto lo hará.

Answer 2

El problema es que no puede devolver un valor de una llamada asincrónica, como una solicitud AJAX, y espera que funcione.

El motivo es que el código que espera la respuesta ya se ejecutó para cuando se recibió la respuesta.

La solución a este problema es ejecutar el código necesario dentro del success: devolución de llamada. De esta forma, solo está accediendo a los data cuando están disponibles.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert(''Error occured'');
        }
    });
}

Otra posibilidad (que en realidad es lo mismo) es llamar a una función dentro de su success: devolución de llamada que pasa los datos cuando está disponible.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert(''Error occured'');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

Answer 3

Hay muchas formas de obtener la respuesta jQuery AJAX. Estoy compartiendo con ustedes dos enfoques comunes:

Primero:

use async = false y dentro de la función return ajax-object y luego obtenga la respuesta ajax-object.responseText

/**
 * jQuery ajax method with async = false, to return response
 * @param  {mix}  selector - your selector
 * @return {mix}           - your ajax response/error
 */
function isSession(selector) {
    return $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: {
            issession: 1,
            selector: selector
        },
        dataType: "html",
        async: !1,
        error: function() {
            alert("Error occured")
        }
    });
}
// global param
var selector = !0;
// get return ajax object
var ajaxObj = isSession(selector);
// store ajax response in var
var ajaxResponse = ajaxObj.responseText;
// check ajax response
console.log(ajaxResponse);
// your ajax callback function for success
ajaxObj.success(function(response) {
    alert(response);
});

Segundo:

utilice el método $ .extend y realice una nueva función como ajax

/**
 * xResponse function
 *
 * xResponse method is made to return jQuery ajax response
 * 
 * @param  {string} url   [your url or file]
 * @param  {object} your ajax param
 * @return {mix}       [ajax response]
 */
$.extend({
    xResponse: function(url, data) {
        // local var
        var theResponse = null;
        // jQuery ajax
        $.ajax({
            url: url,
            type: ''POST'',
            data: data,
            dataType: "html",
            async: false,
            success: function(respText) {
                theResponse = respText;
            }
        });
        // Return the response text
        return theResponse;
    }
});

// set ajax response in var
var xData = $.xResponse(''temp.html'', {issession: 1,selector: true});

// see response in console
console.log(xData);

puedes hacerlo tan grande como quieras ...

Answer 4

Hola, intento asincrónico: falso en tu llamada ajax.

Answer 5

Vi las respuestas aquí y, aunque útiles, no eran exactamente lo que quería ya que tuve que alterar mucho mi código.

Lo que funcionó para mí, fue hacer algo como esto:

function isSession(selector) {
    //line added for the var that will have the result
    var result = false;
    $.ajax({
        type: "POST",
        url: ''/order.html'',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        //line added to get ajax response in sync
        async: false,
        success: function(data) {
            //line added to save ajax response in var result
            result = data;
        },
        error: function() {
            alert(''Error occured'');
        }
    });
    //line added to return ajax response
    return result;
}

La esperanza ayuda a alguien

Anakin

Answer 6

Esto es bastante viejo y feo, no hagas esto. Deberías usar devoluciones de llamada: https://.com/a/5316755/591257
Tenía el mismo problema, lo resolvió de esta manera, usando una var. No estoy seguro si es el mejor pero seguramente funciona. En caso de error, obtiene una cadena vacía (myVar = ''''), por lo que puede manejarlo según sea necesario.

var myVar = '''';
function isSession(selector) {
  $.ajax({
    ''type'': ''POST'',
    ''url'': ''/order.html'',
    ''data'': {
      ''issession'': 1,
      ''selector'': selector
    },
    ''dataType'': ''html'',
    ''success'': function(data) {
      myVar = data;
    },
    ''error'': function() {
      alert(''Error occured'');
    }
  });
  return myVar;
}

Answer 7

// Common ajax caller
function AjaxCall(url,successfunction){
  var targetUrl=url;
  $.ajax({
    ''url'': targetUrl,
    ''type'': ''GET'',
    ''dataType'': ''json'',
    ''success'': successfunction,
    ''error'': function() {
      alert("error");
    }
  });
}

// Calling Ajax
$(document).ready(function() {
  AjaxCall("productData.txt",ajaxSuccessFunction);
});

// Function details of success function
function ajaxSuccessFunction(d){
  alert(d.Pioneer.Product[0].category);
}

puede ayudar, crear una función de llamada ajax común y adjuntar una función que invoque cuando tenga éxito la llamada ajax, vea el ejemplo