Home/ Questions/Q 7969111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:11:10+00:00

This jquery ui dialog is filled with html and form values from an ajax

  • 0

This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don’t see a clear answer. I have tried close, empty, destroy but the combination isn’t working the way I need it. Any ideas?

$("#StoreForm").dialog({
    autoOpen:false, 
    width:500, 
    height:900, 
    modal:true,
    buttons: { 
   OK: function() { 
   $('#StoreForm').dialog('close'); 
$(this).dialog('hide');
$(this).dialog('empty'); 
 }, 
 'Save': function() { 
  $(this).dialog('empty'); 
 } 

 }

 });


 //additional code to click and open the dialog

 $(".sel").unbind('click');
 $(".sel").on("click", function(e){
e.preventDefault();                 
 $("#StoreForm").dialog('open');
 var valueSelected = $(this).closest('tr').children('td.item').text();                                  
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo', 
                                queryFormat: 'column',
                            returnFormat: 'JSON',
productID:   valueSelected

},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);

$("#color").val(response.DATA.COLOR_ATTRIB);

                            $("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);

$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>", 
      response.DATA.FULL_DESCRIPTION [0], "</p>") 
                            $("#StoreForm").prepend(w.join(""));
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..

     //set up dialog with options

$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
    Cancel: function(){

        $('#StoreForm').dialog('close');
        $('#StoreForm').html("");

    },

//pop-up individual items

    "Add to Cart": function(){
            $.ajax({
            url: $("#storeCart").attr('action'),
            data: $("#storeCart").serializeArray(),
            type: 'POST',
            success: function(response){

                  var name = $( "#name" ),
    email = $( "#email" ),
    password = $( "#password" ),
    allFields = $( [] ).add( name ).add( email ).add( password ),
    tips = $( ".validateTips" );

if you have any questions please respond. Thanks
    • 0