Shieryn
Shieryn

Reputation: 234

How to pass php value from current page into popup page (External)

I have a problem with my work. There is a repetition for button and value based on database. I want to get selected value from current page into a pop up page when the selected button were clicked every repetition. the pop up page is the external page PHP.

Here my whole code

    <html>
    <head>
        <!-- popup -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
        <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">

    <script>
    $("a#selector").live("click", function(){
        $(".overlayInner").load("callinboundcall.php",
           // the following is the callback   
          function(){$(".overlayOuter").fadeIn(100); })
    });
    </script>
    <style type="text/css">
    .overlayOuter{
        background:rgba(255,255,255,0.5);
        opacity:0.99;
        display:none;
        height:100%;
        left:0;
        position:absolute;
        top:0;
        width:100%;
        z-index:100001;
     }


    .overlayInner{

        position:absolute;
        background:rgba(255,255,255,1);
        border: 1px solid grey;
        opacity: 1.7;
        overflow:scroll;
        top:7%;/*or whatever*/
        left:27%; /*or whatever*/
        width:45%;
        height:75%;
        z-index:100001;
     }
    </style>
    </head>
    <body>
<?php>
    $call = pg_query("SELECT InputDate,CallId,AgentName,Reviewer,SalamPembuka,KonfirmasiNamaCust,VerifikasiData,KemampuanBertanya,ProductKnowledge,Solusi,AlternativeSolusi ,SistemPelaporan,Empati,Responsif,RamahSopan,PercayaDiri,HoldCall,OfferHelp,Penutup,GrandTotal FROM Call WHERE InputDate >= '$start' AND InputDate <= '$end'");
        while($result=pg_fetch_row($call))
            {

                 echo
                "
                <tr>
                <td  align=\"center\" class=\"form\">$result[0]</td>
                <td align=\"center\"  class=\"form\">$result[1]</td>
                <td align=\"center\" class=\"form\">$result[2]</td>
                <td align=\"center\" class=\"form\">$result[3]</td>
                <td align=\"center\" class=\"form\">$result[4]</td>
                <td align=\"center\" class=\"form\">$result[5]</td>
                <td align=\"center\" class=\"form\">$result[6]</td>
                <td align=\"center\" class=\"form\">$result[7]</td>
                <td align=\"center\" class=\"form\">$result[8]</td>
                <td align=\"center\" class=\"form\">$result[9]</td>
                <td align=\"center\" class=\"form\">$result[10]</td>
                <td align=\"center\" class=\"form\">$result[11]</td>
                <td align=\"center\" class=\"form\">$result[12]</td>
                <td align=\"center\" class=\"form\">$result[13]</td>
                <td align=\"center\" class=\"form\">$result[14]</td>
                <td align=\"center\" class=\"form\">$result[15]</td>
                <td align=\"center\" class=\"form\">$result[16]</td>
                <td align=\"center\" class=\"form\">$result[17]</td>
                <td align=\"center\" class=\"form\">$result[18]</td>
                <td align=\"center\" class=\"form\">$result[19]</td>
                <td  class=\"form\" width=\"2%\"><a id=\"selector\"  href=\"#\" ><img  width=\"120%\" height=\"130%\" src=\"../img/view.png\"/></a></td>
                <td align=\"center\" class=\"form\" width=\"2%\"><img  width=\"90%\" height=\"90%\" src=\"../img/edit.png\" onclick=\"myDeleteFunction()\"/></td>
                <td align=\"center\" class=\"form\" width=\"2%\"><input onclick=\"deleteRow(this.parentNode.parentNode.rowIndex)\" type=\"image\" src=\"../img/delete.png\" alt=\"Submit\" width=\"110%\" height=\"110%\"></td>

                </tr>\n
                ";

            }
<?>
    </body>
    </html>

The button is in <a id="selector">.

The output enter image description here

Popup when first row button clicked enter image description here

The value $result[1] would be appear at the top corner popup.The row is the result of repetition.
What am i supposed to do? Thankyou in Advanced. if you don't understand, let me know. :D

Upvotes: 3

Views: 78

Answers (2)

Josh
Josh

Reputation: 11070

You'll need to pass a variable, probably using a query string parameter, to the callinboundcall.php file. You'll probably want to do something like:

<script>
$("a.selector").live("click", function(){
    $(".overlayInner").load(this.href,
       // the following is the callback   
      function(){$(".overlayOuter").fadeIn(100);
   });
   return false;
});
</script>

A few points:

  1. You can't have multiple elements on an HTML page with the same id attribute. Uses HTML class attribute instead.
  2. If you're attaching a handler to links which will load data, it's nice to load the link's href rather than some arbitrary URL
  3. You should add a column to your database with and ID number, so you can refer to your rows with a unique numeric ID.

Doing this will allow you to pass an ID of a row number to callinboundcall.php which you will read using $_GET['id'], or whatever query string parameters you passed in the AJAX call to callinboundcall.php

Given that you said CallID is a unique ID, here's a modified version of your PHP:

    <html>
    <head>
        <!-- popup -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
        <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">

    <script>
    $("a.selector").live("click", function(){
        $(".overlayInner").load(this.href,
           // the following is the callback   
          function(){$(".overlayOuter").fadeIn(100);
        });
        return false;
    });
    </script>
    <style type="text/css">
    .overlayOuter{
        background:rgba(255,255,255,0.5);
        opacity:0.99;
        display:none;
        height:100%;
        left:0;
        position:absolute;
        top:0;
        width:100%;
        z-index:100001;
     }


    .overlayInner{

        position:absolute;
        background:rgba(255,255,255,1);
        border: 1px solid grey;
        opacity: 1.7;
        overflow:scroll;
        top:7%;/*or whatever*/
        left:27%; /*or whatever*/
        width:45%;
        height:75%;
        z-index:100001;
     }
    </style>
    </head>
    <body>
<?php>
    $call = pg_query("SELECT InputDate,CallId,AgentName,Reviewer,SalamPembuka,KonfirmasiNamaCust,VerifikasiData,KemampuanBertanya,ProductKnowledge,Solusi,AlternativeSolusi ,SistemPelaporan,Empati,Responsif,RamahSopan,PercayaDiri,HoldCall,OfferHelp,Penutup,GrandTotal FROM Call WHERE InputDate >= '$start' AND InputDate <= '$end'");
        $index = 0;
        while($result=pg_fetch_row($call))
            {

                 echo
                "
                <tr>
                <td  align=\"center\" class=\"form\">$result[0]</td>
                <td align=\"center\"  class=\"form\">$result[1]</td>
                <td align=\"center\" class=\"form\">$result[2]</td>
                <td align=\"center\" class=\"form\">$result[3]</td>
                <td align=\"center\" class=\"form\">$result[4]</td>
                <td align=\"center\" class=\"form\">$result[5]</td>
                <td align=\"center\" class=\"form\">$result[6]</td>
                <td align=\"center\" class=\"form\">$result[7]</td>
                <td align=\"center\" class=\"form\">$result[8]</td>
                <td align=\"center\" class=\"form\">$result[9]</td>
                <td align=\"center\" class=\"form\">$result[10]</td>
                <td align=\"center\" class=\"form\">$result[11]</td>
                <td align=\"center\" class=\"form\">$result[12]</td>
                <td align=\"center\" class=\"form\">$result[13]</td>
                <td align=\"center\" class=\"form\">$result[14]</td>
                <td align=\"center\" class=\"form\">$result[15]</td>
                <td align=\"center\" class=\"form\">$result[16]</td>
                <td align=\"center\" class=\"form\">$result[17]</td>
                <td align=\"center\" class=\"form\">$result[18]</td>
                <td align=\"center\" class=\"form\">$result[19]</td>
                <td  class=\"form\" width=\"2%\"><a class=\"selector\"  href=\"callinboundcall.php?id={$result[1]}\" ><img  width=\"120%\" height=\"130%\" src=\"../img/view.png\"/></a></td>
                <td align=\"center\" class=\"form\" width=\"2%\"><img  width=\"90%\" height=\"90%\" src=\"../img/edit.png\" onclick=\"myDeleteFunction()\"/></td>
                <td align=\"center\" class=\"form\" width=\"2%\"><input onclick=\"deleteRow(this.parentNode.parentNode.rowIndex)\" type=\"image\" src=\"../img/delete.png\" alt=\"Submit\" width=\"110%\" height=\"110%\"></td>

                </tr>\n
                ";
                $index++;
            }
<?>
    </body>
    </html>

Here's what I did:

  • The jQuery handler now looks for links by class and not id
  • The jQuery handler now opens the href of the links
  • I added an $index counter to know which row number each link should fetch. This should be replaced with a unique identifier for each row instead, that will be much better
  • The links themselves now link to callinboundcall.php?index=$index
    • Linking to callinboundcall.php?index=$row['id'] would be better, if you had a unique ID column.

Now, callinboundcall.php should perform a database query to fetch row $_GET['id'] of your SQL query:

$call = pg_query("SELECT AlternativeSolusi FROM Call WHERE CallID = ".intval($_GET['id']);
$result=pg_fetch_row($call);
echo $result[0];

Some further basic reading for you:

Upvotes: 1

NIket
NIket

Reputation: 924

Using sesions or wuery string will be helpful to pass data on external page. so for rexample you redirect to external page with query string like www.ewxample.in?q=yourdata

on receiver side read the same data with the help of php like

<?php
   echo $_GET["q"];  //Output: youdata
?>

Upvotes: 2

Related Questions