Avatar of MikeCombe
MikeCombe
Flag 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>
jQueryCSS

Avatar of undefined
Last Comment
MikeCombe

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Kyle Hamilton

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

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
Kyle Hamilton

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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
MikeCombe

ASKER
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 Hamilton

Yes. That's it.

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

cheers.
MikeCombe

ASKER
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>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Kyle Hamilton

Are you sure you have included the jquery lib above the script?
MikeCombe

ASKER
Thanks.

That was it.
I was following an example & they had the jquery scripts on the bottom of the page.
Works perfectly !!
Kyle Hamilton

Your help has saved me hundreds of hours of internet surfing.
fblack61
Kyle Hamilton

Cool.
MikeCombe

ASKER
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 Hamilton

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
MikeCombe

ASKER
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 !!
MikeCombe

ASKER
test