Solved

Is there a way to pass a dynamic title to my jquery modal dialog?

Posted on 2013-06-20
6
457 Views
Last Modified: 2013-06-25
Experts,

The following script opens the dynamic URLs contained within my hyperlinks into a modal dialog.

Is there a way that we can pass the value of "title" contained within my hyperlink URLs to the modal dialog?

In the example below, the title imparted to the modal dialog would be "Title100" and "Title101" respective to each dynamic link.

<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" title=""></div>
<!----- MODAL DIALOG LINKS ----->
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=100&title=Title100">Click here</a>
<a class="modal_link" href="a3_dialog_content.php?cmd=preview&id=101&title=Title100">Click here</a>
</body>

Open in new window

0
Comment
Question by:evibesmusic
  • 5
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39264485
0
 

Author Comment

by:evibesmusic
ID: 39264558
@leakin971:

I put the solution into place and it works but, because the titles in the url are dynamic, they are being pulled from the DB and in many cases contain special characters which cause my script to fail.

Is is possible to pull the "title" element from each link versus the title in the URL?

This way, the URL is not tainted by possible special characters which cause my script to not work, and we still get the expected result.

Example: Pull title from each link and place that into the title of each modal dialog

<a href="?cmd=preview&id=100" title="Title100">Click Here</a>

<a href="?cmd=preview&id=101" title="Title101">Click Here</a>
0
 

Author Comment

by:evibesmusic
ID: 39264574
@leakin971:

Something link this (obviously this doesn't work but, I hope you get what I mean):

var mytitle = $(this).attr("title");
0
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.

 

Author Comment

by:evibesmusic
ID: 39264581
@leakin971:

I got it to work....OMG, you can teach an old dog new tricks!

Thank you for getting me very close!
0
 

Assisted Solution

by:evibesmusic
evibesmusic earned 0 total points
ID: 39264584
Final code:

      <script>
      $(function() {        
              $(".modal_link").click(function(e) {
                        e.preventDefault();
                        var url = $(this).attr("href");
                    var mytitle = $(this).attr("title");
                        $("#dialog").load(url,null,function() {
                                $("#dialog").dialog({
                                      title: mytitle,
                                          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>
0
 

Author Closing Comment

by:evibesmusic
ID: 39274206
@leakin971:

Thank you for providing me the test code. Looking at the example you provided and then, cross referrencing it with the url variable made the solution possible.

Cheers!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
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…

708 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