Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2013-06-20
7
Medium Priority
?
628 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 83

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 800 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 83

Accepted Solution

by:
leakim971 earned 1200 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

578 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