Question

I use jQuery UI dialog and Columnizer plugin to open up dialog modal window and show tables in columns (if needed). All is working great, but.. only first time I click. When I click second time on the link (whitch must open dialog), columnizer is not working, but is called.
Where can be the problem?

$('#link_to_click').live('click', function(e) {
  e.preventDefault();

  // How much items per column
  var items_per_column = 15;

  var _dialog_id = '_modal_dialog_box_1';
  var $dialog = $('<div id="'+_dialog_id+'"></div>');

  /*
  * There is getting and parsing data from JSON
  * var data is parsed and created HTML
  */

  // This is wrapper what I will tell columnizer to columnize <div's> inside this wrapper 
  data = $('<div/>', {id: 'wrapper', 'class': 'table'}).html(data);


  $dialog.html(data).dialog({
    closeOnEscape: true,
    modal:true,
    title: $(this).attr('title'),
    resizable: false,
    width: 1000
  });

  // Columnizing (columns variable is calculated by items in JSON)
  if(columns > 1) {
    $('#wrapper').columnize({columns:columns,lastNeverTallest:true});
  }
  // Fixing bug that UI dialog is not centred after showing
  $('#'+_dialog_id).dialog("option", "position", "center");

  return false;
});

So when I wirst time click to all is good – dialog shows up, data is columnized and I am happy. Then I close dialog and click once more on the #link_to_click. Dialog is shown, but columnizer does not work…

Any ideas?

Answer 1

I found the bug and solution for that. I don’t know why but if dialog is two times called, it needs to remove dynamicaly created element. So I added one line BEFORE string

var _dialog_id = '_modal_dialog_box_1';
$('#'+_dialog_id).remove(); // Need to remove else on dublicate click will not load columnizer
var $dialog = $('<div id="'+_dialog_id+'"></div>');

Now all is working fine.

Maybe someone can explain why is that?

Thanks!