jQuery Forum

Hi all,

I'm getting weird behaviour from jquery. I got the follow situation.

I'm working on a application which uses a dialog screen to search the database. When the user has found a result he clicks on the link and the selected is stored in the database. This works the first time. The dialog box closes and updates the database using the formremote defined in _searchDiagnosis.gsp. But the second time I'm getting not what I'm expecting. When the dialog box disappears and it calls a function which is defined in _commons.gsp using g:formremote:

1. <g:formRemote url="[action: 'submitEditRecord']" name="editRecordForm"
       class="ajaxForm" update="editRecordForm" asynchronous="false">
   

I have a gsp file called _common.gsp. This gsp includes a template

<g:render template="searchDiagnose"/>

This is what _searchDiagnose.gsp looks like:

1. <div id="dialog" class="web_dialog">
       <g:formRemote url="[action: 'diagnoseByCode']" name="diagnoseByCode"
           class="ajaxForm" update="diagnoseResults" asynchronous="false">
           <g:hiddenField name="record_id" value="${record_id}" />
          <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
               <tr>
                  <td><h2>Diagnose zoeken</h2></td>
                  <td class="web_dialog_title align_right">
                     <a href="#" id="btnClose"><h2>Close</h2></a>
                  </td>
               </tr>
                    <tr>
                   <td class="noBorder">
                       <label for="code">Hoofddiagnose code</label>
                       <g:textField id="search_code" name="code"/>
                   </td>
                      <td class="noBorder">
                       <label for="omschrijving">Hoofddiagnose omschrijving</label>
                       <g:textField name="search_description"/>
                      </td>
               </tr>
          </table>
          <div id="searchResultsAjaxOutput"></div>
       </g:formRemote>
   </div>
   
   <script type="text/javascript">
   //<![CDATA[
      
   $(document).ready(function ()
   {
       $("#diagnose_id").click(function (event)
       {
           ShowDialog(true);
           event.preventDefault();
       });
   
       $("input[name='record?.registrationChanges.diagnose.description']").click(function (event)
       {
           ShowDialog(true);
           event.preventDefault();
       });   
      
       $('#search_code').live('keyup',function(event) {
           searchDiagnose();
           event.preventDefault();
       });
   
       $('#search_description').live('keyup',function(event) {
           searchDiagnose();
           event.preventDefault();
       });
      
       $("#btnClose").click(function (event)
       {
           HideDialog();
           event.preventDefault();
       });
   
   });
   
   function ShowDialog(modal)
   {
       $("#overlay").show();
       $("#dialog").fadeIn(300);
   
       if (modal)
       {
           $("#overlay").unbind("click");
       }
       else
       {
           $("#overlay").click(function (e)
           {
               HideDialog();
           });
       }
   }
   
   function HideDialog()
   {
       $("#overlay").hide();
       $("#dialog").fadeOut(300);
       $('#search_code').val("");
       $('#search_description').val("");
       $('#searchResultsAjaxOutput').html("");
   }
   
   function searchDiagnose() {
       var search_code = $('#search_code').val();
       var search_description = $('#search_description').val();
       $.ajax({
          url: "${createLink(controller:'record', action:'diagnoseByCode')}",
          dataType: 'html',
          data: {search_code: search_code, search_description: search_description },
          beforeSend: function() {
              $('#searchResultsAjaxOutput').html("Zoeken naar diagnose");
          },
          success: function(data) {
              $('#searchResultsAjaxOutput').html(data);
          },
          error: function() {
              $('#searchResultsAjaxOutput').html("Om een onbekende reden is het zoeken mislukt.");
          }
   
       });
   }
   
   
      //]]>
   </script>

This is what the results page looks like:

1. <jq:jquery>
       $("a.button").button();
   </jq:jquery>
   
   <div id="searchResults">
       <fieldset>
           <div class="field-set-header">
               <h2>Zoekresultaten</h2>
           </div>
   
           <div class="field-set-content">
               <div class="list">
   
                   <table class="dataTable fullWidth">
                       <thead>
                       <tr>
                           <th>Code</th>
                           <th>Omschrijving</th>
                       </tr>
                       </thead>
                       <tbody>
                       <g:each in="${searchResults}" var="resultInstance">
                           <tr id="${resultInstance.id }">
                               <td>${resultInstance.code}</td>
                               <td>${resultInstance.value}</td>
                           </tr>
                       </g:each>
                       </tbody>
                   </table>
               </div>
           </div>
       </fieldset>
   </div>
   <script type="text/javascript">
   //<![CDATA[
       $("#searchResults").delegate("td", "click", function() {
           var diagnoseId = $(this).parent().attr("id");
           var record_id = $('#record_id').val();
           $.ajax({
               url: "${createLink(controller:'record', action:'updateDiagnose', id:id)}",
               dataType: 'json',
               data: { record_id:record_id, hoofdDiagnoseCode_checkbox:'on', 'registrationChanges.diagnose.id': diagnoseId },
               success: function(data) {
   
                   var modified_by = data.modifiedBy[0].value;
   
                   if(modified_by.toLowerCase() == 'code') {
                       for (var idx in data.fields) {
                          
                           if(data.fields[idx].field == 'diagnose_id') {
                               $("#" + data.fields[idx].field).html(data.fields[idx].value);
                           }
      
                           if(data.fields[idx].field == 'diagnose_omschrijving'){
                               $("#" + data.fields[idx].field).html(data.fields[idx].value);
                           }
      
                           if(data.fields[idx].field == 'ccs_omschrijving'){
                               $("#" + data.fields[idx].field).html(data.fields[idx].value);
                           }
                       }
                   } else if(modified_by.toLowerCase() == 'omschrijving') {
                      
                       for (var idx in data.fields) {
   
                           if(data.fields[idx].field == 'label_diagnose_id') {
                               $("#" + data.fields[idx].field).html(data.fields[idx].value);
                           }
      
                           if(data.fields[idx].field == 'diagnose_description'){
                               $("#" + data.fields[idx].field).val(data.fields[idx].value);
                           }
      
                           if(data.fields[idx].field == 'ccs_omschrijving'){
                               $("#" + data.fields[idx].field).html(data.fields[idx].value);
                           }
                       }                   
                   }
                   HideDialog();
               }
           });
          
           return false;
       });
       //]]>
   </script>
   

It seems like because the _commons.gsp page detects a change it fires off a remote call. Any suggestions on how I can disable this call?

Kind regards,

Josip