Question

I have the following jQuery Tools overlay:

<div id='editDescriptiontOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>

Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.

The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.

The validation logic has been independently verified to work.

I’ve tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.

I’ve also tried binding a click event to the Save button immediately after generating the overlay, like so:

$('.save', $('#editDescriptionOverlay'))
  .unbind('click')
  .bind('click', function() {
    if (validateText) {
      console.log("Validation passed.");
      $('a[rel=#editDescriptionOverlay]').overlay().close();
    }
    else {
      console.log("Validation failed.");
    }
  });

The console.log’s confirm that the validation is working, but the overlay doesn’t close.

Any insight is appreciated, thanks.

Answer 1

For jquery widgets, public methods should be called as follows:

$(‘a[rel=#editDescriptionOverlay]’).overlay(“close”);

wherein close is the method name that you wish to call.

If a method accepts parameters, then, these should be added as parameters right after the method name.

Updated:

I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:

<script type="text/javascript">

    $(document).bind("ready", function(e){
        $("a[rel]").overlay();
        $('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
            if (validationValue){
                $("a[rel=#editDescriptionOverlay]").overlay().close();
            }
        });
    });

    function clickThis(){
        $("a[rel=#editDescriptionOverlay]").trigger('click'); 
        return false;
    }
</script>

<a href="#" onclick="return clickThis();">Edit1</a>
<a href="#" onclick="return clickThis();">Edit2</a>

<a rel="#editDescriptionOverlay">Dummy</a>

<div id='editDescriptionOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>