asked on

how can i use jquery popupmessage box in for loop to display a particular for value on click in php?

my code is here.i use for loop to display 5 time click option.when i click on specific click option i want to display the current option number but popup messege display only first number on each option.

<!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=utf-8" />
            <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
            <script type="text/javascript">
                  //<![CDATA[
                        $.setupJMPopups({
                              screenLockerBackground: "#003366",
                              screenLockerOpacity: "0.7"
                        });

                        function openStaticPopup() {
                              $.openPopupLayer({
                                    name: "myStaticPopup",
                                    width: 550,
                                    target: "myHiddenDiv"

                              });


                        }

                                    </script>
            <style type="text/css" media="screen">
                  body {margin:0; font-family:"Trebuchet MS"; line-height:120%; color:#333;}
                  h1 {margin-bottom:50px; font-size:40px; font-weight:normal;}
                  p {margin:0; padding:0 0 30px; font-size:12px;}
                  pre {font-size:12px; font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","Courier"; line-height:120%; background:#F4F4F4; padding:10px;}
                  #general {margin:30px;}

                  #myHiddenDiv {display:none;}

                  .popup {background:#FFF; border:1px solid #333; padding:1px;}
                  .popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
                  .popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
                  .popup-header .close-link {float:right; font-size:11px;}
                  .popup-body {padding:10px;}

                  form {margin:0; padding:0;}
                  form * {font-size:12px;}
                  input {margin-bottom:12px;}
                  label {display:block;}
            </style>
            <title>jmpopups - example page</title>
      </head>
      <body>
<?php

for($i=1;$i<5;$i++)
{?>

            <div id="general">

                  <p><a href="javascript:;" onclick="openStaticPopup()" title="Static example">Open a popup</a></p>

                  </div>

            <div id="myHiddenDiv">

                  <div class="popup">
                        <div class="popup-header">
                              <h2>Now example</h2>
                                                      </div>

                        <div class="popup-body">
                              <code>
                                    <pre>

<?php echo $x; ?>
                                    </pre>
                              </code>


                        </div>
                  </div>

      </body>
</html>

szewkam

you have to passed the current loop number to javascript function, and then using jquery fill the popup window with it. Example below

<!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=utf-8" />
            <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
            <script type="text/javascript">
                  //<![CDATA[
                        $.setupJMPopups({
                              screenLockerBackground: "#003366",
                              screenLockerOpacity: "0.7"
                        });

                        function openStaticPopup(id) {
                              $.openPopupLayer({
                                    name: "myStaticPopup",
                                    width: 550,
                                    target: "myHiddenDiv"

                              });
                              $('.popup-body').html(id);

                        }

                                    </script>
            <style type="text/css" media="screen">
                  body {margin:0; font-family:"Trebuchet MS"; line-height:120%; color:#333;}
                  h1 {margin-bottom:50px; font-size:40px; font-weight:normal;}
                  p {margin:0; padding:0 0 30px; font-size:12px;}
                  pre {font-size:12px; font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","Courier"; line-height:120%; background:#F4F4F4; padding:10px;}
                  #general {margin:30px;}
                  
                  #myHiddenDiv {display:none;}
                  
                  .popup {background:#FFF; border:1px solid #333; padding:1px;}
                  .popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
                  .popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
                  .popup-header .close-link {float:right; font-size:11px;}
                  .popup-body {padding:10px;}
                  
                  form {margin:0; padding:0;}
                  form * {font-size:12px;}
                  input {margin-bottom:12px;}
                  label {display:block;}
            </style>
            <title>jmpopups - example page</title>
      </head>
      <body>
<?php

for($i=1;$i<5;$i++)
{?>

            <div id="general">
                                    
                  <p><a href="javascript:;" onclick="openStaticPopup(<?php echo $i; ?>)" title="Static example">Open a popup</a></p>
                  
                  </div>


            <div id="myHiddenDiv">

                  <div class="popup">
                        <div class="popup-header">
                              <h2>Now  example</h2>
                                                      </div>

                        <div class="popup-body">
      
                              
                        </div>
                  </div>
            
      </body>
</html>

Open in new window

sonalaroi

ASKER

yeh its work .thanks
actualy i want to display message from database.can you please tell me how i can pass the string value .
when i tried it display error in page
"Expected )"
i dont understand whts the problem.

ASKER CERTIFIED SOLUTION

szewkam

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sonalaroi

ASKER

thanks alot .
u solved. my problem
its a solution .
can i send reply through popupmessage box using reply option.

szewkam

don't know what do you mean by "reply option".
But you can send just about anything ;).