php ajax issue:  date text file is populated for some report while others are not

Posted on 2012-08-23
Medium Priority
Last Modified: 2013-09-12
I have been spending hours on this and I can not seem to troubleshoot what could be causing this issue.

I have a web page in which you can select the frequency of a report: monthly or quarterly in a select box.  Depending on what is selected, it will call an ajax process to create another select box that is populated with the report name.  Now, depending on what report is selected, it will unhide a div container with the text fields for the date.   There is a calendar icon next to each textfield that allow user to pick a day from a calendar.

In addition, I have a click "add date" that will also call the ajax process to allow user to enter date for different report as the same time.

Here is the main page:
<select id="myselect" onchange="addDateGroup();" name="reporting">
<option value="1">monthly</option>
<option value="2">quarterly</option>

<div id="process-date-container"></div>
<xml_input type="hidden" name="dateGroupCount" value="0" />
<div class="div2add" onClick="addDateGroup(); return false;">add date</div>

Javascript for calling ajax (assume that the ajax connection is working)
function addDateGroup(group_count)
      var process_id = document.getElementById('reporting').value;
      var dateGroupCount = document.getElementById('dateGroupCount').value;
      var nextDateGroup = ++dateGroupCount;

      document.getElementById('dateGroupCount').value = nextDateGroup;
      var parentDiv = 'process-date-container';
      var targetDiv = document.getElementById(parentDiv);
      var newdiv = document.createElement('div');
      var divIdName = 'date_group_'+nextDateGroup;
      var req = ajaxConnect();      
      req.open( "GET","ajax_get_date.php?id="+escape(process_id)+"&gid="+escape(nextDateGroup),true);
      req.onreadystatechange = function()
            if ( req.readyState == 4 )
                  if ( req.status == 200 )                               
                        document.getElementById(divIdName).innerHTML= req.responseText;                              
                        alert("ERROR: addDateGroup");

ajax page:
$group_id = $_GET['id'];

<select id="reportName.<?php echo $group_id; ?>" onchange="showDateContainer(this.id,<?php echo $group_id; ?>');" name="reportName.<?php echo $group_id; ?>">
<option value="1">timesheet report</option>
<option value=2">accounting report</option>

foreach ($report as $key => $value)
      //select the date for this report
      $data = [result from the sql statement to get only the date for the report]
      <div id="<?php echo $value['report_name']; ?>-container-<?php echo $group_id; ?>" style="display: none;">
            <?php for ($i=0; $i < count($data); $i++) { ?>
                  <input type="text" maxlength="10" size="10" value="" name="<?php echo $data['report_name'][$i]['date_type']; ?>"><img class="cal_icon" align="absmiddle" src="icon_cal.gif" onclick="displayDatePicker(this.id);" onmouseout="this.style.cursor='default'" onmouseover="this.style.cursor='pointer'" style="cursor: default;">
            <?php } ?>

Javascript for showDateContainer()
function showDateContainer(selectName,groupID)
      var sIndex=document.getElementById(selectName).selectedIndex;
      var sOption=document.getElementById(selectName).options;
      var optionValue = sOption[sIndex].text;
      var optionlower = optionValue.toLowerCase();      
      var container = optionlower.replace(' ','-');
      var divID = container+'-container-'+groupID;
      document.getElementById(divID).style.display = "block";

Trial 1:

I would select "timesheet report" and it will display 3 date: received date, due date, sent date.  When I click on the calendar icon, it would work perfectly.  It would display the calendar underneath the text field and I am able to select each date and it will populate in each text field.

When I just on "add date" to allow me to select another report and its corresponding date.  This works.
I select "account report" and it too will display 2 textfield date: due date and sent date.  However, when I click on the calendar icon, it would display it on the top left of the screen instead of beneath the text field.  When I select the date, it does not populate the text field.

Trial 2:
I modified the query to select the different report.  This time the query is ordering the report name ascending (accounting then timesheet).
So I go through the process in which I would select timesheet report.  The date would work for the received date, but it would not work for the due date or sent date.  The accounting report date will still not work.

Help!! What is going on?  I even clear my cache and history.  
And here is some of the report result:

Trial 3:
report 1: timesheet
      received date: yes
      due date: yes
      sent date: yes

report 2: account
      due date: no
      sent date: no

report 3: report3name
      due date: no
      sent date: no

report 4: report4name
      due date: no
      sent date: no

report 8: report8name
      due date: yes
      sent date: yes

I don't understand why it work for certain reports and it doesn't work for other and why if i re-order them (ascending vs descending) ... the same report does not work.

Please help!

Attached is the datepicker.js that I used before and got from the internet.
Question by:lgduong

Accepted Solution

Erdinç Güngör Çorbacı earned 2000 total points
ID: 38327654
if you are familiar with jquery i suggest you to use this datepicker. The one you use is very old fashioned and may have bugs like that.


Author Comment

ID: 38329094
That look very simple.  I am not that familiar with jquery.  How do I incorporate multiple date text fields.  The jquery (javascript) is so specific to that div.  How do I call that function and passed variable div to it?

      $(function() {
            $( "#datepicker" ).datepicker();

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 10 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question