How to change Modal Box content data based on user click

MikeCombe
MikeCombe used Ask the Experts™
on
I am trying to display 2 hyperlinks "Dog" and "Cat".
When the user clicks on "Dog" the modal popup displays "dog data".
When the user clicks on "Cat" the modal popup displays "cat data".
I can get the modap popup to display....but I am not sure how to determine which
hyperlink was clicked, so I can set the proper modal display data.


I tried using <a href='default.aspx?pet=cat' class='basic'>Cat</a>
but it doesn't appear that the modal box is reading session variables that I set
during the postback.

The modal system I am using is by:
http://www.ericmmartin.com/projects/simplemodal/

It uses these jQuery files:
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='modal/basic/js/jquery.js'></script>
<script type='text/javascript' src='modal/basic/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='modal/basic/js/basic.js'></script>

I was hoping I can handle the user clicks via postback or jscript instead of
getting inside the jquery files.

any ideas ?

<body>
<div id='container'>
      <div id='content'>
            <div id='basic-modal'>
            <input type='button' name='basic' value='Demo' class='basic'/>
                                   or <a href='#' class='basic'>Dog</a>
                                   or <a href='#' class='basic'>Cat</a>
            </div>

            
            <!-- modal content -->
            <div id="basic-modal-content">
            </div>

            <!-- preload the images -->
            <div style='display:none'>
                  <img src='modal/basic/img/basic/x.png' alt='' />
            </div>
      </div>
</div>
</body>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Data Scientist
Most Valuable Expert 2014
Commented:
Here's one way:

keep the links
<a href='default.aspx?pet=cat' class='basic'>Cat</a>

and:
<script>
          $(function(){
              
              $(".basic").click(function(e){
                    e.preventDefault();
                    var link = $(this).attr("href");
                    $.modal("<iframe src='"+link+"'></iframe>");
                    });
              
          });
        </script>

Open in new window



(interestingly, without using an iframe and using load() in an onShow function instead, the modal failed.)
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
here's the version using load() if you want to play around with it.

But it breaks after you close the modal and click a link a second time. I don't know why.

$(".basic").click(function(e){
                   e.preventDefault();
                   var link = $(this).attr("href");
                   
                   
                  $.modal("<div class='box'></div>",
                            {
                            onShow: function (dialog) {
                                    //alert("hi");
                                    $(".box").load(link);   
                                    }
                            })
                        
                        });

Open in new window

Author

Commented:
This is making sense...

Link in default.aspx
<a href='default.aspx?pet=cat' class='basic'>Cat</a>

Script in default.aspx
<script>
          $(function(){
             
              $(".basic").click(function(e){
                    e.preventDefault();
                    var link = $(this).attr("href");
                    $.modal("<iframe src='"+link+"'></iframe>");
                    });
             
          });
        </script>

But where does my "Cat.aspx" fit in ?

Thanks - Mike
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Not sure what you mean.

With script above, whatever the link is, that's what the iframe in the modal box will contain.

So if you want, you can change this to:

<a href='Cat.aspx' class='basic'>Cat</a>

Is that what you're looking for, or am I missing something?

Author

Commented:
You are correct...I guess I am not sure how the modal thing works.

<a href='Cat.aspx' class='basic'>Cat</a>

Is this correct....
1. default.aspx shows the link : <a href='Cat.aspx' class='basic'>Cat</a>
2. while still on default.aspx...when the user clicks on the "Cat" link
    a modal box opens and displays the "content" of Cat.aspx

I hope that is correct....which is what I am trying to accomplish.
Thanks !!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Yes. That's it.

Make sure your script is either inside, or referenced in the default.aspx file.

cheers.

Author

Commented:
I am getting an error here....

Error is:
Microsoft JScript runtime error: The value of the property '$' is null or undefined,
not a Function object.

the following code is in the website....default.aspx

<script type="text/javascript" language="javascript">
         $(function(){
             
              $(".basic").click(function(e){
                    e.preventDefault();
                    var link = $(this).attr("href");
                    $.modal("<iframe src='"+link+"'></iframe>");
                    });
             
          });
        </script>
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Are you sure you have included the jquery lib above the script?

Author

Commented:
Thanks.

That was it.
I was following an example & they had the jquery scripts on the bottom of the page.
Works perfectly !!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Cool.

Author

Commented:
boy...I hate to be a pest....but the modal window pops up ok...but it does not load the cat.htm file. (I changed cat.aspx --> cat.htm)
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
There's no reason why it shouldn't. Make sure you updated your link, and it is in the same directory as your default.aspx file, else make sure the path is correct in the link.

<a href='cat.htm' class='basic'>Cat</a>

You can post a link to your page, if you want me to look at it.

Author

Commented:
You are correct, again (of course)

I had other code that used the "basic" keyword.
I changed this code to use "basic2".
<a href='cat.htm' class='basic2'>Cat</a>

Works as expected.

Thanks again !!

Author

Commented:
test

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial