?
Solved

having multiple buttons on a modal window, which execute different scripts

Posted on 2008-10-22
6
Medium Priority
?
663 Views
Last Modified: 2008-11-11
Hi experts, I have the attached page code as the code which fills in a modal window on one of my pages.  The page that it originates from has this javascript within it:

function ModalExec1(modalVal) {

if (modalVal=1) {  
window.location = "./BasicModalTest3_script_1.php";
}
if (modalVal=2) {  
window.location = "./BasicModalTest3_script_2.php";
}

}


What should happen is that if the modalVal variable is passed back to the main page, then it loads a new page (in my case, a script).  What I want is for each button to send a different value of modalVal back to the main page, so that the IF statements can decide which script to load.  At the minute, it always loads script_2, apart from when I simply close the modal... so not sure I'm passing the variable correctly (or if I can do this at all) and am unsure why the script is running when it's embedded in an IF statement...

Please help!!
<?php
include './infolink.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
 
.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
 
.echo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #027ac6;
	font-style: italic;
}
.style1 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	color: #027ac6;
}
 
	
-->
</style><title>modal test</title>
<script>
var modalVal=0;
</script>
</head>
<body>
<p><?php echo $_SESSION['modal_text_1']; ?></p>
<p>&nbsp;</p>
<button onclick="window.top.hidePopWin(true);modalVal.value=1">Make something happen</button>
<button onclick="window.top.hidePopWin(true);modalVal.value=2">Second happening</button>
  <button onclick="window.top.hidePopWin()">close this modal</button>
<p>&nbsp;</p>
</body>
</html>

Open in new window

0
Comment
Question by:RowdyBurns
[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
  • 3
  • 3
6 Comments
 
LVL 1

Expert Comment

by:nick_bal
ID: 22782938
First of all use
<button onclick="ModalExec1('1')">
<button onclick="ModalExec1('2')">

and in the function use double = (==) instead of single (=)
function ModalExec1(modalVal) {
if (modalVal==1) {  
window.location = "./BasicModalTest3_script_1.php";
}
if (modalVal==2) {  
window.location = "./BasicModalTest3_script_2.php";
}

}
 
0
 

Author Comment

by:RowdyBurns
ID: 22784878
nick,  I've changed the IF statements to == as suggested.  I've played around with the onclick thing though, with no luck.  currently it looks like:

<button onclick="ModalExec1('1');window.top.hidePopWin(true)">Make something happen</button>
<button onclick="ModalExec1('2');window.top.hidePopWin(true)">Second happening</button>


This creates an error and doesn't close the modal.  If I swap the hidepopwin statement to first position, the window closes but the IF statement doesnt respond.  So I'm not sure this is setting the modalVal variable correctly....
0
 
LVL 1

Expert Comment

by:nick_bal
ID: 22786814
I am not sure i understand. Are you saying that you want to close a popup window and then redirect parent window to another location? Is this correct? Because what i sent you redirects the parent window to another location based upon the parameter in ModelExec function.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:RowdyBurns
ID: 22802309
That's what I want to do I think - if the value sent from the Modal is '1' then the IF statement in the parent page redirects to script_1 and if the value sent is '2' then the IF statement redirects to script_2.  The value needs to be sent with the onclick, so that the value is decided by which button is clicked.
0
 
LVL 1

Expert Comment

by:nick_bal
ID: 22805949
Ok.. you can add the second function inside the ModalExec1 function.
<button onclick="ModalExec1('1')">
<button onclick="ModalExec1('2')">
 
function ModalExec1(modalVal) {
window.top.hidePopWin(true);
if (modalVal==1) {
window.location = "./BasicModalTest3_script_1.php";
}
if (modalVal==2) { 
window.location = "./BasicModalTest3_script_2.php";
}
 
}
 

Open in new window

0
 

Accepted Solution

by:
RowdyBurns earned 0 total points
ID: 22807081
That's not working either... Internet Explorer give me the 'error on page' message, and the modal doesn't close.  I have attached the two pages - the parent page followed by the modal - separated by *'s, so you can see what I've got as we speak.

Matt
<?php
include './infolink.php';
$_SESSION['modal_text_1']="This is the text we want displayed";
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./js/subModal-1/subModal.css" />
    <script type="text/javascript" src="./js/subModal-1/common.js"></script>
    <script type="text/javascript" src="./js/subModal-1/subModal.js"></script>
<!--
 
 
 
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
 
.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
 
.echo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #027ac6;
	font-style: italic;
}
.style1 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	color: #027ac6;
}
 
	
-->
</style><title>Challenge Check</title>
<script type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
 
function ModalExec1(modalVal) {
window.top.hidePopWin(true);
if (modalVal==1) {
window.location = "./BasicModalTest3_script_1.php";
}
if (modalVal==2) { 
window.location = "./BasicModalTest3_script_2.php";
}
 
}
 
 
 
 
</script>
</head>
<body>
<p>Push this button: <input name="b2" type="button" onclick="MM_callJS('showPopWin(\'./BasicModalTest3_modal.php\', 200, 200, ModalExec1);')" value="Open" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
 
 
 
************************************************************************************************************************************************
 
<?php
include './infolink.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
 
.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
 
.echo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #027ac6;
	font-style: italic;
}
.style1 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	color: #027ac6;
}
 
	
-->
</style><title>modal test</title>
 
</head>
<body>
<p><?php echo $_SESSION['modal_text_1']; ?></p>
<p>&nbsp;</p>
<button onclick="ModalExec1('1')">Make something happen</button>
<button onclick="ModalExec1('2')">Second happening</button>
  <button onclick="window.top.hidePopWin()">close this modal</button>
<p>&nbsp;</p>
</body>
</html>

Open in new window

0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to implement server side field validation and display customized error messages to the client.
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

801 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