Solved

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

Posted on 2013-06-20
6
460 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

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