Member Avatar for niths

hi all,
i am having a page with date picker. so now when i select a date, images uploaded on that date will be displayed in a table.The date picker will not change,only the below div will change. so now i had a edit button beside date picker.so when i click on edit button those fields in the table should turn into editable way.
Images uploaded on selected date will be displayed,
Now what i need is when i click on edit button that table should turn as editable.

<?php
    @session_start();
    echo "<strong style='color:navy'><h2>Welcome $_SESSION[username].</h2></strong>";
?>
<html>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","useajax.php?q="+str,true);
xmlhttp.send();
}

</script>
<head>
<link rel="stylesheet" type="text/css" href="css/table.css"/>
<meta charset="UTF-8" />
    <link rel="stylesheet" href="css/base.css" type="text/css" media="all" />
    <link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.datepicker.js"></script>
    <link type="text/css" href="css/demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker();
    });
    </script>
</head>
<body onload="addRowListeners();">
<form action="imageslist.php" method="post">
<table align="right"> 
    <tr> <td></td>
        <td></td><td><a href="logout.php"><h2>Logout</h2></a></td></table>
<div class="demo" align="left">
<h2>Choose Uploaded date <input name="dates" type="text" id="datepicker" onchange="showUser(this.value)">
<input type="button" name="edit" value="Edit" id="edit" style="background-color:#A7C942; color:#ffffff; font-size: 1.2em;"></h2>
</div>
<br>
<div align="center" id="txtHint"><h1>Images information will be listed here.</h1></div>
<table align="center"><tr><td>  
</table> 
</form>
</body>
</html>

Line 57 is the edit button.

Edited by niths because: n/a
  • 2 Contributors
  • 1 Reply
  • 139 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by metalix
Member Avatar for metalix

You can have multiple ajax requests.
I would suggest using prototype
http://prototypejs.org
it makes it much easier.
use ajax updater to replace the innerhtml with the same content but just put the textarea tags around it.
also wrap it in a wysiwyg editor so as to keep the formatting.
I use openwysiwyg.
you can then change the javascript file to remove the options you don't need.

hope this helps :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.