Solved

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

Posted on 2013-06-20
7
580 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 19

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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)

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now