Put a Href inside Jquery DIalog to close it

Hi,

I would like to put inside my page set inside a jquery dialog modal a a href to close  the modal dialog. I know how to put a button when i create the dialog but impossible to add a simple link to close it.

Thanks in advance.


quarkmikeAsked:
Who is Participating?
 
azadisaryevCommented:
that's some rather convoluted way to create a ui dialog...

try this for a change:

<a class="ex2trigger" href="/BasketAdd.cfm?ref=175000">Add</a>
<div id="ex2" style="display:none"></div>

<script type="text/javascript">
var d, closeDialog;
$(document).ready(function() {
  d = $("#ex2");
  d.dialog({autoOpen:false, modal:true, width:475, height:157, draggable:false, resizable:false});
  $("a.ex2trigger").click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    d.load(url, function() {$(this).dialog('open')});
  });
  closeDialog = function() { d.dialog('close'); }
});
</script>

then in your BasketAdd.cfm add this link:
<a href="#" onclick="closeDialog();">close</a>

Azadi
0
 
storminteractiveCommented:
well, with jqueryui it seems to be as easy as doing
<a href="#"  onclick="javascript:$class_name.dialog('close')">Close the modal</a>
but if you provide the code I can be more specific

Regards,
Paul
0
 
quarkmikeAuthor Commented:
Seem to not work, here is the code i use to create my dialog

     <script type="text/javascript">
        $(function() {
                $("#dialog").dialog();
        });
        </script>

        <a class="ex2trigger" href="/BasketAdd.cfm?ref=175000">Add</a>



        <script type="text/javascript">
        $(function (){
                $('a.ex2trigger').click(function() {
                        var url = $(this).attr("href");
                        var dialog = $('<div style="display:hidden"></div>').appendTo('body');
                        dialog.load(
                                url,
                                {},
                                        function (responseText, textStatus, XMLHttpRequest) {
                                                                  
                                        dialog.dialog({ modal: true,width:475,height:157, draggable:false, resizable:false });
                                                            
                                                            $(".ui-dialog-titlebar").hide();
                                                            
                                }
                        );
                        return false;
                });
                        
                        
        });
        </script>


And here is my BasketAdd.cfm

<cfoutput>#ref#</cfoutput>

I would like to put the link to close the dialog on the basketAdd.cfm
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kadabaCommented:
No points for me....
just add this to the link mentioned in the above post.

<a href="#" onclick="closeDialog();return false;">close</a>
0
 
quarkmikeAuthor Commented:
Thanks a lot Azadi.
0
 
azadisaryevCommented:
@kadaba:

there's no need to put 'return false;' in the onclick event of the link because the closeDialog() function already does this by calling e.preventDefault() - this stops default click action from executing.

Azadi
0
 
azadisaryevCommented:
oops, sorry: e.preventDefault() is not in closeDialog() function, but in the .click() event binding.

Azadi
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.