JQuery.UI Dialog & $().load() & JavaScript

[Gregg Bolinger]

On an event I am showing a JQuery.UI dialog. The way JQuery.UI Dialog works is it expects an existing DIV to simply transform into the dialog. I need a form in the dialog but I need it populated and shown via ajax. So here is how I go about doing that.

$("img[title=edit_syn]").css("cursor", "pointer").click(function() {
        var dialog = $("<div class='flora'></div>").insertAfter('#searchTable');
        $(dialog).load("/aw/action/synonyms/display/" + this.id, function() {
          $(dialog).dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450
          });
          $('.ui-dialog-titlebar-close').click(function() {
            $('searchTable').remove(dialog);            
          })
        });
      });

Note that the following line...

$(dialog).load("/aw/action/synonyms/display/" + this.id, function() {...});

...takes the DIV element I created and performs an AJAX request to get the desired HTML. That HTML looks like...

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/ingrid/ingrid.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery/ingrid/jquery.ingrid-0.9.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/edit_synonyms.js"></script>
<h3>Synonyms for "${actionBean.globalMerchant.name}" Merchant</h3>
<div id="syn_container">
  <jsp:include page="syn_results.jsp"/>
</div>
 
<p>
  <div id="syn_errors"></div>
  <input type="text" name="synonym.name" id="synonym.name"/>
  <button id="add_syn_button">Add Synonym</button>
</p>
 
<input type="hidden" name="synonym.globalMerchantFk" id="synonym.globalMerchantFk"
       value="${actionBean.synonym.globalMerchantFk}"/>

This works. Note that now I have a script being loaded for this html. This code is where the problem eventually occurs. The first time I show the dialog everything works. There is a text field and a button. I enter something in the text field and hit enter or click the button and that value is submited via AJAX to the server and a table in the dialog is updated. However, subsequent times showing the dialog part of the script isn't working but no errors are being thrown.

$(function() {
  $('#synonym\\.name').keyup(function(e) {
    if (e.keyCode == 13) {
      saveSynonym();
    }
  });
  $('#add_syn_button').click(function() {
    saveSynonym();
  });
});
 
function saveSynonym() {
  var syn = $('#synonym\\.name').val();
  if (syn.length == 0 || syn == null) {
    $('#syn_errors').css("color", "red").css("font-weight", "bold").html("Please enter a name");
  }else{
    $.post('/aw/action/synonyms/save/', {'synonym.globalMerchantFk':$('#synonym\\.globalMerchantFk').val(), 'synonym.name':$('#synonym\\.name').val()}, function() {
      $('#syn_container').load('/aw/action/synonyms/load/' + $('#synonym\\.globalMerchantFk').val());
    });
    $('#synonym\\.name').val("");
    $('#syn_errors').html("");
  }
}

The saveSynonym() function is always called. if I alert the lengh of $('#synonym\\.name') it is always 1 so I know it is only finding one element. However, $('#synonym\\.name').val() is coming back empty. Normally, that would trigger the error portion of the code. But the error isn't showing up either.

Just to reiterate, the first time the dialog is shown everything works as expected. Subsequent times it does not.