How to ensure my jquery dialog box opens each and every time a link is clicked?

Experts,

The following script allows the link class "modal_link" to open a modal dialog box and display dynamic content.

Currently, when I click on the first link, the dialog opens. When I close the dialog and try clicking on another link with the same "modal_link" class, it does nothing. Seems that the dialog only opens once..then doesn't respond again after it is closed.

Can you help me decipher what needs to be tweaked in my code to make the dialog open each and every time a link is clicked?

<head>
<script>
$(function() {         
      $(".modal_link").click(function(e) {
            e.preventDefault();
            var url = $(this).attr("href");
            $("#dialog").load(url,null,function() {
                  $("#dialog").dialog({
                        width:700,
                        modal: true,
                        close: function(event, ui) {
                        $("#dialog").remove();
                        }//END CLOSE
                  });//END DIALOG
            });//END DIALOG
      });//END MODAL_LINK
});//END FUNCTION
</script>
</head>
<body>
<!----- MODAL DIALOG DIV ----->
<div id="dialog" style="display:none"></div>
<!----- MODAL DIALOG LINKS ----->
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=100">Click here</a>
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=101">Click here</a>
</body>
evibesmusicAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
following Dan7el suggestion look fine

if you really want to remove the content until the next click
replace : $("#dialog").remove();
by : $("#dialog").empty(); // remove the content
0
 
leakim971PluritechnicianCommented:
replace :  $(".modal_link").click(function(e) {
by :  $(document).on("click", ".modal_link", function(e) {
0
 
Daniel Van Der WerkenConnect With a Mentor Independent ConsultantCommented:
I don't think I'd use the .remove() function. That is likely taking the dialog completely out of the page.

I would do this: Don't set the style to display:none. Instead, set it to whatever you normally would for it to show up. Then, on the initial Document.Ready() set it to .hide(). Then, when you want it to show up, do a .show() then .hide() again to make it disappear.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
evibesmusicAuthor Commented:
@leakim971:

No change in the expected behavior when imparting your suggestion. Opens once but, when closed will not open again.
0
 
evibesmusicAuthor Commented:
@Dan7el:

I am not quite sure how to impart the changes that you are suggesting.

Removing the display style was easy but, not sure how to set the document.ready() state.

Can you show me what you mean? Sorry...javascript and jquery are not my best friends.
0
 
evibesmusicAuthor Commented:
@All:

Perfect. Thank you Experts!

Final code posted below.
0
 
evibesmusicAuthor Commented:
Final Code:

<head>
<script>
$(function() {         
      $(".modal_link").click(function(e) {
            e.preventDefault();
            var url = $(this).attr("href");
            $("#dialog").load(url,null,function() {
                  $("#dialog").dialog({
                        width:700,
                        modal: true,
                        close: function(event, ui) {
                        $("#dialog").empty(); // remove the content 
                        }//END CLOSE
                  });//END DIALOG
            });//END DIALOG
      });//END MODAL_LINK
});//END FUNCTION
</script>
</head>
<body>
<!----- MODAL DIALOG DIV ----->
<div id="dialog"></div>
<!----- MODAL DIALOG LINKS ----->
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=100">Click here</a>
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=101">Click here</a>
</body> 

Open in new window

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.