MikeCombe
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'></scr ipt>
<script type='text/javascript' src='modal/basic/js/jquery .simplemod al.js'></s cript>
<script type='text/javascript' src='modal/basic/js/basic. js'></scri pt>
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>
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
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
<script type='text/javascript' src='modal/basic/js/jquery
<script type='text/javascript' src='modal/basic/js/basic.
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
</div>
</div>
</div>
</body>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Link in default.aspx
<a href='default.aspx?pet=cat
Script in default.aspx
<script>
$(function(){
$(".basic").click(function
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?
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?
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 !!
<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.
Make sure your script is either inside, or referenced in the default.aspx file.
cheers.
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>
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.preventDefault();
var link = $(this).attr("href");
$.modal("<iframe src='"+link+"'></iframe>")
});
});
</script>
Are you sure you have included the jquery lib above the script?
ASKER
Thanks.
That was it.
I was following an example & they had the jquery scripts on the bottom of the page.
Works perfectly !!
That was it.
I was following an example & they had the jquery scripts on the bottom of the page.
Works perfectly !!
Cool.
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)
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.
<a href='cat.htm' class='basic'>Cat</a>
You can post a link to your page, if you want me to look at it.
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 !!
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 !!
ASKER
test
But it breaks after you close the modal and click a link a second time. I don't know why.
Open in new window