Ajax popup php

Hi friends,
I need to create a popup box in my php website. It is a product display page. when click on a product I want to display corresponding product details in a popup box. Is it possible by ajax popup box? how to do that.
please help me

Jun 20 '13 #1

Subscribe Post Reply

7414

Claus Mygind

571

512MB

Yes it is possible.

1) create a hidden <div> on your form

2) On the main form create a link <a> to your ajax call. Include the record key info on the link you wish to transmit to the web server/data server that you wish to have returned.

3) In your attached .js file create the ajax call and response. In the ajax call query send the key for the lookup to your server side response php app.

4) On your server side create a php response app

5) Your server side app looks up the record information and transmits back via a simple "echo" command.

6) Your client side app will then receive the information. In the response section of your ajax call add the information retrieved to the hidden <div> and make the <div> visible.

7) add a "close" link on the popup to rehide the popUp.

I would recommend that you send the information via JSON. This is very easy on each side client and server you just add a "encode" and "decode" line for each.

Since this is a lot of sample code to display, if there are parts of this you need help with, just post those specific questions for the parts of code you need help with.

Jun 20 '13 #2

Claus Mygind

571

512MB

Ok here is some sample code that is a form with 2 <div>s one of which is hidden. The hidden <div> will popup when the detail info is retrieved from the server.

The code is untested but a generic ajax call I use to both process entire forms or just make a small call for details to update the form as you are requesting here.

I have included the javaScript code on the form which most likely you would store in a separate .js file

In the javaScript code I create an ajax object which I use to both send and receive data.

Maybe this will get you started.

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

    <head>

        <title>Sample PopUp Box</title>

        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
        <script language="JavaScript">

            function getItem(lineNo){

                /*

                ----------------------------------------------

                data object holds data we want to transmit to

                the server side app

                ----------------------------------------------

                */

                var dataObj = new Object();

                dataObj['table'] = "myDetails";

                dataObj['search'] = lineNo;
 
                /*fake form node created so action can be assigned*/

                var fNode = new Object();

                fNode.action = "/<your_path>/<your_detail_app>.php";

                fNode.id = "fetchDetails";
 
                ajax.makeCall(fNode, dataObj);

            }
 
            function updatePage(form, aCallBack)

            {

                /*

                ----------------------------------------------------------------

                the returned detail information is loaded into the <span></span>

                then the hidden <div> is made visible.

                ----------------------------------------------------------------

                */

                document.getElementById("details").innerHTML = aCallBack['details'];

                document.getElementById("ratesDiv").style.visibility = 'visible';

            }
 
            /*

            --------------------------------------------------------------------------------

                ajaxCall
 
                    Author:    Claus Mygind

                    Date:    12/20/10
 
                    Purpose:    Custom Object which adds a generic ajax call to the app.

                                To get information or save information from the data base.
 
                    usage:
 
                        //create ajax object

                        var ajax = new myAjax();
 
                          made at time when getting or storing data 

                          takes 2 parameters

                            form        =    the calling form object

                                form.action is the server side app /path/appname.php

                                        that will process data  or request
 
                            dataObj        = request paramters for data retrieval 

                                            or form data to be saved
 
                        example:
 
                        ajax.makeCall(document.getElementById("form"), dataObj);
 
                        data is returned in an array aCallBack which is used in 

                        "updatePage(form, aCallBack)"    is passed two parameters 

                                1) the form to be updated 

                                2) the data returned
 
                                updatePage(form, aCallBack)
 
                        Because the data is specific to each page

                        the updatePage() function is located in a separate file unique

                        to the calling page.

            --------------------------------------------------------------------------------

            */
 
            /*

            ------------------------------------------------

            the method myAjax is a proto type.

            it takes 2 parameters.

                form    = the form object.

                dataObj = data values collected from the form
 
            myAjax() will send data in a JSON format to 

            the the server and process the response from 

            the server based on the 3 parameters submitted.

            ------------------------------------------------

            */

            function myAjax (form, dataObj ) {
 
                /*

                ---------------------------------

                aCallBack is an array used 

                to store the ajax call response

                ---------------------------------

                */

                var    aCallBack = new Array();
 
                this.makeCall = function (form, dataObj) {
 
                    /*

                    -----------------------------------------------------

                    newer browsers already contain JSON code.

                    older browsers may need an addon library

                    from json.org use the JSON2.js library for this.
 
                    create queryString by making data array "dataObj"

                    a JSON formatted string. This will send all the 

                    form's data in one variable "appData" to the server.

                    -----------------------------------------------------

                    */

                    var queryString  = "appData="+JSON.stringify(dataObj);
 
                    /*

                    -----------------------------------

                    define the XMLHttpRequest object.

                    note the iif conditions that test

                    if this is IE or some other type

                    of browser

                    -----------------------------------

                    */

                    var request = window.ActiveXObject ?

                        new ActiveXObject('Microsoft.XMLHTTP') :

                        new XMLHttpRequest;
 
                        /*

                        ----------------------------------------------

                        create URL. Note the timeStamp, it is used

                        to prevent the browser from using caches data

                        each request will be unique.
 
                        The first parameter "callApp" is used here to

                        specify which server side app to process this

                        request.

                        ----------------------------------------------

                        */

                        var url = form.action+'?timeStamp=' + new Date().getTime();
 
                        /*

                        ---------------------------------------------------

                        open the connection to the server via a POST method

                        ---------------------------------------------------

                        */

                        request.open("POST", url, true);

                        /*

                        ---------------------------------------------------

                        the "onreadystatechange" will activate when there is

                        a response from the server.
 
                        it will call the "processResponse()" method.

                        processResponse() receive 2 parameters
 
                        request.responseText = this could 

                                                    a message, or

                                                    data returned, or

                                                    an error message
 
                        form = this was the 1st parameter passed to myAjax.

                                it uses the form's id to clear the form upon 

                                completion.  

                                It is a    pass through parameter here to the 

                                "updatePage(form)" method to follow.

                        ---------------------------------------------------

                        */

                        request.onreadystatechange = function chkStateChange(){

                                                        if (request.readyState == 4) {

                                                            if (request.status == 200) {

                                                                processResponse(request.responseText, form);

                                                            }

                                                        }

                                                     };

                        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
                        /*

                        ---------------------------------------------------

                        with the connection opened above,

                        we can now send the data "queryString"

                        to the server.

                        ---------------------------------------------------

                        */

                        request.send( queryString );

                };
 
                /*

                --------------------------------------------------------------------------

                processResponse when data is returned from onreadystatechange.
 
                If an error, save or deleted message is detected, display a simpe alert. 

                Otherwise pass the data onto the "updatePage()" method.

                --------------------------------------------------------------------------

                */

                var processResponse = function (response, form) {
 
                    aCallBack = response.split(';');
 
                    /* display error or save message */    

                    if ( aCallBack[0].indexOf("An error occured") > -1 ||

                         aCallBack[0] == "Record Saved"    ||

                         aCallBack[0].indexOf("Delete Notice!!") > -1     ||

                         aCallBack[0] == "The data you saved was the same as found in the database!"

                       ) { 
 
                        eAlert  = aCallBack[0]+"\n";

                        for (var i = 1; i < aCallBack.length; i++ )

                        {

                            eAlert += aCallBack[i]+"\n";

                        }

                        alert( eAlert );

                        if (aCallBack[0] == "Record Saved" ||

                            aCallBack[0].indexOf("Delete Notice!!") > -1 ||

                            aCallBack[0].indexOf("Deletes are not allowed") > -1

                            )

                        {

                            initilizeForm(form);

                        }

                    }else{

                        /*

                        ------------------------------------

                        updatePage()

                            sending two parameters

                                form 

                                aCallBack

                        updatePage() is a unique method

                        in each html page. The function

                        is located in the ...Functions.js

                        for that specific page.  This will

                        allow for custom processing of 

                        the returned data for each page

                        ------------------------------------

                        */

                        aCallBack = JSON.parse(response);    

                        if ( aCallBack[0] == "No records found")

                        {

                            alert("No records found");

                        }else{

                            updatePage(form, aCallBack);

                        }

                    }

                };
 
            }

            /*

            ----------------------------------

            ajax object created after 

            proto type myAjax() is constructed

            by binding ajax to myAjax

            ----------------------------------

            */

            var ajax = new myAjax();

        </script>

    </head>

    <body>

        <form id="mainForm">
 
            <div id="mainDiv">

                <table>

                    <tr><td><a href="#" onclick="getItem(1);" >show details</a> item 1</td></tr>

                    <tr><td><a href="#" onclick="getItem(2);" >show details</a> item 2</td></tr>

                    <tr><td><a href="#" onclick="getItem(3);" >show details</a> item 3</td></tr>

                    <tr><td><a href="#" onclick="getItem(4);" >show details</a> item 4</td></tr>

                    <tr><td><a href="#" onclick="getItem(5);" >show details</a> item 5</td></tr>

                </table>

            </div>
 
            <div id="detailPopUp" style="position:fixed; border:5px ridge #006600; top :25; left:250; height:300; width:700px; overflow: scroll; background-color: #ccffcc; background-image:linear-gradient(to top, #ccff00 0%, White 100%); z-index:99; visibility: hidden;">

                <span id="details"></span><br />

                <input type="button" value="Close" onclick="document.getElementById('detailPopUp').style.visibility = 'hidden';" />

            </div>

        </form>

    </body>

</html>

Jun 20 '13 #3

Ammu

@Claus Mygind
thank you for your response. let me try with this sample code.

Jun 21 '13 #4

celinsmith111

Thanks claus, your concept is too easy and good, i have required this logic.

Jun 21 '13 #5

Claus Mygind

571

512MB

Ok so now you have the javaScript side of the equation. Here is the php part of the solution.

Expand|Select|Wrap|Line Numbers

 
<?php

/* sample response page - 
 
       Author: Claus Mygind
 
       Date: 06/22/13 - php
 
       It receives one parameter:

       $_REQUEST['appData']
 
       It returns one parameter:

       $res_array
 
*/

try  // Error trap entire applet.; 

{

    /*

    -------------------------------------------------------------

    re-code input parameters from $_REQUEST into a $inArray array

    $inArray can be any name you want.

    -------------------------------------------------------------

    */

    $inArray = json_decode($_REQUEST['appData'], true);
 
    // Create connection

    $dbx=mysqli_connect("<Either a host name or an IP address>","<user>","<password>",$inArray["myDetails"]);
 
    /* check connection */

    if (mysqli_connect_errno()) {

        throw new Exception("Connection to database failed!");

    }else{

        /*build sql query*/

        $sql = 'select thisDetail from '.$inArray['myDetails'];
 
        /*query for detail information*/

        if ( $result = $dbx->query($sql) )

        {

            if ($result->num_rows == 0)

            {

                throw new Exception("No detail record was not found!");

            }else{

                /* create and load a response array */

                $res_array = array();

                while ($row = $result->fetch_array()) 

                {

                    $res_array['details']= $row["thisDetail"];

                }

            }

        }else{

            throw new Exception("Query to get details failed!");

        }//end if query failed
 
    }//end if connection failed

}// end try
 
catch (exception $e) 

{

  $res_array = array( 'errorAlert'=>'An error occured<br/>','errorMsg'=>$e->getMessage());

}
 
echo json_encode($res_array);

$dbx->close();

?>

Jun 22 '13 #6

Ajax popup php

Similar topics