Link to home
Avatar of MikeCombe
MikeCombeFlag for United States of America

asked on

How to change Modal Box content data based on user click

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>
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
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

Avatar of MikeCombe

ASKER

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
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?
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 !!
Yes. That's it.

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

cheers.
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>
Are you sure you have included the jquery lib above the script?
Thanks.

That was it.
I was following an example & they had the jquery scripts on the bottom of the page.
Works perfectly !!
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)
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.
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 !!
test