Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

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
?
615 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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 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

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

636 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