Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-06-20
6
Medium Priority
?
476 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
[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
  • 5
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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
Implementing Azure Infrastructure Exam 70-533

This course is designed to familiarize and instruct students in the content that is covered by Microsoft Exam 70-533, Implementing Microsoft Azure Solutions. It focuses on all the November 2016 objective domain topics.

 

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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…
Suggested Courses

721 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