Solved

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

Posted on 2008-10-22
6
646 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
  • 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now