Hi,


I am populating the HTML using AJAX by calling the function in $(document).ready(this-is-my-ajax-function).

I need to perform a function (for example, I want to throw a message by JavaScript alert upon clicking on a component which was loaded by AJAX, but its not throwing the alert message.

But if I write the HTML without using AJAX, then its working.

This is the URL :
http://store.touchmedia.ca/mytest/edit-img04.php
What it does is, for each image found in the database, its creating a child DIV inside a parent DIV called "#content-wrapper" and display that image in that child DIV.

If a user clicks on a child div, it should alert a message, but its not working, but if I create the HTML without the use of AJAX, then its working.


This is my PHP Web Page :

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Edit Images</title>
        
        <style>
            
            #content-wrapper {
                margin:0 auto;
                width:960px;
                text-align:center;
            }
            
            .detail {
                margin:0 auto;
                width:100%;
                border : 1px solid #000000;
                display:block;
            }
            
            .left {
                float:left;
                width:35%;
                height:200px;
                background-color:yellow;
            }
            
            .left img {
                max-width : 300px;
                max-height: 150px;
                margin-top:15px;
            }
            

            .right {
                float:right;
                width:65%;
                height:200px;
                background-color:orange;
            }
            
            .abc {
                width:200px;
                height:200px;
                background-color:red;
                margin-top:20px;
            }
            
            
        </style>
        
        <script type="text/javascript" src="js/jquery/jquery-1.10.2.js"></script>    
        <script>   
            
            
            $(document).ready(displayData);
            
            $(document).ready(PageLoad);
            
            function PageLoad() {

                //this is NOT working
                $("#content-wrapperx div").click(divClick);

                //this is working
                $("#testing-wrapper div").click(TestClick);


            }
            
            
            function divClick() {
                CurrIndx = $("#content-wrapper div").index(this); //gives the index of the child div clicked
                alert (CurrIndx);
            }



            function TestClick() {
                CurrIndx = $("#testing-wrapper div").index(this); //gives the index of the child div clicked
                alert (CurrIndx);
            }
            
            
            function displayData()
            {
                var xmlhttp;  

                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  
                xmlhttp.open("POST","extractData02c.php",true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.setRequestHeader("Content-length", 0);
                xmlhttp.setRequestHeader("Connection", "close");                
                
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState===4 && xmlhttp.status===200)
                    {
                    document.getElementById("content-wrapper").innerHTML=xmlhttp.responseText;
                    }
                  };
                xmlhttp.send();
            }
        </script>             
            
            
      
        
        
    </head>
    <body>
        
        <!-- this is not working -->
        <div id="content-wrapper">

            
        </div>
        
        <!-- this is working -->
        <div id="testing-wrapper">
            <div class="abc"></div>
            <div class="abc"></div>
            <div class="abc"></div>
            <div class="abc"></div>
            <div class="abc"></div>            
        </div>        
        
        
    </body>
</html>





This is the AJAX file extractData02c.php on the server :
Code:
<?php
$con=mysqli_connect("localhost","user-name","password" , "database-name");
if ($con)
  {
    $sql="SELECT * FROM Img_Test";
    $result = mysqli_query($con,$sql);

    while($row = mysqli_fetch_array($result))
        {
            echo '<div class="detail"> ';
            echo '<div class="left">';
            echo '<img src=' . '"' . $row['ImgPath'] . '"' . '>';
            echo '</div>';
            echo '<div class="right"> PICTURE DESCRIPTION HERE.......';
            echo '</div>';
            echo '<div style="clear:both;">';
            echo '</div>';
            echo '</div>';  
            echo '<br /><br />';
        } 
    mysqli_close($con);    
  }
  
  else {
      echo '<div class="detail"> NO CONNECTION ESTABLISHED</div> ';
  }
    
    
?>

The purpose of this program is, I need to write a PHP program where the user should be able to edit (upon a click) and should be able to replace the picture with another picture if he/she wants and should be able to write some description / change description about the picture.

When a user clicks it should bring up a new window (or lightbox) and upon submitting the change, it should close the window and at the same time, the page should be loaded with the updated picture/description, this is the reason I used AJAX.

Please advice me if my approach is wrong and let me know any new methods for image/description editing..

thanks,

Isaac