remove - parents jquery

problema con el diálogo jquery

Question

Tengo una vista parcial con un menú desplegable (con opciones Paid and unpaid ) y un botón. Estoy cargando esta vista parcial usando jquery load, cuando el usuario hace clic en el Paid/Unpaid List link en el submenú de una página.

Cuando selecciono Pagado en el menú desplegable y hago clic en el botón, aparece la lista de clientes pagados en el cuadro de diálogo de jquery y si selecciono Sin pagar y hago clic en el botón, se muestran los clientes no pagados en el cuadro de diálogo de jquery.

Estoy escribiendo el siguiente código para el diálogo:

 $(''#customers'').dialog({
            bgiframe: true,
            autoOpen: false,
            open: function(event, ui) {
                //populate table
                var p_option = $(''#d_PaidUnPaid option:selected'').val();
                if (p_option  == ''PAID'') {
                    $("#customercontent").html('''');
                    //$("#customercontent").load("/Customer/Paid");
                }
                else if (p_option  == ''UNPAID'') {
                    $("#customercontent").html('''');
                    //$("#customercontent").load("/Customer/Unpaid");
                }
            },
            close: function(event, ui) {
                //do nothing
            },
            height: 500,
            width: 550,
            modal: true
        });

Por primera vez, obtengo la lista correctamente en el diálogo de jquery, pero cuando hago clic nuevamente en el Paid/Unpaid List link selecciono No Pagado en el menú desplegable y hago clic en el botón, muestra el contenido cargado anteriormente en el diálogo de jquery.

¿Qué estoy haciendo mal aquí?

Answer 1

Intente agregar la opción sin almacenamiento en caché a jQuery AJAX. Tuve problemas con la función load () (y IE) donde siempre se mostrarían los resultados almacenados en caché. Para cambiar la configuración de todas las solicitudes jQuery AJAX, haga

$.ajaxSetup({cache: false});

Answer 2

Intente agregar esto después de abrir:

$(''#customers'').empty().remove();

Ejemplo:

    open: function(event, ui) {
              //populate table
              var p_option = $(''#d_PaidUnPaid option:selected'').val();
              if (p_option  == ''PAID'') {
                  $("#customercontent").html('''');
                  //$("#customercontent").load("/Customer/Paid");
              }
              else if (p_option  == ''UNPAID'') {
                  $("#customercontent").html('''');
                  //$("#customercontent").load("/Customer/Unpaid");
              }

              $(''#customers'').empty().remove();

          },

Answer 3

Espero no ser demasiado tarde para encontrar una respuesta correcta. Tuve el mismo problema y lo resolví con los siguientes ajustes de ajax.

open: function () {
      jQuery.ajaxSetup({
             cache: false
       });
       //populate table or do what you want...
}