problem with jquery dialog

Question

I have a partial view with a dropdown (with Paid and unpaid as options) and a button. I am loading this partial view using jquery load, when the user click Paid/Unpaid List link in the sub menu of a page.

When i select Paid in dropdown and click the button, it shows the list of paid customers in the jquery dialog and if i select Unpaid and click button, it shows unpaid customers in the jquery dialog.

I am writing the following code for the dialog:

 $('#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
        });

For the first time, i am getting the list correctly in the jquery dialog, but when i click the Paid/Unpaid List link again and select Unpaid in the dropdown and click the button, it shows the previos loaded content in the jquery dialog.

What am i doing wrong here?

Answer 1

Try adding no-caching option to jQuery AJAX. I had problems with the load() function (and IE) where cached results would always be shown. To change the setting for all jQuery AJAX requests do

$.ajaxSetup({cache: false});

Answer 2

Try add this after open:

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

Example:

    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();

          },