Solved

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

Posted on 2013-06-20
7
587 Views
Last Modified: 2013-06-20
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>
0
Comment
Question by:evibesmusic
  • 4
  • 2
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39263367
replace :  $(".modal_link").click(function(e) {
by :  $(document).on("click", ".modal_link", function(e) {
0
 
LVL 20

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 200 total points
ID: 39263383
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
 

Author Comment

by:evibesmusic
ID: 39263567
@leakim971:

No change in the expected behavior when imparting your suggestion. Opens once but, when closed will not open again.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:evibesmusic
ID: 39263577
@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
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 39263653
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
 

Author Closing Comment

by:evibesmusic
ID: 39263673
@All:

Perfect. Thank you Experts!

Final code posted below.
0
 

Author Comment

by:evibesmusic
ID: 39263679
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question