Accessing a list after AJAX call

Accessing a list after AJAX call

I have a page that creates one unordered list from the contents of another list. The second list is created from a database query and is hidden on the page. I have written a JQuery function shown below that does an AJAX call which causes the hidden list to be created and that is working perfectly. The problem is that when the code following the AJAX call is executed it doesn't see the hidden list. The alert message displays 0 the first time. clicking on the Load button a second time results in the first list being displayed. If I click on the Load button a third time, the previously loaded list is displayed; click on a fourth time and the new list is displayed.

In other words, it takes two cycles to display the correct list. I am at a loss as to what might be the problem. Other than this issue the code does what I need it to do.

Any ideas or suggestions?

Thanks in advance.

Chuck

  1. $(function() {  
  2.     var idealist = ''; // Contains the name of the selected idealist
  3.     var listid = ''; // Contains the record id in the idealist table for the idealist selected
  4.     var item = $('#itemselected');
  5.    
  6.     // Get the idea list name from the dialog box list of idea lists.
  7.     $("#selectlist").change(function(){
  8.         $("option:selected", $(this)).each(function(){   
  9.             idealist = $(this).text(); // the selected option text is the name of the list
  10.             listid   = $(this).val();  // the selected option value is the list id in the idealist table          
  11.             $(item).html('Idea list to be loaded: ' + idealist);
  12.         });
  13.     }).trigger('change');
  14.        
  15.     // The user has selected an idea list from
  16.     // the dialog box so process it.
  17.     var execute = function() {
  18.         // Send the id of the idea list to the
  19.         // loadideas method of the design controller.
  20.         $.ajax({
  21.             type: 'POST',
  22.             url: 'design/loadideas',
  23.             data: {idealist: listid},
  24.             dataType: 'text',
  25.             success: function(){
  26.                 $('#idealist-gallery').load('design/getFabrics');
  27.             }
  28.         });
  29.        
  30.         // Clear the list and headings
  31.         $('#idealist-subhead').empty();
  32.         $('#idealist').empty();
  33.        
  34.         // Show the idea list name in the subheading
  35.         $('#idealist-subhead').append('<span>'+idealist+'</span>');
  36.        
  37.         // Create the idea list from the idealist-gallery
  38.         var fabriclist = $('#gallery > li', '#idealist-gallery');
  39.         alert($(fabriclist).size());
  40.         $(fabriclist).each(function(){
  41.             var caption = $(this).find('a').attr('title');
  42.             var image   = 'li#'+$(this).attr('id')+' a';
  43.             var thumb = '<img id="idea-image-' + $(this).attr('id') + '" class="idea-image'
  44.                            + '" src="'+$(image).attr('href')
  45.                            + '" title="'+ caption + '" alt="'+ caption + '" width="20" height="20" />';
  46.             $('#idealist').append($('<li class="idealist-item"'
  47.                                              + ' id="' + 'idealist-item-' + $(this).attr('id') + '">'
  48.                                              + thumb + '<div>' + caption + '</div></li>'));
  49.                                                        
  50.             // SET UP DRAGGABLES
  51.             $('#idealist-item-'+$(this).attr('id')+' img').draggable({helper:"clone",opacity:".5"});
  52.            
  53.             // SET UP DROPPABLE AREAS
  54.             var options = {};          
  55.             options.accept = '.idea-image';
  56.             options.drop = function(event,info){ this.src = $(info.draggable).attr('src');};
  57.            
  58.             $('#grid-tablecloth').droppable(options);
  59.             $('#grid-overlay').droppable(options);
  60.             $('#grid-runner').droppable(options);
  61.             $('#grid-napkin').droppable(options);
  62.             $('#grid-chaircover').droppable(options);
  63.             $('#grid-chairaccessory').droppable(options);
  64.         });
  65.        
  66.         // Close the dialog box
  67.         $("#loadidealist").dialog("close");  
  68.     }
  69.     // Cancel button function
  70.     var cancel = function() {       
  71.         //close the dialog
  72.         $("#loadidealist").dialog("close");
  73.     }
  74.  
  75.     // Set the dialog options including the button functions for Load and Cancel.
  76.     var dialogOpts = {
  77.         resizable: false,
  78.         autoOpen: false,
  79.         modal: true,
  80.         zIndex: 9999,   
  81.         position: ['center','center'],
  82.         buttons: {
  83.             "Load":   execute,
  84.             "Cancel": cancel
  85.         }
  86.     };
  87.    
  88.     // The autoOpen option is false, the widget is created but not displayed.
  89.     $("#loadidealist").dialog(dialogOpts);
  90.    
  91.     // The user must be logged in to be able to load an idea list.
  92.     $("#load-ideas").click(function() {      
  93.         // If the user is not logged in the Load button will have a class of disabled.
  94.         if($(this).hasClass('disabled')) {
  95.             // Display an error message
  96.             $('#thanks').remove();
  97.             $('.list-message').addClass('idealisterror');
  98.             $('<p id="thanks">').text('You must be logged in.').appendTo($('.list-message'));
  99.         } else {
  100.             // Toggle the dialog box
  101.             ($("#loadidealist").dialog("isOpen") == false) ? $("#loadidealist").dialog("open")
  102.                                                                              : $("#loadidealist").dialog("close");
  103.         }
  104.     });  
  105. });